layui table动态生成表头

layui table动态生成表头_第1张图片
实例

function productplantable(productname,years) {
		  //用来存放二级表头
			var cols = [];
			//这里的productdata是产品的list 类似与树结构 productname是图片中的产品名称 去重复了 productvariety是品种 这里的二级表头是根据 产品名称 筛选出来 按照自己的实际情况修改吧
			$.each(productdata,function(index,value){
			//开始组装表头
			if(value.productname == productname) {
				cols.push({field: value.id, title: value.productvariety,sort:'true',align:'center',width: 100});
					}
				});

		table.render({
			 elem: '#tablelist'
			,url: '${contextPath}/productoutputplan/getProductPlanListData' //数据接口
			,where: {productname: encodeURI(productname), years: years}
			,page: true //开启分页
			,toolbar: '#tabletoolbar'
			,defaultToolbar: []
	        ,cols: [[ //表头
		              {title: '序号',type:'numbers',rowspan:2}
				      ,{field: 'date', title: '时间',align:'center',sort:'true',rowspan:2,width: 150}
				      ,{title: '产出品种',align:'center',colspan:cols.length}
				      ,{field: 'total', title: '合计',align:'center',sort:'true',rowspan:2,width: 100}]
				      ,cols]
	        ,done: function (res, curr, count) {
	        	var tablemaindom = $("table[id=tablelist]").next().find(".layui-table-body.layui-table-main");
	        	$.each(res.data,function(index,value){
	        		var total = 0;
					//开始组装数据 这里是给单元格赋值
	        		$.each(value.listinfo,function(indexinfo,valueinfo){
	        			tablemaindom.find("tr[data-index="+value.LAY_TABLE_INDEX+"]").find(
	        					"td[data-field="+valueinfo.productid+"]").find(
	        							"div").text(valueinfo.outputplanvalue);
	        			total += valueinfo.outputplanvalue;
	        		});
	        		//合计
	        		tablemaindom.find("tr[data-index="+value.LAY_TABLE_INDEX+"]").find(
        					"td[data-field=total]").find(
        							"div").text(total);
				});

	        }
	        });
		
		}

你可能感兴趣的:(前端)