UAS2.0_DEV_TEST/app/view/grid/mergeColumn/MergeColumnGrid.js

/*
 * @Description: 
 * @Author: hy
 * @Date: 2019-08-12 17:59:33
 * @LastEditTime: 2019-08-15 14:24:07  
 */
Ext.define('uas.view.grid.mergeColumn.MergeColumnGrid', {
    extend: 'Ext.grid.Panel',
    xtype: 'mergeColumnGrid',
    cls:'x-merge-grid',
    columnLines: true,
    sortableColumns: false,
    bufferedRenderer:false,

    initComponent: function () {
        var me = this;
        Ext.apply(me, {
            store: Ext.create('uas.store.Companies',{})
        });
        me.callParent(arguments);
        me.store.load(function(records, operation, success) {
            const grid = me;
            //1000条数据 100延迟 超过10000条数据 延迟固定为1秒
            let time = records.length*0.1>1000?1000:records.length*0.1;
            var myMask = new Ext.LoadMask({
                msg: "正在合并单元格...",
                target: grid.ownerCt
            });
            myMask.show();
            setTimeout(() => {
               grid.mergeCells(grid,[...new Array(grid.columns.length).keys()]); 
               myMask.destroy(); 
            }, time);
            
        });
    },
   
    /*
     *  合并列
     *  cols 需要合并的列index
     */
    mergeCells:function(grid,cols){  
        var id = grid.getView().getId();
        //清除所有监听事件  避免一些bug
        grid.getView().clearListeners();
        //获取view
        var gridview = document.getElementById(id);
        //获取所有的tr[]
        var trArray = gridview.getElementsByTagName('tr');
        //只有一行时不合并
        var length = trArray.length;
        if (length <= 1) {
            return;
        }
        //把所有的行都放入第一个table 并把原来的列删除
        for (var i = 1; i < length; i++) {
            //指定位置插入对应table行的html文本
            trArray[i - 1].insertAdjacentHTML("afterEnd", trArray[i].innerHTML);
            trArray[i + 1].remove();
        }

        //margin像素 根据该合并grid的每一行的高度而定
        const pixel = 25;

        //通用方法行合并单元格
        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;
            }
        }
    },

    columns: [{
        text: 'Company',
        dataIndex: 'name',

        flex: 1,
        sortable: true
    }, {
        text: 'Stock Price',

        columns: [{
            text: 'Price',
            dataIndex: 'price',

            width: 75,
            sortable: true,
            formatter: 'usMoney'
        }, {
            text: 'Change',
            dataIndex: 'priceChange',

            width: 80,
            sortable: true
        }, {
            text: '% Change',
            dataIndex: 'priceChangePct',

            width: 100,
            sortable: true
        }]
    }, {
        text: 'Last Updated',
        dataIndex: 'priceLastChange',

        width: 115,
        sortable: true,
        formatter: 'date("m/d/Y")'
    }]
});