• 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',  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: '语言',  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: '内容',  350 }
                    , { field: 'isClue', title: '情报是否分析过',  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',  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();
    }
  • 相关阅读:
    浅谈px,em和rem这些单位的区别
    nodejs中的formidable模块
    es6中的Symbol.iterator属性
    jQuery源码解析----内部插入的外部函数
    关于js函数中存在异步的情况下的变量的分析
    jQuery源码解析----模拟核心buildFragment
    jQuery源码解析----模拟html()、text()、val()
    Config
    Zuul
    Hystrix
  • 原文地址:https://www.cnblogs.com/lxz123/p/13972741.html
Copyright © 2020-2023  润新知