微信小程序的小游戏_layui数据表格跨行主动合并的例子

  • 栏目:行业动态 时间:2021-01-07 11:39 分享新闻到:
<返回列表

layui数据表格跨行自动合并的例子       今天小编就为大家分享一篇layui数据表格跨行自动合并的例子,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

需求描述:

在数据表格中,对于按某个分类展示数据其分类下又有多个细分的嵌套细分项,如省市区昵称,省下面有多个市,市下面有多个区,区下面有昵称,需要实现跨行合并,且操作按钮以分类为单位(即操作按钮需按照分类合并)。

需求分析:

除操作列外,以左边列为基础单位进行跨行合并,当前单元格合并数 =左边列;

操作列可以选择任意列作为基础单位(这个待完善)。

原始页面:

处理页面:

方法:

var execRowspan = function(fieldName,index,flag){
 // 1为不冻结的情况,左侧列为冻结的情况
 let fixedNode = index=="1" $(".layui-table-body")[index - 1]:(index=="3" $(".layui-table-fixed-r"):$(".layui-table-fixed-l"));
 // 左侧导航栏不冻结的情况
 let child = $(fixedNode).find("td");
 let childFilterArr = [];
 // 获取data-field属性为fieldName的td
 for(let i = 0; i child.length; i++){
 if(child[i].getAttribute("data-field") == fieldName){
 childFilterArr.push(child[i]);
 // 获取td的个数和种类
 let childFilterTextObj = {};
 for(let i = 0; i childFilterArr.length; i++){
 let childText = flag childFilterArr[i].innerHTML:childFilterArr[i].textContent;
 if(childFilterTextObj[childText] == undefined){
 childFilterTextObj[childText] = 1;
 }else{
 let num = childFilterTextObj[childText];
 childFilterTextObj[childText] = num*1 + 1;
 let canRowspan = true;
 let maxNum;//以前列单元格为基础获取的最大合并数
 let finalNextIndex;//获取其下第一个不合并单元格的index
 let finalNextKey;//获取其下第一个不合并单元格的值
 for(let i = 0; i childFilterArr.length; i++){
 (maxNum 9000||!maxNum) (maxNum = $(childFilterArr[i]).prev().attr("rowspan") fieldName!="8" $(childFilterArr[i]).prev().attr("rowspan"):9999);
 let key = flag childFilterArr[i].innerHTML:childFilterArr[i].textContent;//获取下一个单元格的值
 let nextIndex = i+1;
 let tdNum = childFilterTextObj[key];
 let curNum = maxNum tdNum maxNum:tdNum;
 if(canRowspan){
 for(let j =1;j =curNum (i+j childFilterArr.length);){//循环获取最终合并数及finalNext的index和key
 finalNextKey = flag childFilterArr[i+j].innerHTML:childFilterArr[i+j].textContent;
 finalNextIndex = i+j;
 if((key!=finalNextKey curNum 1)||maxNum == j){
 canRowspan = true;
 curNum = j;
 break;
 j++;
 if((i+j)==childFilterArr.length){
 finalNextKey=undefined;
 finalNextIndex=i+j;
 break;
 childFilterArr[i].setAttribute("rowspan",curNum);
 if($(childFilterArr[i]).find("div.rowspan").length 0){//设置td内的div.rowspan高度适应合并后的高度
 $(childFilterArr[i]).find("div.rowspan").parent("div.layui-table-cell").addClass("rowspanParent");
 $(childFilterArr[i]).find("div.layui-table-cell")[0].style.height= curNum*38-10 +"px";
 canRowspan = false;
 }else{
 childFilterArr[i].style.display = "none";
 if(--childFilterTextObj[key]==0|--maxNum==0|--curNum==0|(finalNextKey!=undefined nextIndex==finalNextIndex)){//||(finalNextKey!=undefined key!=finalNextKey)
 canRowspan = true;
//合并数据表格行
var layuiRowspan = function(fieldNameTmp,index,flag){
 let fieldName = [];
 if(typeof fieldNameTmp == "string"){
 fieldName.push(fieldNameTmp);
 }else{
 fieldName = fieldName.concat(fieldNameTmp);
 for(let i = 0;i fieldName.length;i++){
 execRowspan(fieldName[i],index,flag);

使用:

HTML:

 div 
 table id="test" lay-data="{page:true,limit:50}" lay-filter="test" 
 thead 
 th lay-data="{field:'province', width:200}" 省 /th 
 th lay-data="{field:'city', width:200}" 市 /th 
 th lay-data="{field:'zone', width:200}" 区 /th 
 th lay-data="{field:'username', width:200}" 昵称 /th 
 th lay-data="{field:'joinTime', width:150}" 加入时间 /th 
 th lay-data="{field:'sign', minWidth: 180}" 签名 /th 
 th lay-data="{field:'8',align:'right'}" 基本操作 /th 
 /tr 
 /thead 
 tbody 
 td 浙江 /td 
 td 杭州 /td 
 td 西湖区 /td 
 td 贤心1 /td 
 td  /td 
 td 人生就像是一场修行 A /td 
 div 
 a lay-event="detail" 按钮1 /a 
 a lay-event="edit" 按钮2 /a 
 /div 
 /td 
 /tr 
 td 浙江 /td 
 td 这个 /td 
 td 西湖区 /td 
 td 贤心2 /td 
 td  /td 
 td 人生就像是一场修行 B /td 
 div 
 a lay-event="detail" 按钮1 /a 
 a lay-event="edit" 按钮2 /a 
 /div 
 /td 
 /tr 
 td 浙江 /td 
 td 丽水 /td 
 td 莲都区 /td 
 td 贤心3 /td 
 td  /td 
 td 人生就像是一场修行 C /td 
 div 
 a lay-event="detail" 按钮1 /a 
 a lay-event="edit" 按钮2 /a 
 /div 
 /td 
 /tr 
 td 浙江 /td 
 td 丽水 /td 
 td 莲都区 /td 
 td 贤心3 /td 
 td  /td 
 td 人生就像是一场修行 C /td 
 div 
 a lay-event="detail" 按钮1 /a 
 a lay-event="edit" 按钮2 /a 
 /div 
 /td 
 /tr 
 td 浙江 /td 
 td 位置 /td 
 td 莲都区 /td 
 td 贤心3 /td 
 td  /td 
 td 人生就像是一场修行 C /td 
 div 
 a lay-event="detail" 按钮1 /a 
 a lay-event="edit" 按钮2 /a 
 /div 
 /td 
 /tr 
 td 湖北 /td 
 td 位置 /td 
 td 莲都区 /td 
 td 贤心3 /td 
 td  /td 
 td 人生就像是一场修行 C /td 
 div 
 a lay-event="detail" 按钮1 /a 
 a lay-event="edit" 按钮2 /a 
 /div 
 /td 
 /tr 
 td 湖北 /td 
 td 这个 /td 
 td 1区 /td 
 td 贤心3 /td 
 td  /td 
 td 人生就像是一场修行 C /td 
 div 
 a lay-event="detail" 按钮1 /a 
 a lay-event="edit" 按钮2 /a 
 /div 
 /td 
 /tr 
 td 湖北 /td 
 td 这个 /td 
 td 1区 /td 
 td 贤心3 /td 
 td  /td 
 td 人生就像是一场修行 C /td 
 div 
 a lay-event="detail" 按钮1 /a 
 a lay-event="edit" 按钮2 /a 
 /div 
 /td 
 /tr 
 td 湖北 /td 
 td 这个 /td 
 td 1区 /td 
 td 贤心3 /td 
 td  /td 
 td 人生就像是一场修行 B /td 
 div 
 a lay-event="detail" 按钮1 /a 
 a lay-event="edit" 按钮2 /a 
 /div 
 /td 
 /tr 
 td 湖北 /td 
 td 这个 /td 
 td 1区 /td 
 td 贤心 /td 
 td  /td 
 td 人生就像是一场修行 B /td 
 div 
 a lay-event="detail" 按钮1 /a 
 a lay-event="edit" 按钮2 /a 
 /div 
 /td 
 /tr 
 td 湖北 /td 
 td 这个 /td 
 td 1区 /td 
 td 贤心 /td 
 td  /td 
 td 人生就像是一场修行 C /td 
 div 
 a lay-event="detail" 按钮1 /a 
 a lay-event="edit" 按钮2 /a 
 /div 
 /td 
 /tr 
 td 湖北 /td 
 td 这个 /td 
 td 1区 /td 
 td 贤心 /td 
 td  /td 
 td 人生就像是一场修行 D /td 
 div 
 a lay-event="detail" 按钮1 /a 
 a lay-event="edit" 按钮2 /a 
 /div 
 /td 
 /tr 
 /tbody 
 /table 
 /div 

layuiRowspan('province',1); layuiRowspan(['city','zone','username','joinTime','sign'],1);//支持数组 layuiRowspan("8",1,true); });})

以上这篇layui数据表格跨行自动合并的例子就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持凡科。


分享新闻到:

更多阅读

微信小程序的小游戏_layui数据表格跨行主

行业动态 2021-01-07
layui数据信息报表转账全自动合拼的事例 今日网编就为大伙儿共享一篇layui数据信息报表...
查看全文

ps怎么抠图-TIC诚信出国网站制作

行业动态 2021-01-07
顾客名字:TIC诚实守信出国留学设计方案计划方案:传统式响应式旅游网站开发设计情况:顾...
查看全文

一天学好网站建设-杭州企业网站建设制作

行业动态 2021-01-07
杭州市企业网站建设制作:SEO提升的8种Web设计方案技术性 今日的杭州市企业网站建设制作是大...
查看全文
返回全部新闻


区域站点: 南丰县自建免费网站   南宫市凡科网建站   囊谦县网站建设平台有哪些   南和县凡客建站   南华县自建免费网站   南江县凡科网建站   南京市网站建设平台有哪些   南靖县凡客建站   南康市自建免费网站   南乐县凡科网建站   南陵县网站建设平台有哪些   南宁市凡客建站   南平市自建免费网站   南皮县凡科网建站   南市区网站建设平台有哪些   南通市凡客建站   南投县自建免费网站   南雄市凡科网建站   南溪县网站建设平台有哪些   南阳市凡客建站   南漳县自建免费网站   南召县凡科网建站   南郑县网站建设平台有哪些   那坡县凡客建站   那曲县自建免费网站   纳雍县凡科网建站   讷河市网站建设平台有哪些   内黄县凡客建站   内江市自建免费网站   内丘县凡科网建站   内乡县网站建设平台有哪些   嫩江市凡客建站   聂荣县自建免费网站   尼玛县凡科网建站   尼木县网站建设平台有哪些   宁安市凡客建站   宁波市自建免费网站   宁城县凡科网建站   宁德市网站建设平台有哪些   宁都县凡客建站   宁国市自建免费网站   宁海县凡科网建站   宁化县网站建设平台有哪些   宁晋县凡客建站   宁陵县自建免费网站   宁明县凡科网建站   宁南县网站建设平台有哪些   宁强县凡客建站   宁陕县自建免费网站   宁武县凡科网建站   宁乡市网站建设平台有哪些   宁阳县凡客建站   宁远县自建免费网站   农安县凡科网建站   磐安县网站建设平台有哪些   盘锦市凡客建站   盘山县自建免费网站   磐石市凡科网建站   盘州市网站建设平台有哪些   蓬安县凡客建站   澎湖县自建免费网站   蓬莱市凡科网建站   彭山县网站建设平台有哪些   蓬溪县凡客建站   彭阳县自建免费网站   彭泽县凡科网建站   彭州市网站建设平台有哪些   偏关县凡客建站   平安县自建免费网站   平昌县凡科网建站   平定县网站建设平台有哪些   屏东县凡客建站   平度市自建免费网站   平果县凡科网建站   平和县网站建设平台有哪些   平湖市凡客建站   平江县自建免费网站   平乐县凡科网建站   平凉市网站建设平台有哪些   平利县凡客建站   平罗县自建免费网站   平陆县凡科网建站   屏南县网站建设平台有哪些   平泉市凡客建站   屏山县自建免费网站   平顺县凡科网建站   平塘县网站建设平台有哪些   平潭县凡客建站   平武县自建免费网站   萍乡市凡科网建站   平乡县网站建设平台有哪些   平阳县凡客建站   平遥县自建免费网站   平阴县凡科网建站   平邑县网站建设平台有哪些   平远县凡客建站   平舆县自建免费网站   皮山县凡科网建站   普安县网站建设平台有哪些   浦北县凡客建站   浦城县自建免费网站   普洱市凡科网建站   普格县网站建设平台有哪些   浦江县凡客建站   普兰县自建免费网站   普宁市凡科网建站   莆田市网站建设平台有哪些   迁安市凡客建站   乾安县自建免费网站   潜江市凡科网建站   潜山市网站建设平台有哪些  

友情链接: 自助建网站 小程序建站 企业建站 凡科建站登录

Copyright © 2002-2020 网站建设平台有哪些_凡客建站_自建免费网站_凡科网建站_怎么建设自己网站 版权所有 (网站地图) 备案号:粤ICP备10235580号