layui 数据表格表头动态修改

一般情况下,数据表格表头是固定的,不会轻易改变,但是由于业务的需要,表格的表头需要动态修改,有很多方法:

1.在html页面分别设置成不同的数据表格,根据点击事件来show或者hide,这样可以达到我们的目的,但是,这样违法了代码精简的原则,出现了很多重复的代码.

2.直接通过js来实现不同的表格,通过点击事件来做if-else操作,这样会造成js代码的冗余,不符合代码精简的原则.

3.我们通过layui数据表格的API发现,通过不同的参数来设置不同的表头,然后再转化成静态表格,数据重新填入,就可以打到我们想要的结果.

前面两个方法这里不做描叙,我们来考虑第3种方法:

这涉及到表格加载的时候传参,部分代码如下:

  /**
     * 定义表格
     * */
  function defineTable(startDate_,endDate_,act_,type_,flag_) {
	var prarm="?act="+act_+"&type="+type_+"&startTime="+startDate_+"&endTime="+endDate_+"&flag="+flag_;
    tableIns = table.render({
	 elem : '#user-data'
	,url : $tool.getContext() + 'cust/findCustAct.do'+prarm // 数据接口
	,page : true // 开启分页
    ,height: 415
	,method : 'POST'
	,cols : [[]]
	,done: function(res, curr, count){
		//debugger;
		var myData=new Array();
		var strs=res.data; 
	         myData[0]={type:'numbers',title : '序号',fixed: 'left' ,width:'4%'}//序号
		if(act==1 && type==4){//点击文章
		     myData[1]={field:'name', title:'文章标题', align:'center',width:'48%'};
		     myData[2]={field:'total', title:'客户点击量', align:'center',width:'48%'};
		}else if(act==2 && type==4){//转发文章
		     myData[1]={field:'name', title:'文章标题', align:'center',width:'48%'};
		     myData[2]={field:'total', title:'客户转发量', align:'center',width:'48%'};
		}
		else if(act==1 && type==3){//点击产品
		     myData[1]={field:'name', title:'产品名称', align:'center',width:'48%'};
		     myData[2]={field:'total', title:'客户点击量', align:'center',width:'48%'};
		}
		else if(act==2 && type==3){//转发产品
		     myData[1]={field:'name', title:'产品名称', align:'center',width:'48%'};
		     myData[2]={field:'total', title:'客户转发量', align:'center',width:'48%'};
		 }
		table.init('userFilter',{//转换成静态表格
		 cols:[myData]
		,data:res.data
		,limit:10
		});
	}

  });
    //为toolbar添加事件响应
    table.on('tool(userFilter)', function (obj) {
    	
    });
}

注意 

1.userFilter是html页面上的 lay-fiter:

<table id="user-data" lay-filter="userFilter" class="layui-table">
 </table>

2.cols 是表头,我们这里没用到循环,因为我可以知道哪种情况设置哪种表头

3.act和type是设置的全局变量,我这里是通过点击事件来修改全局变量的值,每次点击的时候(点击不同的查询按钮)就加载一次表格数据

4.后台返回的json数据如下

{
"code":"0000",
"msg":"success",
"data":[
{
"sort":null,
"id":null,
"name":"2019第四季度基金行情",
"img":null,
"sex":null,
"mobile":null,
"telephone":null,
"wechat":null,
"email":null,
"birthday":null,
"company":null,
"job":null,
"workYears":null,
"address":null,
"city":null,
"province":null,
"addTime":null,
"updateTime":null,
"companyAddress":null,
"intro":null,
"status":null,
"total":1,
"fk":null,
"yxkh":null,
"mp":null,
"wz":null,
"cp":null,
"newTime":null,
"type":null,
"jl":null,
"zhdf":null,
"nickName":null,
"faName":null,
"uidCust":null,
"situation":null,
"industry":null,
"szdq":null,
"income":null,
"op":null
},
{
"sort":null,
"id":null,
"name":"加强系统风险的防范",
"img":null,
"sex":null,
"mobile":null,
"telephone":null,
"wechat":null,
"email":null,
"birthday":null,
"company":null,
"job":null,
"workYears":null,
"address":null,
"city":null,
"province":null,
"addTime":null,
"updateTime":null,
"companyAddress":null,
"intro":null,
"status":null,
"total":0,
"fk":null,
"yxkh":null,
"mp":null,
"wz":null,
"cp":null,
"newTime":null,
"type":null,
"jl":null,
"zhdf":null,
"nickName":null,
"faName":null,
"uidCust":null,
"situation":null,
"industry":null,
"szdq":null,
"income":null,
"op":null
}
],
"count":2
}