数据页面样式调试6

app/view/index/index.html

@@ -244,50 +244,7 @@
                 }
             }
         });
-        var tableIns = layui.table.render({
+        var tableIns = layui.table.render(tableRender(''));
-            id: 'carInfo',
-            elem: '#car-info',
-            title:'车辆信息',
-            url: '{:url("/index/carInfo/")}', //数据接口
-            where: getUrlParam('Object'),
-            toolbar: true,
-            height: 'full-210',
-            page: true, //开启分页
-            limit: 20,
-            loading: true,
-            cols: [[ //表头
-                {type: 'numbers', fixed: 'left'},
-                {field: 'car_no', title: '车牌号', width: 100, edit: 'text', fixed: 'left'},
-                {field: 'car_frame_no', title: '车架号', width: 180, edit: 'text'},
-                {field: 'engine_no', title: '发动机号', width: 100, edit: 'text'},
-                {field: 'factory_model', title: '厂牌型号', width: 200, edit: 'text'},
-                {field: 'register_date', title: '注册日期', width: 100, edit: 'text'},
-                {field: 'car_man', title: '车主', width: 80, edit: 'text'},
-                {field: 'car_number', title: '车主证件号', width: 160, edit: 'text'},
-                {field: 'car_phone', title: '车主电话', width: 120, edit: 'text'},
-                {field: 'id_man', title: '被保险人', width: 80, edit: 'text'},
-                {field: 'id_number', title: '被保险人证件号', width: 160, edit: 'text'},
-                {field: 'id_phone', title: '被保险人电话', width: 120, edit: 'text'},
-                {field: 'insured_man', title: '投保人', width: 80, edit: 'text'},
-                {field: 'insured_number', title: '投保人证件号', width: 160, edit: 'text'},
-                {field: 'insured_phone', title: '投保人电话', width: 120, edit: 'text'},
-                {field: 'link_man_1', title: '联系人1', width: 80, edit: 'text'},
-                {field: 'link_phone_1', title: '联系人电话1', width: 120, edit: 'text'},
-                {field: 'link_man_2', title: '联系人2', width: 80, edit: 'text'},
-                {field: 'link_phone_2', title: '联系人电话2', width: 120, edit: 'text'},
-                {field: 'link_man_3', title: '联系人3', width: 80, edit: 'text'},
-                {field: 'link_phone_3', title: '联系人电话3', width: 120, edit: 'text'},
-                {field: 'purchase_price', title: '新车购置价', width: 100, edit: 'text'},
-                {field: 'export_bhx_name', title: '导出清洗', width: 140, edit: 'text', templet:'#BhxNameTpl'},
-                {field: 'export_bmc_name', title: '导出上传', width: 140, edit: 'text', templet:'#BmcNameTpl'},
-                {fixed: 'right', width: 100, align:'center', toolbar: '#table-bar'}
-            ]],
-            done: function (res, curr, count) {
-                if(res.code == -1){
-                    $('#lock-screen').css('display','flex');
-                }
-            }
-        });
 
         //监听行工具事件
         layui.table.on('tool(car-info)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
@@ -416,5 +373,96 @@
             });
         });
     }
+
+    //表格 头部数据函数封装
+    function getTableCols(){
+        return [[ //表头
+            {type: 'numbers', fixed: 'left'},
+            {field: 'car_no', title: '车牌号', width: 100, edit: 'text', fixed: 'left'},
+            {field: 'car_frame_no', title: '车架号', width: 180, edit: 'text'},
+            {field: 'engine_no', title: '发动机号', width: 100, edit: 'text'},
+            {field: 'factory_model', title: '厂牌型号', width: 200, edit: 'text'},
+            {field: 'register_date', title: '注册日期', width: 100, edit: 'text'},
+            {field: 'car_man', title: '车主', width: 80, edit: 'text'},
+            {field: 'car_number', title: '车主证件号', width: 160, edit: 'text'},
+            {field: 'car_phone', title: '车主电话', width: 120, edit: 'text'},
+            {field: 'id_man', title: '被保险人', width: 80, edit: 'text'},
+            {field: 'id_number', title: '被保险人证件号', width: 160, edit: 'text'},
+            {field: 'id_phone', title: '被保险人电话', width: 120, edit: 'text'},
+            {field: 'insured_man', title: '投保人', width: 80, edit: 'text'},
+            {field: 'insured_number', title: '投保人证件号', width: 160, edit: 'text'},
+            {field: 'insured_phone', title: '投保人电话', width: 120, edit: 'text'},
+            {field: 'link_man_1', title: '联系人1', width: 80, edit: 'text'},
+            {field: 'link_phone_1', title: '联系人电话1', width: 120, edit: 'text'},
+            {field: 'link_man_2', title: '联系人2', width: 80, edit: 'text'},
+            {field: 'link_phone_2', title: '联系人电话2', width: 120, edit: 'text'},
+            {field: 'link_man_3', title: '联系人3', width: 80, edit: 'text'},
+            {field: 'link_phone_3', title: '联系人电话3', width: 120, edit: 'text'},
+            {field: 'purchase_price', title: '新车购置价', width: 100, edit: 'text'},
+            {field: 'export_bhx_name', title: '导出清洗', width: 140, edit: 'text', templet:'#BhxNameTpl'},
+            {field: 'export_bmc_name', title: '导出上传', width: 140, edit: 'text', templet:'#BmcNameTpl'},
+            {fixed: 'right', width: 100, align:'center', toolbar: '#table-bar'}
+        ]];
+    }
+
+    //layui表格渲染，其中url param为请求的数据接口以及其参数
+    function tableRender(param){
+        var tableCols = tableSetCol(getTableCols(), local_storage_key);
+        var renderParam = {
+            id: 'carInfo',
+            elem: '#car-info',
+            title:'车辆信息',
+            url: '{:url("/index/carInfo/")}', //数据接口
+            where: getUrlParam('Object'),
+            toolbar: true,
+            height: 'full-210',
+            page: true, //开启分页
+            limit: 20,
+            loading: true,
+            cols: [tableCols],
+            done: function (res, curr, count) {
+                if(res.code == -1){
+                    $('#lock-screen').css('display','flex');
+                }
+            }
+        };
+        return renderParam;
+    }
+
+    //layui表格渲染后，事件需要重新绑定，并记录下筛选信息于localStorage
+    function tableDone(elem, col, key){
+        elem.next().find('[lay-event="LAYTABLE_COLS"]').click(function(e) {
+            setTimeout(function() {
+                layui.$(e.currentTarget).find('.layui-form-checkbox').click(function() {
+                    var local_config = {};
+                    for(var i = 0; i<=col.length-1; i++){
+                        if(typeof col[i].field !== 'undefined'){
+                            local_config[col[i].field] = col[i].hide ;
+                        }
+                    }
+                    var saveColsConfig = {
+                        key: 'local_config',
+                        value: local_config
+                    };
+                    layui.data(key, saveColsConfig);
+                })
+            }, 50);
+        })
+    }
+
+    //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;
+    }
 </script>
 {/block}