layui弹出层实现数据维护

在上一章的layui table中实现了数据在table中的渲染和展示（代码可在layui table篇找到），样式如下：

今天实现了左上角的+功能，即添加数据功能
代码如下

  //监听头工具栏事件
        table.on('toolbar(subTableEvent)', function(obj){ //注：toolbar 是工具条事件名（固定），subTableEvent 是 table 原始容器的属性 lay-filter="对应的值"
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据
            switch(obj.event){
                case 'add':		//添加操作
                    layer.open({
                        type: 1,
                        title:'新增栏目',
                        skin: 'layui-layer-demo', //样式类名
                        closeBtn: 0, //不显示关闭按钮
                        id:'addSubject',
                        anim: 2,
                        shadeClose: true, //开启遮罩关闭
                        content:  '<div style="width: 90%;height: 250px;margin-top: 15px;">' +		//此处定义了一个简单的维护信息的div
                            '  <div class="layui-form-item">\n' +
                            '    <label class="layui-form-label">编码：</label>\n' +
                            '    <div class="layui-input-block">\n' +
                            '      <input type="text" id="subject_code" lay-verify="required" placeholder="请输入" class="layui-input">\n' +
                            '    </div>\n' +
                            '  </div>' +
                            '  <div class="layui-form-item">\n' +
                            '    <label class="layui-form-label">名称：</label>\n' +
                            '    <div class="layui-input-block">\n' +
                            '      <input type="text" id="subject_nam" lay-verify="required" placeholder="请输入" class="layui-input">\n' +
                            '    </div>\n' +
                            '  </div>' +
                            '  <div class="layui-form-item">\n' +
                            '    <label class="layui-form-label">用户类型：</label>\n' +
                            '    <div class="layui-input-block">\n' +
                            '      <input type="text" id="user_type" lay-verify="required" placeholder="请输入" class="layui-input">\n' +
                            '    </div>\n' +
                            '  </div>' +
                            '  <div class="layui-form-item">\n' +
                            '    <label class="layui-form-label">排序：</label>\n' +
                            '    <div class="layui-input-block">\n' +
                            '      <input type="text" id="seq_num" lay-verify="required" placeholder="请输入数字" class="layui-input">\n' +
                            '    </div>\n' +
                            '  </div>' +
                            '</div>' +
                            '<div class="layui-form-item" align="center">\n' +
                            '    <button class="layui-btn" onclick="suer_onclick();">确定</button>\n' +
                            '    <button class="layui-btn layui-btn-primary" onclick="cancel_onclick();">取消</button>\n' +
                            '  </div>'
                        });
                    break;
                case 'update':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else if(data.length > 1){
                        layer.msg('只能同时编辑一个');
                    } else {
                        layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
                    }
                    break;
                case 'delete':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else {
                        layer.msg('删除');
                    }
                    break;
            };
        });
    });

该简单的维护界面就是上面代码中的content中的内容，确定和取消事件如下：

function suer_onclick(){
        var subject_code = $("#subject_code").val(),
            subject_nam = $("#subject_nam").val(),
            user_type = $("#user_type").val(),
            seq_num = $("#seq_num").val();
            //获取到对应的字段信息，
        if(subject_code==null||subject_code==''||subject_code==undefined){
            layer.msg('请输入编码');
            return;
        }
        if(subject_nam==null||subject_nam==''||subject_nam==undefined){
            layer.msg('请输入名称');
            return;
        }
        if(user_type==null||user_type==''||user_type==undefined){
            layer.msg('请输入用户类型');
            return;
        }
		//将数据提交后台
        $.ajax({
            type : "POST",//提交方式
            url  : "/admin/setSubjectInfo",//提交地址
            data : {"subject_code":subject_code,"subject_nam":subject_nam,"user_type":user_type,"seq_num":seq_num},//提交的数据
            dataType : "json",
            success  : function(data){  //返回结果
                if(data.result=="true"){//如果返回结果为true，则数据插入成功，关闭弹出层后对页面的table进行刷新
                    layer.closeAll();
                    layui.use(['table'], function(){
                        var table = layui.table;
                        table.reload('subTable', {  //subTable为table的id
                            url: '/user/table/subject'			//此处为获取表中数据的地址，代码可从上一节中找到
                            ,where: {} //设定异步数据接口的额外参数

                        });
                    });
                }
            },
            error : function(data){
                alert("错误");
            }
        });

    }

    function cancel_onclick() {
        layer.closeAll();
    }

插入数据的后台java代码如下：

    @ResponseBody
    @RequestMapping(value = "/admin/setSubjectInfo" , method = RequestMethod.POST , produces="application/json;charset=utf-8")
    public JSONObject head(@RequestParam(name = "subject_code",required = true)String subject_code,@RequestParam(name = "subject_nam",required = true)String subject_nam,
                       @RequestParam(name = "user_type",required = true)String user_type,@RequestParam(name = "seq_num",required = false)int seq_num){
        Subject subject = new Subject();
        subject.setSubjectCode(subject_code);
        subject.setSubjectNam(subject_nam);
        subject.setUserType(user_type);
        subject.setSeqNum(seq_num);
        subjectService.insertOrUpdateSubjectInfo(subject);
        JSONObject jo = new JSONObject();
        jo.put("result","true");
        return jo;
    }

  public void insertOrUpdateSubjectInfo(Subject subject){
        subjectMapper.insert(subject);
   }

同时还实现了行的删除代码，代码如下：

 //监听行工具事件
        table.on('tool(subTableEvent)', function(obj){ //注：tool 是工具条事件名（固定），subTableEvent 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data                 //获得当前行数据
                ,layEvent = obj.event;          //获得 lay-event 对应的值
            if(layEvent === 'detail'){
                layer.msg('查看操作');
            } else if(layEvent === 'del'){
                layer.confirm('确定删除？', function(index){
                    $.ajax({
                        type : "POST",//提交方式
                        url  : "/admin/delSubjectInfo",//提交地址
                        data : {"subject_no":data.subject_no},//提交的数据
                        dataType : "json",
                        success  : function(data){  //返回结果
                            if(data.result=="true"){
                                obj.del();              //删除对应行（tr）的DOM结构
                                layer.close(index);//向服务端发送删除指令
                            }
                        },
                        error : function(data){
                            alert("错误");
                        }
                    });

                });
            } else if(layEvent === 'edit'){
                layer.msg('编辑操作');
            }
        });

后台代码：

 @ResponseBody
    @RequestMapping(value = "/admin/delSubjectInfo" , method = RequestMethod.POST , produces="application/json;charset=utf-8")
    public JSONObject head(@RequestParam(name = "subject_no",required = true)String subject_no){
        subjectService.delSubjectInfo(subject_no);
        JSONObject jo = new JSONObject();
        jo.put("result","true");
        return jo;
    }


  public void delSubjectInfo(String subject_no){
        QueryWrapper qw = new QueryWrapper();
        qw.eq("subject_no",subject_no);
        subjectMapper.delete(qw);
    }

此处我用了layui的设计模板，登录界面不是很美观，后续将通过该弹出层对登录进行改造。