html表格自定义显示列
后台统计，有个表，有60个字段要显示。这时如果页面一次性全部展示出来，大部分屏幕可能不够宽度。
这时就需要固定表格列，但如果只是固定列，太多列了还是比较难查看自己需要的列，这时比较优的方案是，每个账号可以选择显示哪些列显示隐藏。
http://www.layui.com/demo/table/fixed.html
前端实现固定表格列，有很多插件框架实现，这里主要讲下，配合后端实现整个交互逻辑。
相关技术点
- 固定表格列
- 字段选择穿梭框
- 数据库保存隐藏字段
固定表格列，这里用插件layui
http://www.layui.com/demo/table/fixed.html
字段选择穿梭框，使用 bootstrap的双边栏选择框
http://www.jq22.com/jquery-info15984
数据库保存隐藏字段，这个搭建用任何后端语言都可以实现，这里用PHP。
代码，穿梭框与后端实现交互
function getData(){
return new Promise(function(resolve, reject){
$.getJSON('/admin/ad/getField', {}, function (res) {
field = res.tableFile
console.log(res);
resolve(res);
//reject(
})
});
}
getData().then(function(res){
field = res.tableFile
$(document).ready(function () {
var demo2 = $('.demo').doublebox({
nonSelectedListLabel: '显示列',
selectedListLabel: '隐藏列',
preserveSelectionOnMove: 'moved',
moveOnSelect: false,
nonSelectedList: res.show,
selectedList: res.hide,
optionValue: "field",
optionText: "fieldName",
doubleMove: true,
});
layui.use('table', function () {
var table = layui.table;
var w = document.body.scrollWidth - 50;
var h = document.body.scrollHeight - 390;
table.render({
elem: '#test',
limit: 10
, url: '/admin/ad/getData?Ad[type]='+<?php echo isset($_GET['Ad']['type'])?intval($_GET['Ad']['type']):1 ?>
, width: w
, height: h
, cols: [field]
, page: true
});
});
})
});
后台API返回对应的显示列，即可，格式如下
{
"show":[
{
"field":"date",
"fieldName":"时间"
},
{
"field":"clientName",
"fieldName":"广告主名称"
},
{
"field":"adId",
"fieldName":"广告id"
},
{
"field":"adName",
"fieldName":"广告名称"
},
{
"field":"order_roi",
"fieldName":"下单ROI"
},
{
"field":"quest_reservation_pv",
"fieldName":"销售线索量"
}
],
"hide":[
{
"field":"contract_flag",
"fieldName":"购买类型"
},
{
"field":"pos_type",
"fieldName":"广告位"
},
{
"field":"convclk_pv",
"fieldName":"可转化点击次数"
},
{
"field":"convclk_cpc",
"fieldName":"可转化点击成本"
},
{
"field":"clk_pv",
"fieldName":"点击人数"
},
{
"field":"exp_pv_avg",
"fieldName":"人均曝光次数"
},
{
"field":"img_uv",
"fieldName":"图片点击人数"
},
{
"field":"play_pv",
"fieldName":"视频点击次数"
},
{
"field":"play_uv",
"fieldName":"视频点击人数"
},
{
"field":"detail_pv",
"fieldName":"文字链点击次数"
},
{
"field":"ios_act_pv",
"fieldName":"IOS激活次数"
},
{
"field":"download_complete_pv",
"fieldName":"APP下载完成次数"
},
{
"field":"install_complete_pv",
"fieldName":"APP安装完成次数"
},
{
"field":"app_act_pv",
"fieldName":"APP激活次数"
},
{
"field":"app_reg_pv",
"fieldName":"APP注册次数"
},
{
"field":"app_addtocart_pv",
"fieldName":"APP加入购物车次数"
},
{
"field":"app_purchase_pv",
"fieldName":"APP付费次数"
},
{
"field":"card_use_pv",
"fieldName":"卡券使用次数"
},
{
"field":"share_page_pv",
"fieldName":"广告分享次数"
},
{
"field":"share_page_uv",
"fieldName":"广告分享人数"
},
{
"field":"nointerest_pv",
"fieldName":"不感兴趣点击次数"
}
],
"tableFile":[
{
"field":"date",
"width":140,
"title":"时间",
"fixed":"left"
},
{
"field":"clientName",
"width":140,
"title":"广告主名称",
"fixed":"left"
},
{
"field":"adId",
"width":100,
"title":"广告id",
"fixed":"left"
},
{
"field":"adName",
"width":140,
"title":"广告名称",
"fixed":"left"
},
{
"field":"balance",
"width":140,
"title":"余额",
"fixed":"left"
},
{
"field":"quest_reservation_pv",
"width":100,
"title":"销售线索量"
}
]
}最终演示效果
