1. 程式人生 > >layui 表格繫結刪除、批量刪除、增加的操作

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: '<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

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