layer的使用
0
悬赏园豆：20
[已解决问题]
解决于 2017-08-17 23:35
有用过layer的朋友吗？最近在搞运维系统的项目，需要一些表单，最初是用模态框，但发现不好用：你点击新增按钮，输入信息BB，点击提交。ending，但是当你下前再打开新增按钮的模态框时，发现form表单出现上次提交的信息BB，而不是空的form表单。
基于上面的这个问题，我开始用layer插件，我把form写在一个add_form.html文件，
<div id="edit_instance" style="display:none;"> <form action="" class="form-horizontal" method="post" id="edit_instance_meta"> {% csrf_token %} <div class="form-body" id="instance_form_group"> <div class="form-group"> <label class="col-md-2 control-label">实例角色</label> <div class="col-md-4"> <select class="bs-select form-control" data-live-search="true" data-size="8" name="role" id="role_add"> <option value="" >请选择</option> {% for role_option in select_options.roles%} <option value="{{ role_option.role }}" >{{ role_option.role }}</option> {% endfor %} </select> </div> <label class="col-md-2 control-label">实例端口</label> <div class="col-md-4"> <input name="db_port" id="db_port_add" value="" class="form-control"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">数据库类型</label> <div class="col-md-4"> <select class="bs-select form-control" data-live-search="true" data-size="8" name="db_type" id="db_type_add"> <option value="" >请选择</option> {% for db_type_option in select_options.db_type%} <option value="{{ db_type_option.db_type }}">{{ db_type_option.db_type }}</option> {% endfor %} </select> </div> <label class="col-md-2 control-label">数据库版本</label> <div class="col-md-4"> <select class="bs-select form-control" data-live-search="true" data-size="8" name="db_version" id="db_version_add"> <option value="">请选择</option> {% for db_version_option in select_options.db_version%} <option value="{{ db_version_option.db_version }}">{{ db_version_option.db_version }}</option> {% endfor %} </select> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">一级业务名</label> <div class="col-md-4"> <input name="module" id="module_add" value="" class="form-control"> </div> <label class="col-md-2 control-label">二级业务名</label> <div class="col-md-4"> <input name="sub_module" id="sub_module_add" value="" class="form-control"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">三级业务名</label> <div class="col-md-4"> <input name="business_name" id="business_name_add" value="" class="form-control"> </div> <label class="col-md-2 control-label">机房</label> <div class="col-md-4"> <select class="bs-select form-control" data-live-search="true" data-size="8" name="machine_room" id="machine_room_add"> <option value="">请选择</option> {% for options in select_options.machine_room%} <option value="{{ options.machine_room }}">{{ options.machine_room }}</option> {% endfor %} </select> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">三级业务中文描述</label> <div class="col-md-4"> <input name="business_name_desc" value="" class="form-control"> </div> <label class="col-md-2 control-label">myshard节点名</label> <div class="col-md-4"> <input name="room_num" value="" class="form-control"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">myshard区域名</label> <div class="col-md-4"> <input name="area_num" value="" class="form-control"> </div> <label class="col-md-2 control-label">用户名</label> <div class="col-md-4"> <input name="user_name" value="" class="form-control"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">用户密码</label> <div class="col-md-4"> <input name="user_passwd" value="" class="form-control"> </div> <label class="col-md-2 control-label">操作系统</label> <div class="col-md-4"> <select class="bs-select form-control" data-live-search="true" data-size="8" name="is_dbmachine" id="is_dbmachine_add"> <option value="">请选择</option> <option value="0">否</option> <option value="1">是</option> </select> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">开发负责人</label> <div class="col-md-4"> <select class="bs-select form-control" title="请选择" data-live-search="true" data-size="8" name="developer_des" multiple id="developer_des_add"> <!--<option value="">请选择</option>--> {% for developer_des_option in select_options.developer_des%} <option value="{{ developer_des_option }}">{{ developer_des_option }}</option> {% endfor %} </select> </div> <label class="col-md-2 control-label">运维负责人</label> <div class="col-md-4"> <select class="bs-select form-control" title="请选择" data-live-search="true" data-size="8" name="operator_des" multiple id="operator_des_add"> <!--<option value="">请选择</option>--> {% for operator_des_option in select_options.operator_des%} <option value="{{ operator_des_option }}">{{ operator_des_option }}</option> {% endfor %} </select> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">开发负责人英文名</label> <div class="col-md-4"> <select class="bs-select form-control" title="请选择" data-live-search="true" data-size="8" name="developer" multiple id="developer_add"> <!--<option value="">请选择</option>--> {% for developer_des_option in select_options.developer %} <option value="{{ developer_des_option }}">{{ developer_des_option }}</option> {% endfor %} </select> </div> <label class="col-md-2 control-label">运维负责人英文名</label> <div class="col-md-4"> <select class="bs-select form-control" title="请选择" data-live-search="true" data-size="8" name="operator" multiple id="operator_add"> <!--<option value="">请选择</option>--> {% for operator_des_option in select_options.operator %} <option value="{{ operator_des_option }}">{{ operator_des_option }}</option> {% endfor %} </select> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">状态</label> <div class="col-md-4"> <select class="bs-select form-control" data-live-search="true" data-size="8" name="state" id="state_add"> <option value="">请选择</option> <option value="online">online</option> <option value="building">building</option> <option value="offline">offline</option> </select> </div> <label class="col-md-2 control-label">是否微会机器</label> <div class="col-md-4"> <select class="bs-select form-control" data-live-search="true" data-size="8" name="is_weihui_machine" id="is_weihui_machine_add"> <option value="">请选择</option> <option value=0>否</option> <option value=1>是</option> </select> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">电信IP</label> <div class="col-md-4"> <input name="tel_ip" value="" class="form-control" readonly> </div> <label class="col-md-2 control-label">联通IP</label> <div class="col-md-4"> <input name="un_ip" value="" class="form-control" readonly> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">移动ip</label> <div class="col-md-4"> <input name="mob_ip" value="" class="form-control" readonly> </div> <label class="col-md-2 control-label">内网IP</label> <div class="col-md-4"> <input name="in_ip" value="" class="form-control" readonly> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">管理IP</label> <div class="col-md-4"> <input name="man_ip" value="" class="form-control" readonly> </div> <label class="col-md-2 control-label">登陆ip</label> <div class="col-md-4"> <input name="login_ip" value="" class="form-control" readonly> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">父节点IP</label> <div class="col-md-4"> <input name="parent_ip" value="" class="form-control"> </div> <label class="col-md-2 control-label">父节点端口</label> <div class="col-md-4"> <input name="parent_port" value="" class="form-control"> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">备份状态</label> <div class="col-md-4"> <select class="bs-select form-control" data-live-search="true" data-size="8" name="backup_status" id="backup_status_add"> <option value="">请选择</option> <option value="0">非备份</option> <option value="1">备份</option> <option value="2">备份中</option> </select> </div> <label class="col-md-2 control-label">重要级别</label> <div class="col-md-4"> <select class="bs-select form-control" data-live-search="true" data-size="8" name="importance_level" id="importance_level_add"> <option value="">请选择</option> <option value=1>1</option> <option value=2>2</option> <option value=3>3</option> </select> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">读写角色</label> <div class="col-md-4"> <select class="bs-select form-control" data-live-search="true" data-size="8" name="rw_role" id="rw_role_add"> <option value="">请选择</option> <option value="rw">读写</option> <option value="r">只读</option> </select> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">创建时间</label> <div class="col-md-4"> <input name="create_time" value="" class="form-control" readonly> </div> <label class="col-md-2 control-label">最后修改时间</label> <div class="col-md-4"> <input name="last_modify_time" value="" class="form-control" readonly> </div> </div> <div class="form-group"> <label class="col-md-2 control-label">备注:</label> <div class="col-md-10"> <textarea name="remarks" class="form-control"></textarea> </div> </div> </div> </form> {# <button type="button" class="btn dark btn-outline" data-dismiss="modal">关闭</button>#} {# <button type="submit" class="btn green" id="instance_edit_submit" onclick="submit_edit_instance()">提交</button>#} </div>
接着写JS：
$("#add_button").on("click", function () {
console.log("layer");
var index = layer.open({
type:0,
skin: 'layui-layer-lan', //加上边框
area: ['890px', '900px'], //宽高
shadeClose:true,
content: "layer_form/add_form.html"
});
});
但是无法引入add_form.html文件，这怎么解决？
下图是这django项目的templates目录；
上面这个方法不行，我看了官网：
layer.open({ type: 1, content: $('#id') //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响 });
content的内容也换成ID选择器，点击按钮，form表单的确弹出来了。
如下：
$("#add_button").on("click", function () {
console.log("layer");
var index = layer.open({
type:0,
skin: 'layui-layer-lan', //加上边框
area: ['890px', '900px'], //宽高
shadeClose:true,
content: $("#edit_instance1")
});
});
执行上面代码，第一次可以弹出来，第二次就弹不出来！因为第一次关闭时，就把form表单的外层div销毁了
$("#add_button").on("click", function () {
console.log("layer");
var index = layer.open({
type:1,
skin: 'layui-layer-lan', //加上边框
area: ['890px', '900px'], //宽高
shadeClose:true,
content: $("#edit_instance1")
});
});
执行上面代码，每次点击都可以弹出来。但是弹出来后给form表单输入一些信息AA，然后关闭，再次打开后，发现残留上次的信息AA
以上是，遇到的问题，希望大佬路过有空帮忙解答下，谢谢
最佳答案
0
关闭前清空一下历史数据不就行了？
收获园豆：20
function add_instance_meta() { document.getElementById("role_add").options.selectedIndex = 0; $("#role_add"). selectpicker('refresh');//1 //document.getElementById("db_port_add").options.selectedIndex = 0; //$("#db_port_add"). selectpicker('refresh');//2 $("input[name='db_port']").val(""); document.getElementById("db_type_add").options.selectedIndex = 0; $("#db_type_add"). selectpicker('refresh');//3 document.getElementById("db_version_add").options.selectedIndex = 0; $("#db_version_add"). selectpicker('refresh');//4 //document.getElementById("module_add").options.selectedIndex = 0; //$("#module_add"). selectpicker('refresh');//5 $("input[name='module']").val(""); //document.getElementById("sub_module_add").options.selectedIndex = 0; //$("#sub_module_add"). selectpicker('refresh');//6 $("input[name='sub_module']").val(""); $("input[name='business_name']").val(""); //document.getElementById("business_name_add").options.selectedIndex = 0; //$("#business_name_add"). selectpicker('refresh');//7 document.getElementById("machine_room_add").options.selectedIndex = 0; $("#machine_room_add"). selectpicker('refresh');//8 document.getElementById("rw_role_add").options.selectedIndex = 0; $("#rw_role_add"). selectpicker('refresh');//8 $("input[name='business_name_desc']").val("");//9 $("input[name='room_num']").val("");//10 $("input[name='area_num']").val("");//11 $("input[name='user_name']").val("");//12 $("input[name='user_passwd']").val("");//13 document.getElementById("is_dbmachine_add").options.selectedIndex = 0; $("#is_dbmachine_add"). selectpicker('refresh');//14 document.getElementById("developer_des_add").options.selectedIndex = -1; $("#developer_des_add"). selectpicker('refresh');//15 document.getElementById("operator_des_add").options.selectedIndex = -1; $("#operator_des_add"). selectpicker('refresh');//16 document.getElementById("developer_add").options.selectedIndex = -1; $("#developer_add"). selectpicker('refresh');//17 document.getElementById("operator_add").options.selectedIndex = -1; $("#operator_add"). selectpicker('refresh');//18 document.getElementById("state_add").options.selectedIndex = 0; $("#state_add"). selectpicker('refresh');//19 document.getElementById("is_weihui_machine_add").options.selectedIndex = 0; $("#is_weihui_machine_add"). selectpicker('refresh');//20 $("input[name='tel_ip']").val("");//21 $("input[name='un_ip']").val("");//22 $("input[name='mob_ip']").val("");//23 $("input[name='in_ip']").val("");//24 $("input[name='man_ip']").val("");//25 $("input[name='login_ip']").val("");//26 $("input[name='parent_ip']").val("");//27 $("input[name='parent_port']").val("");//28 document.getElementById("backup_status_add").options.selectedIndex = 0; $("#backup_status_add"). selectpicker('refresh');//29 document.getElementById("importance_level_add").options.selectedIndex = 0; $("#importance_level_add"). selectpicker('refresh');//30 $("input[name='create_time']").val("");//31 $("input[name='last_modify_time']").val("");//32 $("textarea[name='remarks']").val("");//33 $("#edit_instance_meta").attr("action", "/instanceMeta/addInstance/"); $("input[name='tel_ip']").removeAttr("readonly"); $("input[name='un_ip']").removeAttr("readonly"); $("input[name='mob_ip']").removeAttr("readonly"); $("input[name='in_ip']").removeAttr("readonly"); $("input[name='man_ip']").removeAttr("readonly"); $("input[name='login_ip']").removeAttr("readonly"); $("#edit_instance").modal('show'); }
之前是用上面的方法清空的，但拓展性不好……
每个表单都要写这么多js, 要死……主要是部门老大说不行，要求我改……
@前程明亮: 可以将最外层的标签html("")，又或者给所有需要清空的标签加个特定样式名，清空时遍历该样式进行清空。
其他回答(2)
0
那你在关闭的时候清除一下不就解决了
View Code之前是用上面的方法清空的，但拓展性不好……
每个表单都要写这么多js, 要死……主要是部门老大说不行，要求我改……
0
if you use Jquery, you can simple do
$("#client.frm").trigger('reset')
function add_instance_meta() { document.getElementById("role_add").options.selectedIndex = 0; $("#role_add"). selectpicker('refresh');//1 //document.getElementById("db_port_add").options.selectedIndex = 0; //$("#db_port_add"). selectpicker('refresh');//2 $("input[name='db_port']").val(""); document.getElementById("db_type_add").options.selectedIndex = 0; $("#db_type_add"). selectpicker('refresh');//3 document.getElementById("db_version_add").options.selectedIndex = 0; $("#db_version_add"). selectpicker('refresh');//4 //document.getElementById("module_add").options.selectedIndex = 0; //$("#module_add"). selectpicker('refresh');//5 $("input[name='module']").val(""); //document.getElementById("sub_module_add").options.selectedIndex = 0; //$("#sub_module_add"). selectpicker('refresh');//6 $("input[name='sub_module']").val(""); $("input[name='business_name']").val(""); //document.getElementById("business_name_add").options.selectedIndex = 0; //$("#business_name_add"). selectpicker('refresh');//7 document.getElementById("machine_room_add").options.selectedIndex = 0; $("#machine_room_add"). selectpicker('refresh');//8 document.getElementById("rw_role_add").options.selectedIndex = 0; $("#rw_role_add"). selectpicker('refresh');//8 $("input[name='business_name_desc']").val("");//9 $("input[name='room_num']").val("");//10 $("input[name='area_num']").val("");//11 $("input[name='user_name']").val("");//12 $("input[name='user_passwd']").val("");//13 document.getElementById("is_dbmachine_add").options.selectedIndex = 0; $("#is_dbmachine_add"). selectpicker('refresh');//14 document.getElementById("developer_des_add").options.selectedIndex = -1; $("#developer_des_add"). selectpicker('refresh');//15 document.getElementById("operator_des_add").options.selectedIndex = -1; $("#operator_des_add"). selectpicker('refresh');//16 document.getElementById("developer_add").options.selectedIndex = -1; $("#developer_add"). selectpicker('refresh');//17 document.getElementById("operator_add").options.selectedIndex = -1; $("#operator_add"). selectpicker('refresh');//18 document.getElementById("state_add").options.selectedIndex = 0; $("#state_add"). selectpicker('refresh');//19 document.getElementById("is_weihui_machine_add").options.selectedIndex = 0; $("#is_weihui_machine_add"). selectpicker('refresh');//20 $("input[name='tel_ip']").val("");//21 $("input[name='un_ip']").val("");//22 $("input[name='mob_ip']").val("");//23 $("input[name='in_ip']").val("");//24 $("input[name='man_ip']").val("");//25 $("input[name='login_ip']").val("");//26 $("input[name='parent_ip']").val("");//27 $("input[name='parent_port']").val("");//28 document.getElementById("backup_status_add").options.selectedIndex = 0; $("#backup_status_add"). selectpicker('refresh');//29 document.getElementById("importance_level_add").options.selectedIndex = 0; $("#importance_level_add"). selectpicker('refresh');//30 $("input[name='create_time']").val("");//31 $("input[name='last_modify_time']").val("");//32 $("textarea[name='remarks']").val("");//33 $("#edit_instance_meta").attr("action", "/instanceMeta/addInstance/"); $("input[name='tel_ip']").removeAttr("readonly"); $("input[name='un_ip']").removeAttr("readonly"); $("input[name='mob_ip']").removeAttr("readonly"); $("input[name='in_ip']").removeAttr("readonly"); $("input[name='man_ip']").removeAttr("readonly"); $("input[name='login_ip']").removeAttr("readonly"); $("#edit_instance").modal('show'); }
你这个不行……
之前有用reset()试过，但好像不能清空select标签
