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

2020-12-07 14:32:46 浏览数 (1)

js

代码语言:javascript复制
  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: '<div>'  
                                '文件编号<input type="text" value="' fileCode '" id="fileCode"/></br>'  
                                '收文时间<input type="text" value="' timeOfReceipt '" id="timeOfReceipt"/></br>'  
                                '送文单位<input type="text" value="' deliveryUnit '" id="timeOfReceipt1"/></br>'  
                                '类别<input type="text" value="' categoryName '" id="categoryName"/></br>'  
                                '文件标题<input type="text" value="' fileTitle '" id="fileTitle"/></br>'  
                                '批示内容<input type="text" value="' instructionsContent '" id="instructionsContent"/></br>'  
                                '办理情况<input type="text" value="' processingInformation '" id="processingInformation"/></br>'  
                                '县<input type="text" value="' suspicionsName '" id="suspicionsName"/></br>'  
                                '备注<input type="text" value="' remarks '" id="remarks"/></br>'  
                                '</div>'
                            ,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<data.length;i  ){

                        ids.push(checkStatus.data[i].id)
                    }

                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else {
                      
                        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 () {
                                    $.ajax({
                                        //几个参数需要注意一下
                                        type: "post",//方法类型
                                        url: "/deleteFile",//url
                                        data:{"id":ids},
                                        dataType:"json",
                                        async:false,
                                        traditional: true,
                                        success: function (result) {
                                            console.log(result);//打印服务端返回的数据(调试用)
                                            if (0==result ) {
                                                alert("修改失败");

                                            }else{
                                                window.location.replace("intoHead");
                                            };
                                        },
                                        error : function() {
                                            alert("请稍后重试!");
                                        }
                                    })
                                })

                            }
                        });

                    }
                    break;
            };
        });

        //监听行工具事件
        table.on('tool(test)', function(obj){ //注:tool 是工具条事件名,test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'detail'){
                //layer.msg('查看操作');
                //获取值
                var id=data.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.open({
                    title: '查看详细信息'
                    ,content: '<div>'  
                        '<div>文件编号: ' fileCode '</div>'  
                        '<div>收文时间: ' timeOfReceipt '</div>'  
                        '<div>送文单位: ' deliveryUnit '</div>'  
                        '<div>类别: ' categoryName '</div>'  
                        '<div>文件标题: ' fileTitle '</div>'  
                        '<div>批示内容: ' instructionsContent '</div>'  
                        '<div>办理情况: ' processingInformation '</div>'  
                        '<div>县名称: ' suspicionsName '</div>'  
                        '<div>备注: ' remarks '</div>'  
                        '</div>'
                });
            } 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: '<div>'  
                        '文件编号<input type="text" value="' fileCode '" id="fileCode"/></br>'  
                        '收文时间<input type="text" value="' timeOfReceipt '"  id="timeOfReceipt"/></br>'  
                        '送文单位<input type="text" value="' deliveryUnit '" id="timeOfReceipt1"/></br>'  
                        '类别<input type="text" value="' categoryName '" id="categoryName"/></br>'  
                        '文件标题<input type="text" value="' fileTitle '" id="fileTitle"/></br>'  
                        '批示内容<input type="text" value="' instructionsContent '" id="instructionsContent"/></br>'  
                        '办理情况<input type="text" value="' processingInformation '" id="processingInformation"/></br>'  
                        '县<input type="text" value="' suspicionsName '" id="suspicionsName"/></br>'  
                        '备注<input type="text" value="' remarks '" id="remarks"/></br>'  
                        '</div>'
                    ,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

代码语言:javascript复制
/**
     * 通过id删除
     * @param id
     * @return
     */
    @PostMapping("deleteFile")
    public int deleteFile(Integer[] id){
        return operationService.deleteFileById(id);
    }

0 人点赞