首页新闻找找看学习计划

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>
View Code

接着写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

 

以上是,遇到的问题,希望大佬路过有空帮忙解答下,谢谢

 

 

前程明亮的主页 前程明亮 | 初学一级 | 园豆:116
提问于:2017-07-25 13:17
< >
分享
最佳答案
0

关闭前清空一下历史数据不就行了?

收获园豆:20
站在那看风景 | 菜鸟二级 |园豆:369 | 2017-07-25 13:48
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');

}
View Code

之前是用上面的方法清空的,但拓展性不好……

每个表单都要写这么多js, 要死……主要是部门老大说不行,要求我改……

前程明亮 | 园豆:116 (初学一级) | 2017-07-25 14:51

@前程明亮: 可以将最外层的标签html(""),又或者给所有需要清空的标签加个特定样式名,清空时遍历该样式进行清空。

站在那看风景 | 园豆:369 (菜鸟二级) | 2017-08-17 14:58
其他回答(2)
0

那你在关闭的时候清除一下不就解决了

好来污影后 | 园豆:287 (菜鸟二级) | 2017-07-25 13:32
View Code

之前是用上面的方法清空的,但拓展性不好……

每个表单都要写这么多js, 要死……主要是部门老大说不行,要求我改……

支持(0) 反对(0) 前程明亮 | 园豆:116 (初学一级) | 2017-07-25 14:51
0

if you use Jquery, you can simple do

$("#client.frm").trigger('reset')
爱编程的大叔 | 园豆:29788 (高人七级) | 2017-07-25 13:41
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');

}
View Code

你这个不行……

之前有用reset()试过,但好像不能清空select标签

支持(0) 反对(0) 前程明亮 | 园豆:116 (初学一级) | 2017-07-25 14:49
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册