表格需要根据选择的指标显示相应的表头。于是将选择指标的页面单独放在一个页面中。每个指标的选择框checkbox的值为想要显示的指标ID，也就是要动态显示的表头。
点切换指标按钮弹出选择指标页面
表格HTML代码
点击切换指标按钮弹出选择指标页面
<!--表格-->
<table class="layui-hide" id="test" lay-filter="test"></table>
<!--表格工具栏-->
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="switch_zhibiao">切换指标</button>
<button class="layui-btn layui-btn-sm" lay-event="export">导出</button>
</div>
</script>
<input type="hidden" name="index_selected2" id="index_selected2" value="">
表格JS代码
renderTable为渲染表格方法，传递动态表头ID通过AJAX到服务器端获取想要展示的表头。
//ajax获取表头 head_ids 表头对应的ID
function getHead(head_ids) {
var data = null;
$.ajax({
type : "post",
url : "jsonTableHead", //获取表头URL
data: {table_head:head_ids},
async : false, //配置是否异步操作
dataType:"json",//返回数据类型的格式
timeout: 5000,
}).done(function (result) {//回调操作
data = result;
});
return data;
}
//渲染表格
function renderTable(check_arr){
var headData = getHead(check_arr);//表头
eval("var tableHead = " + headData);
layui.use('table', function(){
var table = layui.table;
var ins1 = table.render({
elem: '#test' //表格ID
,id: 'idTest'
,title:'渠道统计数据表'
,autoSort: false //禁用前端自动排序,若使用服务器端排序，此处设置为false
// ,size: 'lg ' //小尺寸的表格
,url:'<?php echo $this->createUrl('/market/crm/jsonTable'); ?>' //获取表格数据url
,cellMinWidth: 150 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
// ,totalRow: true
,where: {index_type: check_arr,params:$("#myform").serialize()}
,toolbar: '#toolbarDemo' //工具栏ID
,defaultToolbar:['filter'] //默认工具栏
,cols: [
tableHead //表格显示的列，此处调用getHead(head_ids)动态获取
]
,page: true //分页
,done: function (res, curr, count) {
//执行表格“尺寸结构”的重置，一般写在对应的事件中
table.resize('idTest');
}
});
//监听排序事件
table.on('sort(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
// console.log(obj.field); //当前排序的字段名
// console.log(obj.type); //当前排序类型：desc（降序）、asc（升序）、null（空对象，默认排序）
// console.log(this); //当前排序的 th 对象
//尽管我们的 table 自带排序功能，但并没有请求服务端。
//有些时候，你可能需要根据当前排序的字段，重新向服务端发送请求，从而实现服务端排序，如：
table.reload('idTest', {
initSort: obj //记录初始排序，如果不设的话，将无法标记表头的排序状态。
,where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
field: obj.field //排序字段
,order: obj.type //排序方式
}
});
// layer.msg('服务端排序。order by '+ obj.field + ' ' + obj.type);
});
//头工具栏事件
table.on('toolbar(test)', function(obj){
switch(obj.event){
case 'switch_zhibiao': //切换指标
var index_selected2 = $("#index_selected2").val();//要显示的指标ID
layer.open({
type: 2,
title:'选择指标',
shadeClose: true,
shade: 0.3,
maxmin: false, //开启最大化最小化按钮
area: ['700px', '550px'],
content: ['<?php echo Yii::app()->createUrl('/market/crm/setIndex'); ?>?index=2&index_selected2='+index_selected2,'no']
});
break;
case 'export':
// layer.msg("导出全部数据")
$.get('<?php echo $this->createUrl('/market/crm/jsonTable'); ?>', {
t: commonjs.timestrap(),
index_type: check_arr,
params:$("#myform").serialize()
}, function (res) {
table.exportFile(ins1.config.id,res.data, 'csv');
},'json')
break;
};
});
});
}
指标页HTML
选择指标确定后，将选择的指标传入父页面的，调用渲染表格方法来实现动态表头的展示。window.parent.renderData
<div class="layui-row" id="table_zhibiao" style="height:600px;">
<div class="layui-col-md10">
<blockquote class="layui-elem-quote layui-quote-nm" style="font-size: 14px;">
至少同时选择<span style="color: #f00">1</span>个粒度和<span style="color: #f00">1</span>个指标
<button class="layui-btn layui-btn-xs layui-btn-normal" id="setDefault">系统默认指标</button>
</blockquote>
<div class="layui-form">
<div class="layui-row" id="index_div">
<div class="layui-form-item">
<label class="layui-form-label" style="width:100px" >粒度指标</label>
<div class="layui-input-block">
<input type="checkbox" name="index" data-type='lidu' value="1" lay-skin="primary" title="时间" class="d_index_2" checked>
<input type="checkbox" name="index" data-type='lidu' value="2" lay-skin="primary" title="渠道名称" class="d_index_2" checked>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" style="width:100px">流量指标</label>
<div class="layui-input-block">
<input type="checkbox" name="index" value="1756" lay-skin="primary" title="pv" class="d_index_1 d_index_2" checked>
<input type="checkbox" name="index" value="1757" lay-skin="primary" title="uv" class="d_index_1 d_index_2" checked>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" style="width:100px">转化指标</label>
<div class="layui-input-block">
<input type="checkbox" name="index" value="1721" lay-skin="primary" title="咨询人数" class="d_index_2">
<input type="checkbox" name="index" value="1718" lay-skin="primary" title="成交人数" class="d_index_2">
</div>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn layui-btn-sm" id="slectAll">全选</button>
<button class="layui-btn layui-btn-sm" lay-submit lay-filter="formDemo">确定</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(function(){
layui.use(['form','table'], function(){
var form = layui.form;
//全选
$("#slectAll").click(function(){
$('#index_div input:checkbox').prop("checked", true);
form.render('checkbox');
});
//监听提交
form.on('submit(formDemo)', function(data){
var check_arr = [];//选中的指标集合
$('input[name=index]:checked').each(function(){
check_arr.push($(this).val());
});
//调用父类渲染表格的方法
window.parent.renderData(check_arr.join(","));
var index = parent.layer.getFrameIndex(window.name); //获取窗口索引
parent.layer.close(index); // 关闭layer
});
});
});
</script>