数据页面样式调试6

master
zcstatham 2 years ago
parent f518ca98e1
commit e52af174ad
  1. 136
      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;
}
</script>
{/block}

Loading…
Cancel
Save