如何使用 ExtJS Grid 4.1 制作具有行/列跨度的类表结构

Posted 2023-02-26

【中文标题】如何使用 ExtJS Grid 4.1 制作具有行/列跨度的类表结构

【英文标题】：How to make a table-like structure with row/colspans using ExtJS Grid 4.1

【发布时间】：2016-01-20 17:33:18

【问题描述】：

我需要使用具有 colspan 和 rowspan 功能的 ExtJS 4.1 网格来实现一个逻辑。

【问题讨论】：

您的标题不是特别具有描述性，因此我已对其进行了修改 - 请随时进一步修改，以描述您想要做什么。此外，如果您可以展示您尝试过的内容，那将有很大帮助。目前，您似乎已经为您的整个项目提出了要求，人们肯定不会为您这样做。如果您可以修改您的问题以包含可能的最小问题，一旦解决，您就可以完成剩下的工作，那将是理想的。

【参考方案1】：

解决方案一：ExtJS Grid with rowSpan/colSpan

如果你使用普通的 ExtJS 网格，每个参数值一行，你可以（ab）以某种方式使用渲染器：

renderer:function(value, meta, record, rowIndex, colIndex, store, view) 
    var columnManager = view.ownerCt.getColumnManager(),
        previousRecord = store.getAt(rowIndex-1),
        nextRecord = store.getAt(rowIndex+1),
        column = columnManager.getHeaderAtIndex(colIndex),
        previousColumn = columnManager.getHeaderAtIndex(colIndex-1),
        nextColumn = columnManager.getHeaderAtIndex(colIndex+1),
        cellAbove = view.getCell(previousRecord,column),
        cellBelow = view.getCell(nextRecord,column),
        cellLeft = view.getCell(record, previousColumn),
        cellRight = view.getCell(record, nextColumn);
    ...
    if(someCondition) 
        meta.tdAttr='rowSpan=4';
     else if (someOtherCondition /* any of the previous three records has someCondition */) 
        meta.tdStyle='display:none';
    
    return value; // Don't forget this, or else your cell is empty!
`

以类似的方式，我曾经实现了一个渲染器，它可以合并具有相同内容的相邻单元格，因为我不得不替换 MSFlexGrid with MergeCells=flexMergeFree。

我知道的四个缺点：

您必须始终为 colSpan 和 rowSpan 获得正确的 display:none 数量。 您不能轻松地将它与特殊列（numbercolumns、datecolumns、checkcolumns）一起使用，因为您覆盖了它们的正常渲染器。 您的数据必须采用“带有原始值的记录”形式，因此当您加载商店时，您必须遍历树并生成记录。 将不再在 ExtJS6 中工作；不确定 ExtJS 5。

解决方案二：嵌套网格

您可以轻松render a grid into a grid's RowExpander plugin。

plugins: [
    ptype: "rowexpander",
    rowBodyTpl: ['<div id="SessionInstructionGridRow-ClientSessionId" ></div>']
    listeners:
        expandbody:function() 
            var targetId = 'SessionInstructionGridRow-' + record.get('ClientSessionId');
            if (Ext.getCmp(targetId + "_grid") == null) 
                var sessionInstructionGrid = Ext.create('TS.view.client.SessionInstruction', 
                    renderTo: targetId,
                    id: targetId + "_grid"
                );
                rowNode.grid = sessionInstructionGrid;
                sessionInstructionGrid.getEl().swallowEvent(['mouseover', 'mousedown', 'click', 'dblclick', 'onRowFocus']);
                sessionInstructionGrid.fireEvent("bind", sessionInstructionGrid,  ClientSessionId: record.get('ClientSessionId') );
            
        
    
],

主要缺点是它看起来确实像网格中的网格，而不是带有 rowSpan 和 colSpan 的单个网格；因此它与您的屏幕截图相去甚远。但这就是我今天如何实现包含数组的字段内容的显示。如果您想显示结构化数据（对象），也可以将 propertygrid 渲染到 rowExpander。

【讨论】：

我还需要给定问题的逻辑/解决方案