layui表格合并、编辑单元格
需求：前段时间拿到⼀个需求，让写⼀个表格：
（1）单元格要能编辑；
（2）合并内容相同的单元格；
（3）如果单元格内容太多（多余⼀⾏），编辑时⾃动换⾏。
单拿⼀个要求出来很容以实现，但这三个要求都要满⾜就有点费事了。（其实主要是⾃⼰对layui不熟悉）
在尝试过layui、bootstrap和datatable的表格之后，最终使⽤layui实现了。再次总结⼀下。
layui和bootstrap哪个好先说⼀下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;
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合并单元格
参考：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。