一，凍結列，凍結行？
被凍結的列或行，不會隨着滾動條的滑動而滾動。
二，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>