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

效果图：

问题：行hover效果感觉错乱  所以改为透明色

代码：

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

 

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

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

JavaScript热门文章

  • echarts 饼图 + 全屏显示
  • js正则匹配以{开头,以}结尾的表达式怎么写？-附源码
  • echarts 实现数据(tooltip)自动轮播插件
  • Js设置博客园主题色(theme-color)
  • elementUI 设置input的只读或禁用的方法
  • 超级好用的流程图js框架 值得收藏
  • layui table+复杂表头+合并单元格
  • 获取地理位置
  • 如何使用JavaScript导入和导出Excel文件
  • WebStorm eslint插件报错解决 - TypeError: this.CliEngine is not a constructor

    • JavaScript推荐文章

  • 一些八股：1.fetch 的理解。2.let、const、var
  • 电子表格转身购物车：三步轻松实现
  • Canvas简历编辑器-图形绘制与状态管理(轻量级DOM)
  • IntersectionObserver + scrollIntoView 实现电梯导航 - xingba-coder
  • 可视化—gojs 超多超实用经验分享(三)
  • PixiJS源码分析系列： 第一章 从最简单的例子入手
  • WebRTC入门
  • 前端 Array.sort() 源码学习
  • 【技巧】JS代码这么写，前端小姐姐都会爱上你
  • 【JS】await异常捕获，这样做才完美

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号