layui表格合并、编辑单元格

需求：前段时间拿到一个需求，让写一个表格：

（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合并单元格