layui table+复杂表头+合并单元格
程序员文章站
2022-04-29 18:33:49
效果图： 问题：行hover效果感觉错乱 所以改为透明色 代码： ......
效果图：
问题：行hover效果感觉错乱 所以改为透明色
代码：
1 <!doctype html>
2 <html lang="en">
3 <head>
4 <meta charset="utf-8">
5 <title>复杂表头+select下拉框默认值+单元格合并</title>
6 <script src="../../../static/lib/layui/layui.js" charset="utf-8"></script>
7 <style>
8 /*select下拉框显示*/
9 td[data-field="qualitystatus"]>div {
10 overflow: inherit;
11 }
12 /*去除行点击、hover背景色*/
13 .layui-table tbody tr:hover , .layui-table-hover , .layui-table-click{
14 background-color: rgba(255,255,255,0);
15 }
16 </style>
17 </head>
18 <body>
19 <div class="layui-fluid">
20 <div class="layui-row layui-col-space15">
21 <div class="layui-col-md12">
22 <div class="layui-card">
23 <div class="layui-card-body">
24 <table class="layui-hide" id="qua_standard_table" lay-filter="qua_standard_table"></table>
25 </div>
26 </div>
27 </div>
28 </div>
29 </div>
30 </body>
31 <script>
32 layui.use(['element','upload','laydate','table','form'], function(){
33 var element = layui.element
34 ,table = layui.table,
35 laypage = layui.laypage,
36 form = layui.form,
37 upload = layui.upload,
38 laydate = layui.laydate;
39 //模拟数据
40 var selectdata = [
41 {
42 amountofmoney: 5000,
43 basicmeasurement: "kg",
44 certificatenumber: "内容15",
45 concession: null,
46 contentid: null,
47 disqualification: null,
48 explains: "内容67",
49 files: null,
50 id: 2,
51 inspectcontent: "内容22",
52 inspectcontentnumber: "内容0000",
53 inspector: null,
54 inspectordate: null,
55 inspectordescription: null,
56 isnumber: null,
57 main: null,
58 manufacturer: "内容44",
59 materialid: 14,
60 materialname: "内容4",
61 materialno: "内容一",
62 materialsize: "2*3",
63 meid: null,
64 orderamount: 100,
65 orderid: 1,
66 orderprice: 20,
67 orderedinamount: 0,
68 projectname: "其他",
69 purchasemeasurement: "kg",
70 qualified: null,
71 qualitystatus: null,
72 qualitytestedinamount: 9,
73 standard: "内容11",
74 undetectedcount: 91,
75 },
76 {
77 amountofmoney: 5000,
78 basicmeasurement: "kg",
79 certificatenumber: "内容14",
80 concession: null,
81 contentid: null,
82 disqualification: null,
83 explains: "内容66",
84 files: null,
85 id: 2,
86 inspectcontent: "内容33",
87 inspectcontentnumber: "内容1111",
88 inspector: null,
89 inspectordate: null,
90 inspectordescription: null,
91 isnumber: null,
92 main: null,
93 manufacturer: "内容44",
94 materialid: 14,
95 materialname: "内容4",
96 materialno: "内容一",
97 materialsize: "2*3",
98 meid: null,
99 orderamount: 100,
100 orderid: 1,
101 orderprice: 20,
102 orderedinamount: 0,
103 projectname: "其他",
104 purchasemeasurement: "kg",
105 qualified: null,
106 qualitystatus: null,
107 qualitytestedinamount: 9,
108 standard: "内容001",
109 undetectedcount: 91,
110 },
111 {
112 amountofmoney: 5000,
113 basicmeasurement: "kg",
114 certificatenumber: "内容15",
115 concession: null,
116 contentid: null,
117 disqualification: null,
118 explains: "内容67",
119 files: null,
120 id: 1,
121 inspectcontent: "内容22",
122 inspectcontentnumber: "内容0000",
123 inspector: null,
124 inspectordate: null,
125 inspectordescription: null,
126 isnumber: null,
127 main: null,
128 manufacturer: "内容45",
129 materialid: 13,
130 materialname: "内容3",
131 materialno: "内容二",
132 materialsize: "2*3",
133 meid: null,
134 orderamount: 100,
135 orderid: 1,
136 orderprice: 20,
137 orderedinamount: 0,
138 projectname: "其他",
139 purchasemeasurement: "kg",
140 qualified: null,
141 qualitystatus: null,
142 qualitytestedinamount: 12,
143 standard: "内容11",
144 undetectedcount: 88,
145 },
146 {
147 amountofmoney: 5000,
148 basicmeasurement: "kg",
149 certificatenumber: "内容14",
150 concession: null,
151 contentid: null,
152 disqualification: null,
153 explains: "内容66",
154 files: null,
155 id: 1,
156 inspectcontent: "内容33",
157 inspectcontentnumber: "内容1111",
158 inspector: null,
159 inspectordate: null,
160 inspectordescription: null,
161 isnumber: null,
162 main: null,
163 manufacturer: "内容45",
164 materialid: 13,
165 materialname: "内容3",
166 materialno: "内容二",
167 materialsize: "2*3",
168 meid: null,
169 orderamount: 100,
170 orderid: 1,
171 orderprice: 20,
172 orderedinamount: 0,
173 projectname: "其他",
174 purchasemeasurement: "kg",
175 qualified: null,
176 qualitystatus: null,
177 qualitytestedinamount: 12,
178 standard: "内容001",
179 undetectedcount: 88,
180 }
181 ]
182
183 //主页面数据
184 table.render({
185 elem: '#qua_standard_table',
186 id:'qua_standard_table',
187 //url:'',
188 data:selectdata,
189 method:'post',
190 title: '数据表',
191 height: 'full-60',
192 cellminwidth: 120,
193 size: 'lg',
194 cols:[[
195 {align:'center',rowspan:2, title:'序号',width:100,type:'numbers',field: 'num',fixed:'left'},
196 {align:'center',rowspan:2,field: 'id', title: 'id',hide:true},//隐藏列
197 {align:'center',rowspan:2,field:'materialno', title:'表头',width:100},
198 {align:'center',rowspan:2,field:'materialname', title:'表头'},
199 {align:'center',rowspan:2,field:'projectname', title:'表头'},
200 {align:'center',rowspan:2,field:'purchasemeasurement', title:'表头'},
201 {align:'center',rowspan:2,field:'inspectcontentnumber', title:'表头'},
202 {align:'center',rowspan:2,field:'inspectcontent', title:'表头'},
203 {align:'center',rowspan:2,field:'standard', title:'表头'},
204 {align:'center',rowspan:2,field:'explains', title:'表头'},
205 {align:'center',rowspan:2,field:'qualitystatus', title:'结果',templet: function (d) {
206 if(d.qualitystatus == null){
207 return '<select name="qualitystatus" lay-filter="testselect" lay-verify="required" >' +
208 ' <option value="0" selected>合格</option>' +
209 ' <option value="1">不合格</option>' +
210 ' </select>';
211 }
212
213 }},
214 {align:'center',rowspan:2,field:'certificatenumber', title:'表头',templet: function (d) {
215 if(d.certificatenumber==null || d.certificatenumber==''){
216 return '无'
217 }else{
218 return d.certificatenumber
219 }
220 }},
221 {align:'center',rowspan:2,field:'undetectedcount', title:'表头'},
222 {align:'center',field:'resultnum', title:'表头',colspan:3},
223 {align:'center',rowspan:2,field:'qualitytestedinamount', title:'表头'},
224 {align:'center',rowspan:2,field:'manufacturer', title:'表头'},
225 {align:'center',rowspan:2,field:'certificate', title:'表头', templet: function (d) {
226 return '<span class="layui-breadcrumb" lay-separator="|">' +
227 '<a href="javascript:;" lay-event="qua_standard_edit">添加附件</a>' +
228 '</span>';
229 },fixed:'right'},
230 {align:'center',rowspan:2,width:100,field: 'operation', title: '操作', templet: function (d) {
231 return '<span class="layui-breadcrumb" lay-separator="|">' +
232 '<a href="javascript:;" lay-event="qua_standard_del">删除</a>' +
233 '</span>';
234 },fixed:'right'}
235 ],
236 [
237 {align:'center',field:'qualified', title:'表头', edit: 'number'},
238 {align:'center',field:'disqualification', title:'表头', edit: 'number'},
239 {align:'center',field:'concession', title:'表头', edit: 'number'},
240 ]
241 ],
242 done: function (res, curr, count) {
243 element.init();
244 $('#qua_standard_table').siblings('div').find('dl').find('.layui-this').click();//模拟点击 初始化数据
245 merge(res);//合并单元格
246 }
247 });
248
249 $('#receiptform1').on('keyup','.layui-table-edit',function () {
250 this.value=this.value.replace(/^(0+)|[^\d]+/g,'')//todo
251 });
252
253 //行事件
254 table.on('tool(qua_standard_table)', function(obj){
255
256 if(obj.event === 'qua_standard_edit'){
257 layer.msg('添加')
258 }else if(obj.event === 'qua_standard_del'){
259 layer.msg('删除')
260 }
261 });
262
263 });
264 //layui 结束
265
266 //合并开始
267 function merge(res) {
268 var data = res.data;
269 var mergeindex = 0;//定位需要添加合并属性的行数
270 var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数
271 var _number = 1;//保持序号列数字递增
272 var columsname = ['num','number','typename','projectname','unit','suppliednum','qualified','disqualification','concession','sum','manufacturer','certificate','operation'];//需要合并的列名称
273 var columsindex = [0,2,3,4,5,12,13,14,15,16,17,18,19];//需要合并的列索引值
274 var mergecondition = 'id';//需要合并的 首要条件 在这个前提下进行内容相同的合并
275 var tdarrl = $('.layui-table-fixed-l > .layui-table-body').find("tr");//序号列左定位产生的table tr
276 var tdarrr = $('.layui-table-fixed-r > .layui-table-body').find("tr");//操作列定右位产生的table tr
277
278 for (var k = 0; k < columsname.length; k++) { //这里循环所有要合并的列
279 var trarr = $(".layui-table-main>.layui-table").find("tr");//所有行
280 for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据
281
282 if (data[i][mergecondition] === data[i-1][mergecondition]) {
283 var tdcurarr = trarr.eq(i).find("td").eq(columsindex[k]);//获取当前行的当前列
284 var tdprearr = trarr.eq(mergeindex).find("td").eq(columsindex[k]);//获取相同列的第一列
285
286 if (data[i][columsname[k]] === data[i-1][columsname[k]]) { //后一行的值与前一行的值做比较，相同就需要合并
287 mark += 1;
288 tdprearr.each(function () {//相同列的第一列增加rowspan属性
289 $(this).attr("rowspan", mark);
290 });
291 tdcurarr.each(function () {//当前行隐藏
292 $(this).css("display", "none");
293 });
294 }else {
295 mergeindex = i;
296 mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
297 }
298 } else {
299 mergeindex = i;
300 mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算
301 }
302
303
304 }
305 mergeindex = 0;
306 mark = 1;
307 }
308
309
310
311
312
313 //操作左右定位列的表格
314 $.each($("#qua_standard_table").siblings('.layui-table-view').find('.layui-table-main>.layui-table').find("tr"),function (i,v) {
315 if ($(v).find('td').eq(2).css('display') === 'none') {
316 tdarrl.eq(i).find('td').css('display','none');
317 tdarrr.eq(i).find('td').css('display','none');
318 } else {
319 tdarrl.eq(i).find('td').find('.laytable-cell-numbers').html(_number++);
320 tdarrl.eq(i).find('td').css('height',$(v).find('td').eq(2)[0].clientheight);
321 tdarrr.eq(i).find('td').css('height',$(v).find('td').eq(2)[0].clientheight);
322
323 }
324 })
325
326
327
328 }
329 //合并结束
330 </script>
331 </html>