diff --git a/app/view/index/index.html b/app/view/index/index.html index f147f4c..525fadb 100644 --- a/app/view/index/index.html +++ b/app/view/index/index.html @@ -244,50 +244,7 @@ } } }); - var tableIns = layui.table.render({ - 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'); - } - } - }); + var tableIns = layui.table.render(tableRender('')); //监听行工具事件 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; + } {/block}