一，冻结列，冻结行？
被冻结的列或行，不会随着滚动条的滑动而滚动。
二，js中var i={}与var i=[]的区别：
i={} 对象字变量 等同 i = new Object();
i=[] 数组字变量 等同 i = new Array();
参考：https://www.w3school.com.cn/js/js_objects.asp
js中：对象基于Hash表存储变量------》变量声明顺序与存储顺序不一致。
三，合并相同列：
参考：https://fly.layui.com/jie/27432/
思路：1，获取到所有的单元格（相同列的单元格data-firld值相同）------》2，遍历所有的单元格将data-firld相同（同一列）的单元格元素存储在数组中-----》3，定义一个：列中数据作为键的对象，统计一列中相同数据的个数作为值。------》遍历键值集合，对应看那列的所有单元格是否与键相同，相同-》设置这个单元格跨行数=集合键，如果有重复相同键的单元格就将这个单元格隐藏。
需要注意：
改进：第一列的合并
思路： 第一列的思路同上面，用一个对象存储第一列那个合并行的对象（即知道了第一列合并情况，后面列就以这个为基准）eg[7,2]。------》获得存储需要合并列的所有单元格的对象，通过基准去确定需要遍历单元格对象的范围，在范围内遍历：确定在这个范围内单元格需要怎么合并，待所有的单元格遍历完，就确定了这列需要合并的情况eg：[2,5,2]<这一列需要先合并2行再5行再2行>----------》进行合并：又[2,5,2]为基准去确定遍历单元格的范围（eg：2------遍历0~1将0的行设置合并行为2，其他单元格就设置style.display = "none"。5--------遍历2~6将2的单元格设置合并5行，其他单元格设置style.display = "none"。。。。）
<script type="text/javascript">
/**
* name layui合并tbody中单元格的方法
* @param tableId 表格的id属性
* @param fieldName 要合并的列field值
* @desc 此方式适用于没有列冻结的单元格合并
*/
function tableRowSpanNoFixedCol(tableId, fieldName) {
if (!tableId && !fieldName) {
console.log('tableId, fieldName为必填项');
return false;
}
// 获取页面中全部的表格元素
var allTableNode = document.getElementsByClassName("layui-table-view");
// 获取lay-id属性为tableId的表格元素的
var targetTableNode = null;
if (allTableNode.length > 0) {
for (var index = 0, length = allTableNode.length; index < length; index++) {
// 通过lay-id属性过滤表格元素
var tableLayId = allTableNode[index].getAttribute("lay-id");
if (tableLayId === tableId) {
targetTableNode = allTableNode[index];
break;
}
}
}
if (!targetTableNode) {
console.log('没有找到ID为：' + tableId + '的表格, 请升级您的layui版本');
return false;
}
// 开始合并单元格操作
var tBodyNode = targetTableNode.getElementsByClassName("layui-table-body")[0];
var tdNodes = tBodyNode.getElementsByTagName("td");//获得表格所有td--->单元格数
var combinedata = {};//定义合并数
for (var t = 0; t < fieldName.length; t++) {
console.log("fieldName[t]= "+fieldName[t]);
var childFilterArr = [];
// 获取data-field属性为fieldName的td
for (var i = 0; i < tdNodes.length; i++) {
if (tdNodes[i].getAttribute("data-field") === fieldName[t]) {//遍历每个td
childFilterArr.push(tdNodes[i]);//将需要比较值的单元格放到数组中（即：将同一列的单元格放到数组中）
}
}
// 获取td的个数和种类
var childFilterTextObj = {};//定义对象变量
var childFilterArrLength = childFilterArr.length;
if(t ==0){
for (var j = 0; j < childFilterArrLength; j++) {//统计一列中，定义值集合并确定相同值个数
var childText = childFilterArr[j].textContent;//获取td的值
if (childFilterTextObj[childText] === undefined) {//获取childFilterTextObj对象的[childText]属性
childFilterTextObj[childText] = 1;
} else {
var num = childFilterTextObj[childText];
childFilterTextObj[childText] = num * 1 + 1;
}
}
combinedata = childFilterTextObj;
// 给获取到的td设置合并单元格属性
for (var key in childFilterTextObj) {//遍历对象：根据key键去遍历
var tdNum = childFilterTextObj[key];
var canRowSpan = true;
var needChangeBackGroundNodes = [];
var addEventNode = null;
for (var h = 0; h < childFilterArrLength; h++) {
if (childFilterArr[h].textContent === key) {
needChangeBackGroundNodes.push(childFilterArr[h]);
if (canRowSpan) {
childFilterArr[h].setAttribute("rowspan", tdNum);
addEventNode = childFilterArr[h];
canRowSpan = false;
} else {
childFilterArr[h].style.display = "none";
}
}
}
/*
// 以下为单元格鼠标悬浮样式修改(使用闭包)
(function (addEventNode, needChangeBackGroundNodes) {
addEventNode.onmouseover = function () {
for (var index = 0, length = needChangeBackGroundNodes.length; index < length; index++) {
needChangeBackGroundNodes[index].parentNode.style.background = "#f2f2f2"; // 我这里的单元格鼠标滑过背景色为layui默认，你可以更改为你想要的颜色。
}
};
addEventNode.onmouseout = function () {
for (var index = 0, length = needChangeBackGroundNodes.length; index < length; index++) {
needChangeBackGroundNodes[index].parentNode.style.background = "";
}
};
})(addEventNode, needChangeBackGroundNodes);*/
}
}else{
console.log(" ~~~~~~~~~~~~~~"+t);
console.log(" ~~~~~~~~~~~~~~"+JSON.stringify(combinedata));
var sum =0;
var h =0;
var data =[];
for (var key in combinedata) {//以第一列的合并情况为标准
var temporary ={};
sum += combinedata[key];
for(;h<sum;h++){
var childText = childFilterArr[h].textContent;//获取td的值
if (temporary[childText] === undefined) {//获取childFilterTextObj对象的[childText]属性
temporary[childText] = 1;
} else {
var num = temporary[childText];
temporary[childText] = num * 1 + 1;
}
}
for( var key in temporary){
data.push(temporary[key]);
console.log(key+" : "+temporary[key]);
}
}
console.log(" ~~~~~~~~~~~~~~"+JSON.stringify(data));
sum =0;
h =0;
for( var s=0;s<data.length;s++){
sum += data[s];
var canRowSpan = true;
for (; h < sum; h++) {
if (canRowSpan) {
childFilterArr[h].setAttribute("rowspan", data[s]);
canRowSpan = false;
} else {
childFilterArr[h].style.display = "none";
}
}
}
}
}
}
</script>