需求描述：

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

需求分析：

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

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

  

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

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：

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

<div class="box">

<table class="layui-table" id="test" lay-data="{page:true,limit:50}" lay-filter="test">

 <thead>

 <tr>

 <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>

 <tr>

 <td>浙江</td>

 <td>杭州</td>

 <td>西湖区</td>

 <td>贤心1</td>

 <td>2016-11-28</td>

 <td>人生就像是一场修行 A</td>

 <td>

  <div class="layui-btn-group" style="overflow:visible;">

  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>

  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>

  </div>

 </td>

 </tr>

 <tr>

 <td>浙江</td>

 <td>这个</td>

 <td>西湖区</td>

 <td>贤心2</td>

 <td>2016-11-29</td>

 <td>人生就像是一场修行 B</td>

 <td>

  <div class="layui-btn-group" style="overflow:visible;">

  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>

  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>

  </div>

 </td>

 </tr>

 <tr>

 <td>浙江</td>

 <td>丽水</td>

 <td>莲都区</td>

 <td>贤心3</td>

 <td>2016-11-30</td>

 <td>人生就像是一场修行 C</td>

 <td>

  <div class="layui-btn-group" style="overflow:visible;">

  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>

  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>

  </div>

 </td>

 </tr>

 <tr>

 <td>浙江</td>

 <td>丽水</td>

 <td>莲都区</td>

 <td>贤心3</td>

 <td>2016-19-30</td>

 <td>人生就像是一场修行 C</td>

 <td>

  <div class="layui-btn-group" style="overflow:visible;">

  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>

  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>

  </div>

 </td>

 </tr>

 <tr>

 <td>浙江</td>

 <td>位置</td>

 <td>莲都区</td>

 <td>贤心3</td>

 <td>2016-11-30</td>

 <td>人生就像是一场修行 C</td>

 <td>

  <div class="layui-btn-group" style="overflow:visible;">

  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>

  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>

  </div>

 </td>

 </tr>

 <tr>

 <td>湖北</td>

 <td>位置</td>

 <td>莲都区</td>

 <td>贤心3</td>

 <td>2016-11-30</td>

 <td>人生就像是一场修行 C</td>

 <td>

  <div class="layui-btn-group" style="overflow:visible;">

  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>

  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>

  </div>

 </td>

 </tr>

 <tr>

 <td>湖北</td>

 <td>这个</td>

 <td>1区</td>

 <td>贤心3</td>

 <td>2016-11-30</td>

 <td>人生就像是一场修行 C</td>

 <td>

  <div class="layui-btn-group" style="overflow:visible;">

  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>

  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>

  </div>

 </td>

 </tr>

 <tr>

 <td>湖北</td>

 <td>这个</td>

 <td>1区</td>

 <td>贤心3</td>

 <td>2016-11-30</td>

 <td>人生就像是一场修行 C</td>

 <td>

  <div class="layui-btn-group" style="overflow:visible;">

  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>

  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>

  </div>

 </td>

 </tr>

 <tr>

 <td>湖北</td>

 <td>这个</td>

 <td>1区</td>

 <td>贤心3</td>

 <td>2016-11-30</td>

 <td>人生就像是一场修行 B</td>

 <td>

  <div class="layui-btn-group" style="overflow:visible;">

  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>

  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>

  </div>

 </td>

 </tr>

 <tr>

 <td>湖北</td>

 <td>这个</td>

 <td>1区</td>

 <td>贤心</td>

 <td>2016-11-30</td>

 <td>人生就像是一场修行 B</td>

 <td>

  <div class="layui-btn-group" style="overflow:visible;">

  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>

  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>

  </div>

 </td>

 </tr>

 <tr>

 <td>湖北</td>

 <td>这个</td>

 <td>1区</td>

 <td>贤心</td>

 <td>2016-11-30</td>

 <td>人生就像是一场修行 C</td>

 <td>

  <div class="layui-btn-group" style="overflow:visible;">

  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>

  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>

  </div>

 </td>

 </tr>

 <tr>

 <td>湖北</td>

 <td>这个</td>

 <td>1区</td>

 <td>贤心</td>

 <td>2016-11-30</td>

 <td>人生就像是一场修行 D</td>

 <td>

  <div class="layui-btn-group" style="overflow:visible;">

  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">按钮1</a>

  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">按钮2</a>

  </div>

 </td>

 </tr>

 </tbody>

</table>

 </div>

?

1

2

3

4

5

6

7

8

layui.use('table', function(){

  var table = layui.table;

  table.init('test',{done:function(res,curr,count){

   layuiRowspan('province',1);

   layuiRowspan(['city','zone','username','joinTime','sign'],1);//支持数组

   layuiRowspan("8",1,true);

  }

  });})

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