ExtJS6 合并单元格

/**
 *监听store的load
 * @param grid 对应store的grid
 * @param cols 不需要合并的列[] 列默认第一列是0
 * @param colsn 需要合并的列[]
 * @param pixel 像素
 */
load: function (grid, cols, colsn, pixel) {
    var myMask = new Ext.LoadMask({
        msg: "正在加载",
        target: grid
    })
    myMask.show();
    var id = grid.getView().getId();
    //获取div《table》
    var gridview = document.getElementById(id);
    //获取所有的tr[]
    var trArray = gridview.getElementsByTagName('tr');
    //把所有的行都放入第一个table 并把原来的列删除
    var length = trArray.length;
    if (length <= 1) {
        myMask.destroy();
        return;
    }
    for (var i = 1; i < length; i++) {
        //指定位置插入html文本
        trArray[i - 1].insertAdjacentHTML("afterend", trArray[i].innerHTML);
        trArray[i + 1].remove();
    }
    //所有列插入分割线
    var html = "<hr style='height:0.1px;border:none;border-bottom:#e9e9e9 1px solid;'>";//分割线
    for (var i in cols) {
        for (var j = 1; j < length; j++) {
            trArray[j].childNodes[cols[i]].insertAdjacentHTML("afterbegin", html);
        }
    }
    //合并单元格 都是从零开始
    this.span(trArray, colsn, pixel);
    myMask.destroy();
},
/**scrollable false
 *columnLines true
 * @param trArray 需要合并的<tr>
 * @param cols 那些列需要合并 列初始行是0
 * @param pixel margin-top像素
 */
span: function (trArray, cols, pixel) {
    //通用方法行合并单元格
    var length = trArray.length;
    var html = "<hr style='height:0.1px;border:none;border-bottom:#e9e9e9 1px solid;'>";//分割线
    for (var i in cols) {
        var column = cols[i];//列
        var k = 0;//开始合并的列
        for (var i = 0; i < length; i++) {
            var num = 1;//需要合并的列数 默认是一列
            var data = trArray[i].childNodes[column].innerText;
            for (var j = i + 1; j < length; j++) {
                if (data == trArray[j].childNodes[column].innerText) {
                    trArray[j].childNodes[column].style.display = 'none';
                    if (j == length - 1) {
                        k = j;
                    }
                    num++;
                } else {
                    k = j;
                    break;
                }
            }
            trArray[i].childNodes[column].setAttribute('rowSpan', num);
            trArray[i].getElementsByTagName("div")[column].setAttribute("style", "text-align:center");
            if (num > 1) {
                trArray[i].getElementsByTagName("div")[column].style.marginTop = "" + pixel * (num - 1) + "px";
            }
            trArray[k].childNodes[column].insertAdjacentHTML("afterbegin", html);
            if (k == length - 1) {//说明此时i是最后一行
                trArray[k].getElementsByTagName("div")[column].setAttribute("style", "text-align:center");
                break;
            }
            i = k - 1;
        }
    }
},
猜你喜欢
