经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » JS/JS库/框架 » JavaScript » 查看文章
layui table+复杂表头+合并单元格
来源:cnblogs  作者:&执念  时间:2019/6/21 11:09:08  对本文有异议

效果图:

问题:行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>

 

原文链接:http://www.cnblogs.com/zhinian-/p/11063168.html

 友情链接: NPS