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

How to make a table-like structure with row/colspans using ExtJS Grid 4.1

本文关键字：结构 Grid ExtJS 何使用      更新时间：2023-09-26

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

解决方案一：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!
}`

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

我知道的四个缺点：

  • 您必须始终获得正确的显示量：none适用于您的colSpan和rowSpan。
  • 您不能轻松地将其用于特殊列（数字列，日期列，检查列），因为您可以覆盖其常规渲染器。
  • 您的数据必须采用"具有基元值的记录"形式，因此当您加载存储时，您必须遍历树并生成记录。
  • 在 ExtJS6 中不再工作;不确定 ExtJS 5。

解决方案二：嵌套网格

您可以轻松地将网格渲染到网格的 RowExpander 插件中。

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 中。

相关文章：