layui列表多功能-列固定，排序，固定赛选，导出重写，监听弹窗返回刷新保留缓存横向滑动固定

最新推荐文章于 2024-09-08 18:00:56 发布

qq_36458559

最新推荐文章于 2024-09-08 18:00:56 发布

阅读量2.9k

点赞数

分类专栏： layui 文章标签： layui javascript html

本文链接：https://blog.csdn.net/qq_36458559/article/details/122340546

版权

layui 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

});

            }
           ,toolbar: '#myBar'
           ,defaultToolbar: ["filter", "exports"]
           //,toolbar: true //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
           ,totalRow: true //开启合计行
            , cols: [tableCols]
            ,filter: {
                 items:['column','data','condition','editCondition','excel','clearCache'],
                 cache: true
             }
            , page: true
            ,done: function (res, curr, count) {

   //layuitable reload或第一次加载的时候，根据存储的local_config 确定哪些列是否选中
   function tableSetCol(col, key){
        //参考写法：https://fly.layui.com/jie/50966/#item-1555416248250
        var config_custom= layui.data(key);
        var local_config = config_custom['local_config'] || {};
        if(JSON.stringify(local_config) != '{}'){
            for(var i =0; i<=col.length-1; i++){
                if( typeof col[i].field !== "undefined" ){
                    col[i].hide = local_config[col[i].field];
                }
            }
        }
        return col;
   }
   //监听列固定
    window.layui.form.on('switch(rowDragSwitch)', function(data){
      window.layui.soulTable.suspend('test-table-operate', 'drag', !data.elem.checked)
    });

        //监听表格复选框选择
        window.layui.table.on('checkbox(test-table-operate)', function (obj) {
            console.log(obj)
        });

        //监听行工具事件
        window.layui.table.on('tool(test-table-operate)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                , layEvent = obj.event; //获得 lay-event 对应的值

        });
        var activeByType2 = function (type, arg) {
            if (arguments.length === 2) {
                window.active[type] ? window.active[type].call(this, arg) : '';
            } else {
                window.active[type] ? window.active[type].call(this) : '';
            }
        }
        var $ = layui.$;
       window['active'] = {      //表格右边按钮
            getCheckData: function () { //获取选中数据
                var checkStatus = window.layui.table.checkStatus('test-table-operate')
                    , data = checkStatus.data;
                layer.alert(JSON.stringify(data));
            }
            , isadd: function () { //新增
                var checkStatus = window.layui.table.checkStatus('test-table-operate')
                    , data = checkStatus.data;
            }
            , reset: function () { //重置当前页面
           window.layui.form.render('select');
             activeByType2('reload');

            }
            , isdaoru: function () { //导入
                var checkStatus = window.layui.table.checkStatus('test-table-operate')
                    , data = checkStatus.data;

            }
            , isdaochu: function () { //导出
                var checkStatus = window.layui.table.checkStatus('test-table-operate');

            }
            , copy: function () { //复制
                var checkStatus = window.layui.table.checkStatus('test-table-operate')
                    , data = checkStatus.data;

            }
            , reload: function () {
             //搜索后横向滚动条不变
           window.layuiTable = $('div[lay-id=test-table-operate] .layui-table-main');
           if(window.layuiTable!=null && window.layuiTable.length>0){
                  window.scrollLeft = window.layuiTable[0].scrollLeft;
           }
                //执行重载
            window.layui.table.reload('test-table-operate', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                    key:demoReload2.val(),

                }
             });
            }
        };

        //监听排序事件
        window.layui.table.on('sort(test-table-operate)', function (obj) {
            var o = $(this).parent().parent().parent().parent().parent().parent().parent().parent().children('form');
           window.layuiTable = $('div[lay-id=test-table-operate] .layui-table-main');
           if(window.layuiTable!=null && window.layuiTable.length>0){//保证横向滚动排序后不变
                  window.scrollLeft = window.layuiTable[0].scrollLeft;
           }
            window.layui.table.reload('test-table-operate', {
                initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
                , where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    field: obj.field //排序字段
                    , order: obj.type //排序方式
                }
            });

            //layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
        });
        $('.layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        window.layui.table.on('radio(test-table-operate)', function (obj) {
           var data = layui.table.checkStatus('test-table-operate').data;
           conId = data[0];
        });
      //重写导出
    function outall() {
       var result=[];
         window.layui.table.exportFile(ins.config.id, result, 'xls');
    }
      //读取表头信息
     function outall2() {

         var name = $('div[lay-id=test-table-operate] th:not(.layui-hide)');
         var excelfields = [];
         var excelheader = [];
         for (i = 0; i < name.length; i++) {
             var field = name[i].dataset.field;

             var text = name[i].innerText;
             if (text) {
                 excelheader[i] = text;
                 excelfields[i] = field;
             }

}

     }
    var tableDoElse = function (res, curr, count){
        //处理其他自定义事件
    }
    //弹窗回调
    var callbackdata = function () {
        var data = conId;
        return data;
    }
   //监听行
   window.layui.table.on('rowDouble(test-table-operate)', function(obj){

});

</script>