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>
经验首页