使用layui前端框架注意事项（对数据进行CRUD操作）

使用layui前端框架注意事项（对数据进行CRUD操作）

导入相应的依赖包，初始化layui容器

<script>
    //一般直接写在一个js文件中,使用时加载相应的模块即可，
    //值得注意的是若你已经导入了引入好layer.js后，可以不用再容器中去加载layer模块。
    layui.use(['layer', 'form', 'table'], function () {
    	//加载模块
        var form = layui.form;
        var table = layui.table;
    });
</script>

1、动态表格数据展示时，会向后端发送异步请求，要求返回的格式如下,所以后端最好建立一个类与之相匹配，其中data的参数类型我们可以定义为这样我们在new这个类时可以实现自定义类型

{
    code:转态为0是表示成功
    ,msg:消息，即提示信息
    ,data:数据
    ,count:数据条数
}

2、数据表格重载问题

对于进行按特定参数查询的字段，可以生成一个表单，将要查询的字段囊括在内，如下所示

<form class="layui-form">
    <div class="layui-inline" style="margin-top: 10px">
        <label class="layui-form-label">用户名</label>
        <div class="layui-input-inline" style="width: 200px;">
            <input type="text" name="pname" autocomplete="off" class="layui-input" />
        </div>
        <button class="layui-btn" lay-submit id="search-person" lay-filter="search-person"><i class="layui-icon">&#xe615;</i>搜索
        </button>
    </div>
</form>

<script>
    form.on("submit(search-person)", function (data) {//监听查询表单的提交
        table.reload("person_list",{//重新加载，并查询的数据传到后台where:data.field
            where:data.field
        })
        return false;//不进行跳转页面
    })
</script>
//注意：
//search-person为button按钮的id名
//person_list为table的id名
//id名和lay-filter的名可以取相同

3、批量删除操作

<%--头部工具栏--%>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="addPerson"><i class="layui-icon">&#xe654;</i>添加用户</button>
        <button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="delteAll"><i class="layui-icon">&#xe640;</i>批量删除
    </button>
    </div>
</script>
<script>
    在table的render中加入toolbar: '#toolbarDemo' //开启头部工具栏，并为其绑定左侧模板
    //头工具栏事件
    table.on('toolbar(person_list)', function (obj) {
        var checkStatus = table.checkStatus(obj.config.id);
        switch (obj.event) {
            case 'addPerson'://xinzeng
                openFormEdit()//调用方法
                break;
            case 'delteAll'://批量删除
                var data = checkStatus.data;
                if (data.length > 0) {
                    deletePerson(data)
                }
                break;
        }
        ;
    });
    function openFormEdit() {//提取公有部分
        layer.open({
            type: 1
            , content: $("#person-from").html()
            , title: "添加用户"
            , area: ['380px', '600px']
            , btn: ['提交', '取消'] //可以无限个按钮
            , btn1: function (index, layero) {
                global_index = index;
                $("#sub").click()
            }
            , btn2: function (index, layero) {//取消
                layer.close(global_index)

            }, success: function (layero, index) {
                form.render(); //更新全部
            }
        })
    }

    form.on("submit(sub)", function (data) {//监听表单的提交点击事件
        $.ajax({
            url: "${pageContext.request.contextPath}/personUpdate"
            , data: data.field
            , type: "post"
            , success: function (res) {
                if (res.code == 0) {
                    layer.msg(res.msg)//弹出提示信息
                    table.reload("person_list", {})//重新加载页面数据
                    layer.close(global_index)//关闭当前弹窗
                } else {
                    layer.msg(res.msg)
                }
            }
            , dataType: "json"
        });
        return false;//不进行跳转页面，使用ajax异步交互
    })
//删除数据传的是数组
    function deletePerson(data) {
        var ids = new Array();
        for (var i = 0; i < data.length; i++) {
            ids.push(data[i].pid)
        }
        layer.confirm('是否确认删除选中项，删除后数据无法恢复?', {
            btn: ['确认', '取消'] //按钮
        }, function (index) {
            $.ajax({
                url: "${pageContext.request.contextPath}/personDel"
                , data: "pid=" + ids
                , type: "post"
                , success: function (res) {
                    if (res.code == 0) {//删除成功
                        table.reload("person_list", {
                            page: {
                                curr: 1 //重新从第 1 页开始
                            }
                        })
                        layer.msg(res.msg);
                    } else {//删除失败
                        layer.msg(res.msg);
                    }
                }
                , dataType: "json"
            })
            layer.close(index)
        });
    }
</script>

4、修改数据

<script>
    //监听行工具事件
    table.on('tool(person_list)', function (obj) {
        var data = obj.data;//
        //进行修改和删除操作
        if (obj.event === 'del') {
            var datas = new Array();
            datas.push(data);
            deletePerson(datas);
        } else if (obj.event === 'edit') {//修改操作
            layer.open({
                type: 1
                , content: $("#person-from").html()
                , title: "修改用户"
                , area: ['380px', '600px']
                , btn: ['提交', '取消'] //可以无限个按钮
                , btn1: function (index, layero) {
                    global_index = index;//设置为全局的index，方便其他组件调用
                    $("#sub").click()//设置按钮点击事件（点击事件的触发方法在上面👆）
                }
                , btn2: function (index, layero) {//取消
                    layer.close(global_index)
                }, success: function (layero, index) {
                    form.val('formTest', data)//表单数据回填
                    form.render(); //更新全部
                }
            })
        }
    });
</script>

5、打开弹框进行数据修改操作时，若为javaScript中的表单形式，记得写出如下格式content: $("#form_data").html()；切记不要忘了.html

//打开表单进行添加的
function openForm(id) {
    var title=id==null?"添加供应商信息":'修改供应商信息'
    layer.open({
        type: 1
        ,content: $("#form_data").html() //这里content是一个普通的String
        ,title:title
        ,area: ['350px', '600px']
        ,btn: ['提交', '取消'] //可以无限个按钮
        ,btn1: function(index, layero){
            global_index=index;//当前弹窗
            $("#form-subn").click();//进行提交操作
            layer.close(index);//关闭当前页面
        }
        ,btn2: function(index, layero){
            //按钮【按钮三】的回调
            layer.close(index)
        }
        ,success: function(layero, index){
            form.render();//更新表单
        }
    });
}
注意：form_data为这个表单的id
<%--添加和修改表单--%>
<script type="text/html" id="form_data">
    <form class="layui-form" action="">
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">供应商编号</label>
            <div class="layui-input-inline">
                <input type="text" name="providerCode" required lay-verify="required" placeholder="请输入供应商编号" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">供应商名称</label>
            <div class="layui-input-inline">
                <input type="text" name="providerName" required lay-verify="required" placeholder="请输入供应商名称"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">联系人</label>
            <div class="layui-input-inline">
                <input type="text" name="contacts" required lay-verify="required" placeholder="请输入联系人"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机号</label>
            <div class="layui-input-inline">
                <input type="text" name="mobile" required lay-verify="phone" placeholder="请输入手机号"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">传真</label>
            <div class="layui-input-inline">
                <input type="text" name="fax" required lay-verify="required" placeholder="请输入传真"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">创建时间</label>
            <div class="layui-input-inline">
                <input type="date" name="createDate" required lay-verify="date"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <button class="layui-btn" lay-submit lay-filter="form-subn" id="form-subn" style="display: none">提交</button>
    </form>
</script>

6、动态加载页面上的下拉框的值

<div class="layui-form-item" lay-filter="search-form">
    <div class="layui-inline">
        <div class="layui-form-mid">供应商：</div>
        <div class="layui-input-inline" style="width: 180px;">
            <select name="proId" id="proId" class="layui-input">
                <option value="">请选择</option>
            </select>
        </div>
        <button class="layui-btn" lay-submit id="serach-provider" lay-filter="serach-provider"><i class="layui-icon">&#xe615;</i>搜索
        </button>
    </div>
</div>
<script>
    //一般直接写在一个js文件中
    layui.use(['layer', 'form', 'table'], function () {
        var form = layui.form;
        var table = layui.table;
        providerShow("#proId")

        //动态为查询字段复选框赋值，传入的id为该复选框的id属性值
        function providerShow(id) {
            $.ajax({
                url: "${pageContext.request.contextPath}/billProviderList"
                , type: "post"
                , success: function (res) {
                    if (res.code == 0) {
                        $.each(res.data, function (index, obj) {
                            $(id).append('<option value="' +
                                obj.id
                                + ' ">' + obj.providerName + '</option>'
                            )
                            form.render();//重新渲染表单
                        })
                        form.render();//重新渲染表单
                    } else {
                        layer.msg(res.msg)
                    }
                }
                , dataType: "json"
            })
        }
    });
</script>