ext grid 合并行、列

孤城冰

于 2019-03-15 10:06:06 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端web

本文链接：https://blog.youkuaiyun.com/woyizhizaizhaoni/article/details/88565127

前端web 专栏收录该内容

39 篇文章

订阅专栏

本文介绍了一种使用ExtJS框架中gridPanel组件进行行合并的方法，通过自定义函数spanfun实现对指定行和列的合并操作。文章详细解释了如何在加载数据时应用此函数，以达到美观和节省空间的目的。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

grid=ext.getCmp('gridPanel')

row=0;要合并的行的起始位置数，

col=0;要合并的列的起始位置数，

type //row 行合并 col列合并合并类型

num=3；要合并的行数

function spanfun(grid,row,col,type,num){

    var tds="";
    switch (type) {
        case 'row':
            tds = Ext.get(grid.view.getNode(row)).query('td');
            Ext.get(tds[col]).set({ rowspan: num });
            Ext.get(Ext.get(tds[col])).setStyle({ 'vertical-align': 'middle' });
            for (i = row + 1; i < row + num; i++) {
                Ext.get(Ext.get(grid.view.getNode(i)).query('td')[col]).destroy();
            }
            break;
        case 'col':
            tds = Ext.get(grid.view.lockedView.getNode(row)).query('td');
            Ext.get(tds[col]).set({ colspan: num });
            break;
    }
}

调用函数：

Ext.data.StoreManager.lookup("gridStore").on('load',function(store, records, success, eOpts){
    num=store.getProxy().getReader().rawData.NUM;
    listLeng=Ext.getStore('gridStore').getProxy().getReader().rawData.list.length
});

Ext.getCmp("gridpanel").getStore().on('load',function(){
    var len=listLeng/num;
    for(var j=0;j<=listLeng;){
        spanfun(Ext.getCmp("gridpanel"),0,j,'row',num);
        j=j+num;
    }
    // spanfun(Ext.getCmp("gridpanel"),0,0,'row',num);
});