精华内容
下载资源
问答
  • layui表格合并

    2020-03-17 09:49:58
    遇到一个需求,layui合并表格,发现同事在一个项目里有写,就lou一下,做个记录,哈哈哈哈 先看效果: 实现方法如下 一、自定义一个modul,用来合并表格,然后对需要合并的列,加个merge属性,设置为true // ...

    Alt
    遇到一个需求,layui合并表格,发现同事在一个项目里有写,就lou一下,做个记录,哈哈哈哈
    先看效果:
    在这里插入图片描述
    实现方法如下
    一、自定义一个modul,用来合并表格,然后对需要合并的列,加个merge属性,设置为true

      // 自定义模块
      layui.config({
        base: 'module/'
      }).extend({
        tableMerge: 'tableMerge'
      });
        /**
       * 合并单元格 
       */
      function merge(myTable) {
        var tableBox = $(myTable.elem).next().children('.layui-table-box'),
          $main = $(tableBox.children('.layui-table-body').children('table').children('tbody').children('tr').toArray().reverse()),
          $fixLeft = $(tableBox.children('.layui-table-fixed-l').children('.layui-table-body').children('table').children('tbody').children('tr').toArray().reverse()),
          $fixRight = $(tableBox.children('.layui-table-fixed-r').children('.layui-table-body').children('table').children('tbody').children('tr').toArray().reverse()),
          cols = myTable.cols[0], mergeRecord = {};
    
        for (let i = 0; i < cols.length; i++) {
          var item3 = cols[i], field = item3.field;
          if (item3.merge) {
            var mergeField = [field];
            if (item3.merge !== true) {
              if (typeof item3.merge == 'string') {
                mergeField = [item3.merge]
              } else {
                mergeField = item3.merge
              }
            }
            mergeRecord[i] = {mergeField: mergeField, rowspan: 1}
          }
        }
    
        $main.each(function (i) {
    
          for (var item in mergeRecord) {
            if (i == $main.length - 1 || isMaster(i, item)) {
              $(this).children('[data-key$="-' + item + '"]').attr('rowspan', mergeRecord[item].rowspan).css('position', 'static');
              $fixLeft.eq(i).children('[data-key$="-' + item + '"]').attr('rowspan', mergeRecord[item].rowspan).css('position', 'static');
              $fixRight.eq(i).children('[data-key$="-' + item + '"]').attr('rowspan', mergeRecord[item].rowspan).css('position', 'static');
              mergeRecord[item].rowspan = 1;
            } else {
              $(this).children('[data-key$="-' + item + '"]').remove();
              $fixLeft.eq(i).children('[data-key$="-' + item + '"]').remove();
              $fixRight.eq(i).children('[data-key$="-' + item + '"]').remove();
              mergeRecord[item].rowspan += 1;
            }
          }
        })
    
        function isMaster(index, item) {
          var mergeField = mergeRecord[item].mergeField;
          var dataLength = layui.table.cache[myTable.id].length;
          for (var i = 0; i < mergeField.length; i++) {
    
            if (layui.table.cache[myTable.id][dataLength - 2 - index][mergeField[i]]
              !== layui.table.cache[myTable.id][dataLength - 1 - index][mergeField[i]]) {
              return true;
            }
          }
          return false;
        }
      }
      //调用,合并[只贴重要部分]
       table.render({
          id: 'agriculturalAcreageTable',
          elem: '#agriculturalAcreageTable',
          even: true,
          height: 'full',
          url: url,
          method: 'GET',
          page: false, //开启分页
          cols: [[
            {
              field: 'year',
              title: '年份',
              align: 'center',
              merge:true,   //对指定的列开启合并功能
              width: 100,
            }, 
            {  
            }, 
           // ...省略
          ]],
          //...
          done:function (res,curr,count) {
            merge(this); //调用合并表格的方法
          }
        });
    

    二、第二种方法合并表格,根据field来自动合并

    /**
     * 合并方法
     * */
      var execRowspan = function (fieldName, index, flag) {
        // 1为不冻结的情况,左侧列为冻结的情况
        let fixedNode = index == "1" ? $(".layui-table-body")[index - 1] : (index == "3" ? $(".layui-table-fixed-r") : $(".layui-table-fixed-l"));
        // 左侧导航栏不冻结的情况
        let child = $(fixedNode).find("td");
        let childFilterArr = [];
        // 获取data-field属性为fieldName的td
        for (let i = 0; i < child.length; i++) {
          if (child[i].getAttribute("data-field") == fieldName) {
            childFilterArr.push(child[i]);
          }
        }
        // 获取td的个数和种类
        let childFilterTextObj = {};
        for (let i = 0; i < childFilterArr.length; i++) {
          let childText = flag ? childFilterArr[i].innerHTML : childFilterArr[i].textContent;
          if (childFilterTextObj[childText] == undefined) {
            childFilterTextObj[childText] = 1;
          } else {
            let num = childFilterTextObj[childText];
            childFilterTextObj[childText] = num * 1 + 1;
          }
        }
        let canRowspan = true;
        let maxNum = 9999;
        for (let i = 0; i < childFilterArr.length; i++) {
          maxNum = $(childFilterArr[i]).prev().attr("rowspan") && fieldName != "8" ? $(childFilterArr[i]).prev().attr("rowspan") : maxNum;
          let key = flag ? childFilterArr[i].innerHTML : childFilterArr[i].textContent;
          let tdNum = childFilterTextObj[key];
          let curNum = maxNum < tdNum ? maxNum : tdNum;
          let nextKey;
    
          for (let j = 1; j < curNum && (i + j < childFilterArr.length); j++) {
            nextKey = flag ? childFilterArr[i + j].innerHTML : childFilterArr[i + j].textContent;
            if (key != nextKey && curNum > 1) {
              canRowspan = true;
              curNum = j;
            }
          }
          if (canRowspan) {
            childFilterArr[i].setAttribute("rowspan", curNum);
            if ($(childFilterArr[i]).find("p.rowspan").length > 0) {//设置td内的p.rowspan高度适应合并后的高度
              $(childFilterArr[i]).find("p.rowspan").parent("p.layui-table-cell").addClass("rowspanParent");
              $(childFilterArr[i]).find("p.layui-table-cell")[0].style.height = curNum * 38 - 10 + "px";
            }
            canRowspan = false;
          } else {
            childFilterArr[i].style.display = "none";
          }
          if (maxNum) {
            maxNum--;
          }
          if (--childFilterTextObj[key] == 0 || maxNum == 0 || (nextKey != undefined && key != nextKey)) {
            canRowspan = true;
          }
        }
      };
      var layuiRowspan = function (fieldNameTmp, index, flag) {
        let fieldName = [];
        if (typeof fieldNameTmp == "string") {
          fieldName.push(fieldNameTmp);
        } else {
          fieldName = fieldName.concat(fieldNameTmp);
        }
        for (let i = 0; i < fieldName.length; i++) {
          execRowspan(fieldName[i], index, flag);
        }
      };
    
     //调用,合并[只贴重要部分]
       table.render({
          id: 'agriculturalAcreageTable',
          elem: '#agriculturalAcreageTable',
          even: true,
          height: 'full',
          url: url,
          method: 'GET',
          page: false, //开启分页
          cols: [[
            {
              field: 'year',
              title: '年份',
              align: 'center',
              width: 100,
            }, 
            {  
            }, 
           // ...省略
          ]],
          //...
          done:function (res,curr,count) {
             layuiRowspan('year',1); //调用合并表格的方法
             //layuiRowspan(["field1",'field12',······],1);//支持数组
          }
        });
    
    展开全文
  • layui表格合并单元格

    2019-12-27 10:14:01
    思想:layui表格合并单元格,layui并没有给出相应的解决办法;那么我们可以在前端使用js将相邻并相同的单元格合并; 1.页面代码: <!DOCTYPE html> <html lang="en"> <head> <meta ...

    思想:layui表格合并单元格,layui并没有给出相应的解决办法;那么我们可以在前端使用js将相邻并相同的单元格合并;

    1.页面代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>City3</title>
        <link rel="stylesheet" href="/layui2.45/css/layui.css" />
        <script type="text/javascript" src="/layui2.45/layui.js"></script>
        <style>
            .layui-table-page {
                text-align: center;
            }
        </style>
    </head>
    <body>
    <table id="demo" lay-filter="test"></table>
    <script type="text/html" id="toolbarDemo">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
            <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
            <button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
        </div>
    </script>
    
    <script type="text/html" id="barDemo">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>
    
    <script>
        layui.use('table', function(){
            var table = layui.table;
            var $ = layui.jquery;//引入jquery的模块
            //第一个实例
            table.render({
                elem: '#demo'
                ,height: 512
                ,url: '/getCity3' //数据接口
                ,page: true //开启分页
                ,toolbar: '#toolbarDemo'
                ,cols: [[ //表头
                    {field: 'id', title: 'ID', sort: true, fixed: 'left'},
                    {field: 'name', title: '名称'}
                    ,{field: 'countryCode', title: '城市代码',sort: true}
                    ,{field: 'district', title: 'district'}
                    ,{field: 'population', title: 'population'}
                    ,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
                ]]
                ,
                done: function (res, curr, count) {
                    merge(res);
                }
            });
            function merge(res) {
                console.log(res.data)
                var data = res.data;
                var mergeIndex = 0;//定位需要添加合并属性的行数
                var mark = 1; //这里涉及到简单的运算,mark是计算每次需要合并的格子数
                var columsName = ['id','name','countryCode'];//需要合并的列名称
                var columsIndex = [0,1,2];//需要合并的列索引值
    
                for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
                    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]]) { //后一行的值与前一行的值做比较,相同就需要合并
                            mark += 1;
                            tdPreArr.each(function () {//相同列的第一列增加rowspan属性
                                $(this).attr("rowspan", mark);
                            });
                            tdCurArr.each(function () {//当前行隐藏
                                $(this).css("display", "none");
                            });
                        }else {
                            mergeIndex = i;
                            mark = 1;//一旦前后两行的值不一样了,那么需要合并的格子数mark就需要重新计算
                        }
                    }
                    mergeIndex = 0;
                    mark = 1;
                }
            }
    
        });
    </script>
    </body>
    </html>

     

    2.页面效果:

     

    有啥不懂得小伙伴们加群交流啦:852665736;本群致力于一同进步的小伙伴们,大家一起交流探讨,在陌生的城市感受温暖;  

    展开全文
  • 需求:前段时间拿到一个需求,让写一个表格: (1)单元格要能编辑; (2)合并内容相同的单元格;...在尝试过layui、bootstrap和datatable的表格之后,最终使用layui实现了。再次总结一下。 先说一下bootstrap和dat...
    需求:前段时间拿到一个需求,让写一个表格:

    (1)单元格要能编辑;
    (2)合并内容相同的单元格;
    (3)如果单元格内容太多(多余一行),编辑时自动换行。

    单拿一个要求出来很容以实现,但这三个要求都要满足就有点费事了。(其实主要是自己对layui不熟悉)
    在尝试过layui、bootstrap和datatable的表格之后,最终使用layui实现了。再次总结一下。

    先说一下bootstrap和datatable没能实现的原因:

    1、bootstrap实现了编辑和合并单元格,问题出在:
    (1)要点击两次单元格才能是编辑状态,感觉体验不是很好;
    (2)合并单元格实现了,但在变价多个单元格时合并功能会失效。
    2、datatable能轻松实现合并单元格,但好像不支持单元格的编辑。(可能支持只是自己没找到,有兴趣的可以去研究一下)

    好了废话太多,上代码:

    layui的实现方式:
    // css
    <link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
    <style>
            .layui-table-cell {
                height: auto !important;
                white-space: normal;
            }
    
            .layui-table-view .layui-table td {
                padding: 0px
            }
    
            .layui-table-cell {
                font-size: 14px;
                padding: 0px;
                line-height: 36px;
                overflow: visible;
                text-overflow: inherit;
                white-space: normal;
                box-sizing: border-box;
                word-break: break-all;
                line-break: anywhere;
    
            }
    
            [contenteditable]:focus {
                outline-color: green;
                background-color: white
            }
    </style>
    
    // html
    <table id="test" class="layui-table" lay-filter="layTableId"></table>
    
    // js
    <script src="../static/js/jquery.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="../static/layer/layer.js"></script>
    <script src="../static/layui/layui.js" charset="utf-8"></script>
    
    <script>
        layui.use('table', function () {
            var table = layui.table, layer = layui.layer;
    
            table.render({
                elem: '#test'
                , url: '/test_data'
                , cols: [[
                    {
                        title: '序号',
                        type: 'numbers',
                        width: '4%'
                    }, {
                        field: 'class',
                        title: '班级,
                        width: '20%',
                        templet: function (d) {
                            return '<div contenteditable="true" class="textcss" name="scene_title" id="' + d.tempId + '">' + d.class+ '</div>';   // 这行代码是关键:实现把内容时多行,编辑时可以换行(默认编辑时只能是一行)
                        }
                    }, {
                        field: 'name',
                        title: '学生姓名',
                        width: '20%',
                        templet: function (d) {
                            return '<div contenteditable="true" class="textcss" name="name" id="' + d.tempId + '">' + d.name+ '</div>';
                        }
                    }, {
                        field: 'age',
                        title: '年龄',
                        width: '20%',
                        templet: function (d) {
                            return '<div contenteditable="true" class="textcss" name="age" id="' + d.tempId + '">' + d.age + '</div>';
                        }
                    }, {
                        field: 'class_teacher',
                        title: '班主任',
                        width: '6%',
                        edit: true
                    }
                ]],
                done: function (res, curr, count) {
                    merge(res);
                }
            });
    		
    		// 合并班级相同的行
            function merge(res) {
                var data = res.data;
                var mergeIndex = 0;//定位需要添加合并属性的行数
                var mark = 1; //这里涉及到简单的运算,mark是计算每次需要合并的格子数
                var columsName = ['class'];//需要合并的列名称
                var columsIndex = [1];//需要合并的列索引值
    
                for (var k = 0; k < columsName.length; k++) { //这里循环所有要合并的列
                    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]]) { //后一行的值与前一行的值做比较,相同就需要合并
                            mark += 1;
                            tdPreArr.each(function () {//相同列的第一列增加rowspan属性
                                $(this).attr("rowspan", mark);
                            });
                            tdCurArr.each(function () {//当前行隐藏
                                $(this).css("display", "none");
                            });
                        } else {
                            mergeIndex = i;
                            mark = 1;//一旦前后两行的值不一样了,那么需要合并的格子数mark就需要重新计算
                        }
                    }
                    mergeIndex = 0;
                    mark = 1;
                }
            }
    </script>
    
    datatable合并单元格

    参考:datatable合并单元格

    展开全文
  • 开发干货-layui表格动态合并 背景简介 最近由于技术研究的任务较少,所以领导让参与实际项目开发,基本的增删改查就不说了,最近用的技术中稍微有点难度就是动态表格问题,vue,layui,原生table表格等,需要做动态的...

    开发干货-layui表格动态合并

    背景简介

    最近由于技术研究的任务较少,所以领导让参与实际项目开发,基本的增删改查就不说了,最近用的技术中稍微有点难度就是动态表格问题,vue,layui,原生table表格等,需要做动态的横向纵向合并,原生的table提供了表格合并属性,rowspan,colspan,但是项目中基本很少用到原生的table表格,大部分是js动态渲染的,例如layui.table,element-ui的table等,这些框架并未提供灵活的表格合并api,只能自己写了

    动态表格实现思路

    表格数据渲染,还是按照全部数据一行行渲染,渲染完毕后,再执行表格动态合并,借助合并参数实现动态合并.
    合并参数结构如下:

    [
    {
    	rowIndex:'单元格行坐标',
    	colIndex:'单元格列坐标',
    	rowAndColSpan:{
    		rowspan:'合并rowspan'
    		colspan:'合并colspan'
    	}
    }
    
    ]
    
    

    layui 动态表格实现

    // 渲染核心函数
    //layui表格排列处理
    function layuiTableRowAndColSpanHanle(tableDomId, rowAndColSpanData) {
        var rows = $("[lay-id='" + tableDomId + "'] table>tbody").find("tr");
        for (var rowIndex = 0; rowIndex < rows.length; rowIndex++) {
            var row = rows[rowIndex];
            var cols = $(row).find("td");
            for (var colIndex = 0; colIndex < cols.length; colIndex++) {
                var rowAndColSpan = getRowAndColSpan(rowAndColSpanData, rowIndex, colIndex);
                rowspanAndColspanHanle(rowAndColSpan, rows, cols, rowIndex, colIndex);
            }
        }
    
    
    }
    
    function rowspanAndColspanHanle(rowAndColSpan, rows, cols, currRowIndex, currColIndex) {
    
        //等于0隐藏
        if (rowAndColSpan.rowspan == 0 || rowAndColSpan.colspan == 0) {
            $(cols[colIndex]).css("display", "none");
            return;
        }
        //大于1处理
        if (rowAndColSpan.rowspan > 1 || rowAndColSpan.colspan > 1) {
            $(cols[currColIndex]).attr("rowspan", rowAndColSpan.rowspan);
            $(cols[currColIndex]).attr("colspan", rowAndColSpan.colspan);
            for (var i = 1; i < rowAndColSpan.rowspan; i++) {
                //rowspan 隐藏后面的行
                $(rows[currRowIndex + i]).find("td").eq(currColIndex).css("display", "none");
    
            }
            //colspan 隐藏右边列
            for (var j = 1; j < rowAndColSpan.colspan; j++) {
                $(rows[currRowIndex]).find("td").eq(currColIndex + j).css("display", "none");
            }
        }
    
    }
    
    
    //获取表格单元格 rowspan,colspan
    function getRowAndColSpan(tableDataRowColspan, rowIndex, colIndex) {
        for (i = 0; i < tableDataRowColspan.length; i++) {
            var rc = tableDataRowColspan[i];
            if (rc.rowIndex == rowIndex && rc.colIndex == colIndex) {
                return rc.rowAndColSpan;
            }
        }
        return {rowspan: 1, colspan: 1};
    }
    
    
    //表格渲染示例
    layui.table.render({
        elem: '#demoTable',
        even: true,
        skin: 'row',
        cols: [[
            {
                field: 'f1', title: 'f1', width: 20 + '%',
            },
            {
                field: 'f2', title: 'f2', width: 40 + '%'
            },
            {field: 'f3', title: 'f3', width: 20 + '%'},
            {field: 'f4', title: 'f4', width: 20 + '%'},
        ]],
        data: []//表格数据,
        done: function (res, curr, count) {
            var rowAndColSpanData = [
                //第一行第一列 rowspan,colspan
                {
    
                    rowIndex: 0,
                    colIndex: 0,
                    rowAndColSpan: {
                        rowspan: 6,
                        colspan: 1
                    }
                },
                //第1行第4列 rowspan,colspan
                {
    
                    rowIndex: 0,
                    colIndex: 3,
                    rowAndColSpan: {
                        rowspan: 6,
                        colspan: 1
                    }
                }
    
            ]
            layuiTableRowAndColSpanHanle('demoTable', rowAndColSpanData);
        }
    });
    

    vue或其他数据表格,合同运用同样思路即可

    展开全文
  • layui表格合并

    千次阅读 2020-01-13 12:53:53
    先看一下最终合并之后的效果,能对单选、复选框进行按照某一列的合并。 ... 但是还是存在没能解决的问题。 在完善之后达到的效果: ...原来加入开启了单选或者多选之后会将全部的单选...也传入合并列名field,layui默...
  • layui表格合并

    2019-11-22 16:18:09
    点击此处
  • layui 表格合并组件 tableMerge.js layui.define(['table'], function (exports) { var $ = layui.jquery; // 封装方法 var mod = { /** * 渲染入口 * @param myTable */ render: function ...
  • 相邻数据之间比较合并,不同的重新开始比较 var demoTable = table.render({ elem: '#demoList', cols: [[ {field: 'name', title: '名称', align: 'center'}, {field: 'year', title: '年份', align: 'center',
  • 记录:layui 表格自动渲染数据合并单元格 table.render({ elem: '#Table', title:"", url: url, toolbar: '#toolbar', where: $('form').serialize(), // page: true, cols: [[ {titl
  • layui表格--合并行数据

    2020-12-21 16:46:57
    layui静态表格合并数据 因为项目中合并的数据比较多,需要把这个方法写一个公共js。而原来的方法不好封装,且代码依旧累赘, 项目场景: 因而就有了 https://www.cnblogs.com/Kingram/p/9781682.html 实战: ...
  • layui表格编辑单元格之后合并该列 开发工具与关键技术:VS MVC 撰写时间:2019/7/26 关于layui数据表格的监听编辑事件,相信很多人都会;但是简单的监听编辑就没有其他操作的是不会更新你所编辑过的数据,并且不会...
  • 当我们在使用Layui的时候,有时表格中的列比较多,展示出来肯定是有问题的,这样就不得不舍弃一些列不展示,不展示是一种解决方案,但是更好的解决方案应该是合并展示。 这里的展示不是合并单元格,合并单元格方法...
  • 效果图 代码放置位置 done : function(res, curr, count) { merge(res); } function merge(res) { var data = res.data;... //这里涉及到简单的运算,mark是计算每次需要合并的格子数 var columsName
  • 注意:两种方法要求layui表格的单元格中没有使用fixed属性,不然代码不会起效 方法一: /** * 合并单元格(列) * @param res 表格数据 * @param curr 当前页 * @param count 总数 */ function merge(res, curr, ...
  • layui table合并单元格.zip 跨行自动合并单元格
  • 今天渲染页面的时候碰到一个问题,就是表格行合并的问题。大概如下: 转成 本来是用的layui的第三方组件实现的,组件为:tableMerge 表格自动合 。...但是该组件有个问题是无法重载... //layui数据表格合并行 ...
  • 最近在使用layui的过程中,遇到了表格合并单元格,设置不同底色的问https://www.hixiaoe.com/题。 在此总结,大家一起学习。 效果如下: 同一组新闻的底色相同 实现代码: <script> layui.config...
  • $(document).on(“click”,".layui-table-body table.layui-table tbody tr",function(){ var tr = $(this); //从哪行开始选中 var numth = $(tr).attr(“data-index”); var trd = $(".layui-table-main tr[data...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 486
精华内容 194
关键字:

layui表格合并