LayUiTable表单相同参数的单元格合并_layuitablemerge资源-CSDN下载

共117个文件

gif：75个

js：22个

xml：6个

LayUi插件

表单数据合并

2星需积分: 45 128 浏览量 2018-10-26 10:20:36 上传评论 2 收藏 684KB ZIP 举报

在IT领域，尤其是在前端开发中，LayUI是一个广受欢迎的轻量级前端框架，它提供了丰富的组件，如表格（Table）、按钮、表单等，用于构建用户界面。本话题聚焦于LayUI中的Table组件，特别是如何实现相同参数的单元格合并功能，这在展示数据时能有效提高信息的可读性和美观性。 LayUI Table的单元格合并功能，主要是通过`parseData`方法和自定义模板来实现的。当表格数据中存在相同参数时，我们可以将这些参数对应的单元格合并为一个，减少重复信息，增强视觉效果。下面我们将详细探讨如何操作。 1. **理解LayUI Table的基础使用** 在使用单元格合并功能前，我们需要了解LayUI Table的基本用法。LayUI Table接收一组配置项，包括数据源（data）、列配置（cols）等。数据源通常是JSON数组，每一项代表表格的一行；列配置则定义了表格的列信息，包括标题、字段名、宽度等。 2. **实现单元格合并的关键步骤** - **数据预处理**：在获取到原始数据后，我们需要对数据进行处理，找出具有相同参数的行，并记录其起始行和结束行以及需要合并的列索引。 - **自定义模板**：利用LayUI的模板语法（例如`<#...#>`），我们可以编写一个函数来判断当前单元格是否需要被合并。如果需要，模板会返回空字符串，否则返回实际值。 - **设置`parseData`**：LayUI Table提供了一个`parseData`回调，用于在渲染数据前对其进行处理。在这里，我们可以根据预处理的结果，修改数据源，添加额外的信息以指示哪些单元格需要合并。 3. **示例代码** ```javascript var data = [/* 你的原始数据 */]; // 预处理数据，找到需要合并的单元格信息 var mergeInfo = getMergeInfo(data); // 自定义模板 var template = function(value, row, index){ if (mergeInfo[index] && mergeInfo[index].isMerge) { return ''; } else { return value; } }; // 设置parseData layui.table.render({ elem: '#tableId', cols: [[/* 列配置 */]], data: data, parseData: function(res){ // 在这里处理数据，添加合并信息 for (var i = 0; i < res.data.length; i++) { if (mergeInfo[i]) { res.data[i]['lay merg'] = mergeInfo[i]; } } return res; }, template: template }); ``` 4. **注意事项** - 单元格合并可能会影响到排序和筛选功能，因此在实现时需要考虑到这些交互的影响。 - 要确保合并后的表格布局清晰，避免过多的合并导致信息混乱。 - 如果数据量较大，预处理和合并操作可能会增加计算负担，需要注意性能优化。 5. **拓展应用** 这种单元格合并的技巧不仅适用于LayUI Table，其他类似的前端组件库，如Element UI、Ant Design Vue等，也都有类似的方法实现单元格合并。通过以上步骤，我们可以有效地在LayUI Table中实现相同参数的单元格合并，提升数据展示的效率和美观性。在实际项目中，根据具体需求调整和优化这些方法，以达到最佳效果。对于压缩包文件"tableMerge"，它可能包含了一个示例代码或者相关的配置文件，可以作为实践这一功能的参考。

资源推荐

资源详情

资源评论

收起资源包目录

LayUiTable表单相同参数的单元格合并（117个子文件）

layui.css 68KB

layer.css 14KB

layui.mobile.css 10KB

laydate.css 7KB

code.css 1KB

iconfont.eot 40KB

59.gif 10KB

22.gif 10KB

24.gif 8KB

13.gif 7KB

16.gif 7KB

39.gif 6KB

64.gif 6KB

63.gif 6KB

50.gif 6KB

loading-0.gif 6KB

4.gif 6KB

1.gif 5KB

42.gif 5KB

71.gif 5KB

21.gif 5KB

20.gif 5KB

29.gif 5KB

70.gif 4KB

5.gif 4KB

17.gif 4KB

27.gif 4KB

9.gif 4KB

44.gif 4KB

11.gif 4KB

8.gif 4KB

3.gif 4KB

23.gif 4KB

34.gif 4KB

41.gif 4KB

38.gif 4KB

65.gif 3KB

