layui動態數據表格,每次操作完數據,數據表格刷新,且回到之前所操作的數據位置


layui.use(['table','upload'], function () {
    var table = layui.table;
    var $ = layui.jquery;
    var layer = layui.layer;
    var upload = layui.upload;
     tableSupplierLinkman =function(){
            title = $('#demoReload').val()
            title == undefined ? title = '' : '';
            table.render({
            elem: '#LAY_table_user'
            , url: '/getAnalyisList'
            , method: 'get'
            , where: { title: '' }
            , toolbar: '#toolbarDemo'
            , title: '情報列表'
            , loading: true
            // <!-- 右側默認工具欄 -->
            , defaultToolbar: ['exports', 'print']
            , cols: [[
    //            { type:'checkbox', fixed: 'left'},
                 { field: 'id', title: 'ID', width: 80, fixed: 'left', unresize: true, sort: true }
                , { field: '_id', title: 'news_id', hide: true }
                , { field: 'title', title: '標題'}
                , { field: 'chn_name', title: '分類' }
                , { field: 'source', title: '來源' }
                , { field: 'lang', title: '語言', width: 60  }
                , { field: 'publish_time', title: '時間', templet:function(res){
                    if(res.publish_time == 'None') {
                       res.publish_time = ''
                    }else {
                        res.publish_time = moment(res.publish_time).format('YYYY-MM-DD');
                    }
                    return res.publish_time
                } }
                , { field: 'content', title: '內容', width: 350 }
                , { field: 'isClue', title: '情報是否分析過', width: 350, hide: true, templet:(res)=>{
                    if(res.isClue) {  //數據已經分析過
                         $('#barDemo').html(`<button type="button" class="layui-btn layui-btn-danger layui-btn-sm"  lay-event="look">查看</button><button type="button" class="layui-btn layui-btn-disabled layui-btn-sm idClue">情報已分析</button>`)
                     }else {  //數據沒有分析
                         $('#barDemo').html(`<button type="button" class="layui-btn layui-btn-danger layui-btn-sm"  lay-event="look">查看</button> <button type="button" class="layui-btn layui-btn-danger layui-btn-sm noIsClue"  lay-event="analyse">情報分析</button>`)
                     }
                } }
                , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 200}
            ]]
            , id: 'testReload'
//            , page: true
            , page: {
                layout:['prev','page','next','skip','limit','count'],
                group: 10, // 只顯示幾個連續碼
//                first: false, //不顯示首頁
//                last:false, //不顯示尾頁
//                curr: 1 // 設定初始在第5頁
                  curr: $(".layui-laypage-skip .layui-input").val()

            }
            ,done:function() {
                 $('#demoReload').val(title); // 為搜索框賦值
            }

        });


        var active = {
            reload: function () {
                var demoReload = $('#demoReload').val();
                //執行重載
                table.reload('testReload', {
                    page: {
                        curr: 1 //重新從第 1 頁開始
                    }
                    , where: {
                        title: demoReload
                    },
                     done:function(res,curr,count) {
                        $('#demoReload').val(demoReload); // 為搜索框賦值
                    }
                }, 'data');
            }
        };
     }

    tableSupplierLinkman()

    //頭工具欄事件
    table.on('toolbar(LAY_table_user)', function (obj) {
        var checkStatus = table.checkStatus(obj.config.id);
        if (obj.event == 'add') {
             addArticle(obj);
        }else if(obj.event == 'getCheckData'){
            var data = checkStatus.data;
            batchData(data);
//            layer.alert(JSON.stringify(data))
        }
    });

    //監聽行工具事件
    table.on('tool(LAY_table_user)', function (obj) {
        var data = obj.data;
        if (obj.event === 'del') {
           articleDelete(obj,data);
        }else if(obj.event === 'look') {
             showArticle(obj)
//            location.href = "/articleInfo?id="+data.news_id
        }else if (obj.event == 'analyse') {
            analyseArticle(obj,data);
        }
    });

    // <!-- 數據的重載,同時處理按鈕放在表格頭部,數據重載,dom重組,綁定事件消失,利用監聽的方式,重新讓按鈕綁定事件 -->
    $('body').on('click', '.search', function () {
        var type = $(this).data('type');
        active[type] ? active[type].call(this) : '';
    });

     //給數據表格頭部,添加回車事件
     $('body').on('keydown', '#demoReload', function (e) {
        var curkey = e.which;
        if(curkey == 13){
            var demoReload = $('#demoReload').val();
            //執行重載
            table.reload('testReload', {
                page: {
                    curr: 1 //重新從第 1 頁開始
    //                    curr: currPage //重新從第 1 頁開始
    //                      curr:$(".layui-laypage-em").next().html()  //主要代碼行
                }
                , where: {
                    title: demoReload
                },
                done:function(res,curr,count) {
                    $('#demoReload').val(demoReload); // 為搜索框賦值
                }
            }, 'data');
         }
    });

    upload.render({
        elem: '#test3'
        ,url: 'https://httpbin.org/post' //改成您自己的上傳接口
        ,accept: 'file' //普通文件
        ,done: function(res){
          layer.msg('導入成功!');
          console.log(res);
        }
      });

});


//對單個數據的分析處理
function  analyseArticle(obj,data){
    layui.use(['layer','table'], function(){
        var layer = layui.layer;
        var table = layui.table;
         layer.confirm('正在准備進行線索分析,請稍后查看',{
              icon:1,
              title:'提示',
              btn:['知道了']
          }, function (index) {
              layer.close(index);
              tableSupplierLinkman()
          });
//        $.ajax({
//            method:'post',
//            url:'/alterClassify',
//            data:{
//                classify_id,
//                classify_name_eng,
//                classify_name
//            },
//            success:function(res) {
//                if(res.code == 1) {
//                   layer.msg('分析成功!請去門戶頁面查看!', {icon: 1})
//                }else {
//                   layer.closeAll();
//                   layer.msg('分析失敗!', {icon: 2})
//                }
//
//            }
//        })
   })
}

//批量對數據進行分析處理
function batchData(data) {
    alert(JSON.stringify(data));
     layer.confirm('分析成功!請去門戶頁面查看!',{
          icon:1,
          title:'提示',
          btn:['知道了']
     }, function (index) {
          layer.close(index);
     });
}

function showArticle(obj) {
    layui.use(['layer','form','table'], function(){
    var layer = layui.layer;
    var table = layui.table;
    layer.open({
          //layer提供了5種層類型。可傳入的值有:0(信息框,默認)1(頁面層)2(iframe層)3(加載層)4(tips層)
          type: 2,
          title: "情報詳情頁",
//        skin: 'layui-layer-rim', //加上邊框
          maxmin: true,
          area: ['620px', '520px'],
          content: `/articleInfo?id=${obj.data.news_id}`,   //引用的彈出層的頁面層的方式加載修改界面表單
      })
  })
}

function reserCon() {
//    console.log($('.titleA1').val());
//     layui.form.render();
}

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM