extjs6中grid合并单元格

    mergeGrid: function (me) {
        var grid = this,
            colIndexArray = [0, 1, 4],
            isAllSome;
        me.store.on('load', function () {
            isAllSome = isAllSome == undefined ? true : isAllSome; // 默认为true
            // 1.是否含有数据
            var gridView = document.getElementById(grid.getView().getId() + '-body');
            if (gridView == null) {
                return;
            }
            // 2.获取Grid的所有tr
            var trArray = [];
            var tableArray = gridView.getElementsByTagName('table');
            if (tableArray != null)
                Ext.each(tableArray, function (table) {
                    table.setAttribute("style", "border:0;background-color: white");
                });
            trArray = gridView.getElementsByTagName('tr');
            var tdArray = gridView.getElementsByTagName('td');
            var count = 1;
            if (tdArray != null) {
                Ext.each(tdArray, function (td) {
                    td.style.borderBottom = "1px solid #e9e9e9";
                });
            }
            // 3.进行合并操作
            if (isAllSome) { // 3.1 全部列合并:只有相邻tr所指定的td都相同才会进行合并
                var lastTr = trArray[0]; // 指向第一行
                // 1)遍历grid的tr,从第二个数据行开始
                for (var i = 1, trLength = trArray.length; i < trLength; i++) {
                    var thisTr = trArray[i];
                    var isPass = true; // 是否验证通过
                    var index = i % 2 != 0 ? i / 2 : i / 2 - 1;//显示的位置
                    // 2)遍历需要合并的列
                    for (var j = 0, colArrayLength = colIndexArray.length; j < colArrayLength; j++) {
                        var colIndex = colIndexArray[j];
                        // 3)比较2个td的列是否匹配,若不匹配,就把last指向当前列
                        if (lastTr.childNodes[colIndex].innerText != thisTr.childNodes[colIndex].innerText) {
                            for (var n = 0; n < colIndexArray.length; n++) {
                                colIndex = colIndexArray[n];
                                thisTr.childNodes[colIndex].style["borderTop"] = "1px solid #e9e9e9";
                                trArray[index].childNodes[colIndex].innerHTML = lastTr.childNodes[colIndex].innerHTML;
                                lastTr.childNodes[colIndex].innerHTML = "";
                                trArray[index].childNodes[colIndex].style["textAlign"] = 'center';
                                lastTr.childNodes[colIndex].style["borderBottom"] = "";
                                //if (colIndex == 0) {
                                //    lastTr.childNodes[colIndex].style["width"] = "79px";
                                //}
                                /*else if (colIndex == 0) {//复选框 修改 2019-03-20 wlp
                                    lastTr.childNodes[colIndex].style["width"] = "28px";
                                    trArray[index].childNodes[colIndex].style["width"] = "25px";
                                }*/
                            }
                            lastTr = thisTr;
                            isPass = false;
                            break;
                        }
                    }
                    // 4)若colIndexArray验证通过,就把当前行合并到'合并行'
                    if (isPass) {
                        for (var j = 0, colArrayLength = colIndexArray.length; j < colArrayLength; j++) {
                            var colIndex = colIndexArray[j];
                            thisTr.childNodes[colIndex].style["borderBottom"] = "";
                            
                            thisTr.childNodes[colIndex].innerHTML = "";
                            //if (colIndex == 0) {
                            //    thisTr.childNodes[colIndex].style["width"] = "79px";
                            //}
                            /*else if (colIndex == 0) {
                                thisTr.childNodes[colIndex].style["width"] = "28px";
                            }*/

                        }
                    }
                }
            }
            
        });

    }

你可能感兴趣的:(extjs)