32.gif 3KB

45.gif 3KB

7.gif 3KB

12.gif 3KB

26.gif 3KB

60.gif 3KB

2.gif 3KB

40.gif 3KB

25.gif 3KB

19.gif 3KB

66.gif 3KB

18.gif 3KB

46.gif 3KB

10.gif 3KB

28.gif 3KB

51.gif 3KB

57.gif 3KB

67.gif 3KB

48.gif 3KB

0.gif 3KB

43.gif 3KB

30.gif 2KB

61.gif 2KB

33.gif 2KB

69.gif 2KB

14.gif 2KB

47.gif 2KB

36.gif 2KB

49.gif 2KB

58.gif 2KB

6.gif 2KB

54.gif 2KB

53.gif 2KB

56.gif 2KB

62.gif 2KB

31.gif 2KB

55.gif 2KB

35.gif 2KB

15.gif 2KB

loading-2.gif 2KB

37.gif 1KB

68.gif 1KB

52.gif 777B

loading-1.gif 701B

table.html 4KB

tableMerge.iml 296B

jquery-1.8.3.js 261KB

layui.all.js 254KB

jquery.js 95KB

mobile.js 33KB

table.js 30KB

laydate.js 27KB

layer.js 22KB

layedit.js 12KB

colorpicker.js 11KB

form.js 9KB

element.js 7KB

upload.js 7KB

slider.js 7KB

layui.js 7KB

laypage.js 4KB

carousel.js 4KB

util.js 3KB

共 117 条

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>班级信息</title> <link rel="stylesheet" type="text/css" href="layui/css/layui.css"/> <script type="text/javascript" src="layui/layui.js" charset="utf-8"></script> <script type="text/javascript" src="layui/jquery-1.8.3.js"></script> </head> <body> <table id="demo" lay-filter="test"></table> </body> <script> layui.use('table', function () { var table = layui.table; //第一个实例 table.render({ elem: '#demo' , height: 312 , url: 'data.json' //数据接口 , page: true //开启分页 , cols: [[ //表头 {field: 'id', title: 'ID', width: 80} , {field: 'username', title: '用户名', width: 80} , {field: 'sex', title: '性别', width: 80,} , {field: 'city', title: '城市', width: 80} , {field: 'sign', title: '签名', width: 177} , {field: 'experience', title: '积分', width: 80} , {field: 'score', title: '评分', width: 80} , {field: 'classify', title: '职业', width: 80} , {field: 'wealth', title: '财富', width: 135} ]] , done: function (res, curr, count) { merge(res, curr, count); } }); /** * 合并单元格 * @param res 表格数据 * @param curr 当前页 * @param count 总数 */ function merge(res, curr, count) { tableMerge(res, curr, count, ['username', 'sex', 'classify'], ['1', '2', '7']); } /** * 合并单元格 * @param res 表格数据 * @param curr 当前页 * @param count 总数 * @param columsNameList 需要合并的列数组名称 * @param columsIndexList 需要合并的列数组索引值 */ function tableMerge(res, curr, count, columsNameList, columsIndexList) { var data = res.data; var mergeIndex = 0;//定位需要添加合并属性的行数 var mark = 1; //这里涉及到简单的运算，mark是计算每次需要合并的格子数 var columsName = columsNameList;//需要合并的列名称 var columsIndex = columsIndexList;//需要合并的列索引值 for (var k = 0; k < columsName.length; k++)//这里循环所有要合并的列 { mark = 1; var trArr = $(".layui-table-body>.layui-table").find("tr");//所有行 for (var i = 1; i < res.data.length; i++) { //这里循环表格当前的数据 var tdCurArr = trArr.eq(i).find("td").eq(columsIndex[k]);//获取当前行的当前列 var tdPreArr = trArr.eq(mergeIndex).find("td").eq(columsIndex[k]);//获取相同列的第一列 if (data[i][columsName[k]] === data[i - 1][columsName[k]]) { //后一行的值与前一行的值做比较，相同就需要合并 // alert(data[i][columsName[k]]); mark += 1; tdPreArr.each(function () {//相同列的第一列增加rowspan属性 $(this).attr("rowspan", mark); }); tdCurArr.each(function () {//当前行隐藏 $(this).css("display", "none"); }); } else { mergeIndex = i; mark = 1;//一旦前后两行的值不一样了，那么需要合并的格子数mark就需要重新计算 } } } } }); </script> </html>

评论收藏

内容反馈