layui 表格绑定删除、批量删除、增加的操作

js

  layui.config({
        version: '1560414887155' //为了更新 js 缓存,可忽略
    });

    layui.use(['laydate', 'laypage',  'table',   'element'], function(){
        var laydate = layui.laydate //日期
            ,laypage = layui.laypage //分页
            ,table = layui.table //表格
            ,element = layui.element //元素操作

        //监听Tab切换
        element.on('tab(demo)', function(data){
            layer.tips('切换了 '+ data.index +':'+ this.innerHTML, this, {
                tips: 1
            });
        });

        //执行一个 table 实例
        table.render({
            elem: '#demo'
            ,height: 420
            ,url: '/getAllPageInfo' //数据接口
            ,title: '用户表'
            ,page: true //开启分页
            ,toolbar: 'default' //开启工具栏,此处显示默认图标,可以自定义模板,详见文档
            ,totalRow: true //开启合计行
            ,cols: [[ //表头
                {type: 'checkbox', fixed: 'left'}
                ,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left', totalRowText: '合计:'}
                ,{field: 'fileCode', title: '文件编号', width:80}
                ,{field: 'timeOfReceipt', title: '收文时间', width: 90, sort: true}
                ,{field: 'deliveryUnit', title: '送文单位', width:80, sort: true}
                ,{field: 'categoryName', title: '类别', width: 80, sort: true}
                ,{field: 'fileTitle', title: '文件标题', width:150}
                ,{field: 'instructionsContent', title: '批示内容', width: 200}
                ,{field: 'processingInformation', title: '办理情况', width: 100}
                ,{field: 'suspicionsName', title: '县名称', width: 100}
                ,{field: 'remarks', title: '备注', width: 135, sort: true}
                ,{fixed: 'right', width: 165, align:'center', toolbar: '#barDemo'}
            ]]
            ,done: function () {
                $("[data-field='id']").css('display','none')
            }
        });

        //监听头工具栏事件
        table.on('toolbar(test)', function(obj){
            var checkStatus = table.checkStatus(obj.config.id)
                ,data = checkStatus.data; //获取选中的数据


            switch(obj.event){
                case 'add':
                    layer.msg('添加');
                    break;
                case 'update':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else if(data.length > 1){
                        layer.msg('只能同时编辑一个');
                    } else {

                        var id=checkStatus.data[0].id;//id
                        var fileCode=checkStatus.data[0].fileCode;//文件编号
                        var timeOfReceipt=checkStatus.data[0].timeOfReceipt;//收文时间
                        var deliveryUnit=checkStatus.data[0].deliveryUnit;//送文单位
                        var categoryName=checkStatus.data[0].categoryName;//类别
                        var fileTitle=checkStatus.data[0].fileTitle;//文件标题
                        var instructionsContent=checkStatus.data[0].instructionsContent;//批示内容
                        var processingInformation=checkStatus.data[0].processingInformation;//办理情况
                        var suspicionsName=checkStatus.data[0].suspicionsName;//县名称
                        var remarks=checkStatus.data[0].remarks;//备注
                        //  layer.msg("修改");
                        layer.open({
                            title: '修改信息'
                            ,type: 1
                            ,closeBtn: false
                            ,area: '300px;'
                            ,shade: 0.8
                            ,id: 'LAY_layuipro'
                            ,btn: ['保存', '取消']
                            ,content: '
' + '文件编号
' + '收文时间
' + '送文单位
' + '类别
' + '文件标题
' + '批示内容
' + '办理情况
' + '县
' + '备注
' + '
' ,success: function(layero){ var btn = layero.find('.layui-layer-btn'); btn.find('.layui-layer-btn0').click(function () { var fileCode= top.$("#fileCode").val(); var timeOfReceipt= top.$("#timeOfReceipt").val(); var deliveryUnit= top.$("#timeOfReceipt1").val(); var categoryName= top.$("#categoryName").val(); var instructionsContent= top.$("#instructionsContent").val(); var processingInformation= top.$("#processingInformation").val(); var suspicionsName= top.$("#suspicionsName").val(); var remarks= top.$("#remarks").val(); var fileTitle= top.$("#fileTitle").val(); $.ajax({ //几个参数需要注意一下 type: "post",//方法类型 url: "/updateFile",//url data:{"id":id,"fileCode":fileCode ,"timeOfReceipt":timeOfReceipt,"deliveryUnit":deliveryUnit ,"categoryName":categoryName,"instructionsContent":instructionsContent ,"processingInformation":processingInformation,"suspicionsName":suspicionsName ,"remarks":remarks,"fileTitle":fileTitle}, dataType:"json", async:false, success: function (result) { console.log(result);//打印服务端返回的数据(调试用) if (0==result ) { alert("修改失败"); }else{ window.location.replace("intoHead"); }; }, error : function() { alert("请稍后重试!"); } }) }) } }); } break; case 'delete': var ids=[]; for (var i=0;i' + '
文件编号: '+fileCode+'
' + '
收文时间: '+timeOfReceipt+'
' + '
送文单位: '+deliveryUnit+'
' + '
类别: '+categoryName+'
' + '
文件标题: '+fileTitle+'
' + '
批示内容: '+instructionsContent+'
' + '
办理情况: '+processingInformation+'
' + '
县名称: '+suspicionsName+'
' + '
备注: '+remarks+'
' + '
' }); } else if(layEvent === 'del'){ layer.confirm('真的删除行么', function(index){ obj.del(); //删除对应行(tr)的DOM结构 layer.close(index); //向服务端发送删除指令 $.ajax({ //几个参数需要注意一下 type: "post",//方法类型 url: "/deleteFile",//url data:{"id":data.id}, dataType:"json", async:false, success: function (result) { console.log(result);//打印服务端返回的数据(调试用) if (0==result ) { alert("删除失败"); }else{ window.location.replace("intoHead"); }; }, error : function() { alert("请稍后重试!"); } }) }); } else if(layEvent === 'edit'){ var id=data.id;//id var fileCode=data.fileCode;//文件编号 var timeOfReceipt=data.timeOfReceipt;//收文时间 var deliveryUnit=data.deliveryUnit;//送文单位 var categoryName=data.categoryName;//类别 var fileTitle=data.fileTitle;//文件标题 var instructionsContent=data.instructionsContent;//批示内容 var processingInformation=data.processingInformation;//办理情况 var suspicionsName=data.suspicionsName;//县名称 var remarks=data.remarks;//备注 // layer.msg("修改"); layer.open({ title: '修改信息' ,type: 1 ,closeBtn: false ,area: '300px;' ,shade: 0.8 ,id: 'LAY_layuipro' ,btn: ['保存', '取消'] ,content: '
' + '文件编号
' + '收文时间
' + '送文单位
' + '类别
' + '文件标题
' + '批示内容
' + '办理情况
' + '县
' + '备注
' + '
' ,success: function(layero){ var btn = layero.find('.layui-layer-btn'); btn.find('.layui-layer-btn0').click(function () { var fileCode= top.$("#fileCode").val(); var timeOfReceipt= top.$("#timeOfReceipt").val(); var deliveryUnit= top.$("#timeOfReceipt1").val(); var categoryName= top.$("#categoryName").val(); var instructionsContent= top.$("#instructionsContent").val(); var processingInformation= top.$("#processingInformation").val(); var suspicionsName= top.$("#suspicionsName").val(); var remarks= top.$("#remarks").val(); var fileTitle= top.$("#fileTitle").val(); $.ajax({ //几个参数需要注意一下 type: "post",//方法类型 url: "/updateFile",//url data:{"id":id,"fileCode":fileCode ,"timeOfReceipt":timeOfReceipt,"deliveryUnit":deliveryUnit ,"categoryName":categoryName,"instructionsContent":instructionsContent ,"processingInformation":processingInformation,"suspicionsName":suspicionsName ,"remarks":remarks,"fileTitle":fileTitle}, dataType:"json", async:false, success: function (result) { console.log(result);//打印服务端返回的数据(调试用) if (0==result ) { alert("修改失败"); }else{ window.location.replace("intoHead"); }; }, error : function() { alert("请稍后重试!"); } }) }) } }); } }); //分页 laypage.render({ elem: 'pageDemo' //分页容器的id ,count: 100 //总页数 ,skin: '#1E9FFF' //自定义选中色值 //,skip: true //开启跳页 ,jump: function(obj, first){ if(!first){ layer.msg('第'+ obj.curr +'页', {offset: 'b'}); } } }); slider.render({ elem: '#sliderDemo' ,input: true //输入框 }); //底部信息 var footerTpl = lay('#footer')[0].innerHTML; lay('#footer').html(layui.laytpl(footerTpl).render({})) .removeClass('layui-hide'); });

controller

/**
     * 通过id删除
     * @param id
     * @return
     */
    @PostMapping("deleteFile")
    public int deleteFile(Integer[] id){
        return operationService.deleteFileById(id);
    }

 

转载于:https://my.oschina.net/u/3535099/blog/3078522

你可能感兴趣的:(layui 表格绑定删除、批量删除、增加的操作)