宝哥软件园

layui动态加载多表头的实例

编辑:宝哥软件园 来源:互联网 时间:2021-08-20

效果

动态生成页眉

返回的页眉数据:格式为数组,因为是二级表头,所以是二元数组

后台动态拼接数组,返回数组后把两个数组推到一个空数组中就可以组成一个动态的多级表头

var header=[];var标头1=[{ field : ' ComPanetname ',title: '商户名称,宽度: 140,行跨度: { 2 },{字段: '商品名称,标题: '子商户名称,宽度: 140,行跨度: 2 }];var头2=[];$.ajax({ type: 'get ',url: ' ',data: {id: 1,type:type},success:函数(数据){ if (data.code===0){ $ .每个(data.data[0],函数(索引,obj){标头1。push({ align : ' center ',title: obj,col span :3 });});$.每个(data.data[1],函数(索引,obj) { //拼接成官网所需要的数组标题2。push({ field : obj。字段1,标题: obj。标题1 });标题2。push({ field : obj。字段2,标题: obj。标题2 });标题2。push({ field : obj。字段3,标题: obj。标题3 });});标题。推送(表头1);标题。推送(表头2);table.reload('setList ',{ url: '' //数据接口,cols : header });表头=[];标题1=[{ field : ' ComPanetName ',title: '商户名称,宽度: 140,行跨度: { 2 },{字段: '商品名称,标题: '子商户名称,宽度: 140,行跨度: 2 }];表头2=[];} } });table.render({ id: 'setList ',elem: '#setList ',url: '' //数据接口,cellMinWidth: 80,limit: 10//每页默认数,limit :[10,20,30,40,50,100],page: { //支持传入分页组件的所有参数(某些参数除外,如:jump/elem) -详见文档layout: ['count ',' prev ',' page ',' next ',' limit ',' refresh ',' skip'] //自定义分页布局,curr: 1 /设定初始在第一页},其中: { id:id,type:type },cols 3360 header });后台动态生成多级表头

公共AjaxResult头(@RequestParam映射字符串,对象映射){ Long id=Long.valueOf((字符串)地图。get(' id ');字符串ProducT name=map。get(' ProducT name ')==null?' ' :(字符串)映射。get(' ProductName ');字符串类型=map.get('type')==null?' ' :(字符串)映射。get(' type ');if(').equals(ProductName)){ if((“0”).equals(type)){ listpproductinfo list=statistics figen。getProducT();productName=list.get(0).getProductName();} else { Long[]id=settlementfeig。getmerch(id);字符串mid=org。阿帕奇。公地。朗。斯特林格尔斯。join(id,',');listmodemproductrate list=statistics fign。getproductbymid(mid);productName=list.get(0).getProductName();} } String[]Str=ProductName。split(',');list list=new ArrayList();list list 1=new ArrayList();list list 2=new ArrayList();for(int I=0;我字符串长度;I){列表1。add(str[I]);清单2。添加(新消息(' SumTotal '(I 1),'成功笔数,' sumCost' (i 1),'扣减金额“‘sumbar’(I 1)’”扣减条数'));}列表。添加(列表1);名单。添加(列表2);返回新的AjaxResult(0,获取数据成功,列表);}表格数据是通过统计得出的数据,统计的数据也是通过循环拼接sql,统计命名要和表头的一致

公共类消息{/* * *列名1 **/私有字符串字段1;/** 对应说明1(成功笔数)**/私有字符串标题1;/** 列名2 **/私有字符串字段2;/** 对应说明2(扣减金额)**/私有字符串标题2;/** 列名3 **/私有字符串字段3;/** 对应说明3(扣减条数)**/私有字符串标题3;代码写的丑了点,还是整出来了。

以上这篇获得动态加载多表头的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

更多资讯
游戏推荐
更多+