如何使用带有树扩展的 dgrid 执行 renderRow 方法的 aspect.after？

Question

我正在尝试使用带有 Tree 扩展名的 dgrid 来设置行的样式。为此，我按照https://github.com/SitePen/dgrid/issues/380 中的建议使用 aspect.after，如果您不使用 Tree 扩展，它会很好地工作。

但是对于 Tree 扩展，网格是在构造函数完成时渲染的，所以 aspect.after 没有效果。

我的代码是：

require([
    'dojo/_base/declare',
    'dgrid/OnDemandGrid',
    'dgrid/Tree',
    'dgrid/Keyboard',
    'dgrid/Selection',
    'dstore/Memory',
    'dojo/aspect',
    'dstore/Tree',
    'dgrid/extensions/ColumnResizer',
    'dojo/domReady!'
], function (declare,OnDemandGrid, tree, Keyboard, Selection, Memory,aspect,TreeStore,ColumnResizer)  {

var dataStore = new (declare([ Memory, TreeStore ]))({ data: $jsonData });

var CustomGrid = declare([ OnDemandGrid, tree, Keyboard, Selection, ColumnResizer ]);

var columns = $jsonHeadTitles;
columns[0][0] = tree(columns[0][0]);

var grid = new CustomGrid({
        className: 'dgrid-autoheight',
        collection: dataStore.filter( { parent: 0 }),
        columns: columns,
        noDataMessage: 'Sin registros',
        shouldExpand: function(){ return true; },
        selectionMode: 'single',
        cellNavigation: false,
        formatterScope: { html: function(item){ return item; }}

}, '$nombre');

aspect.after(grid, 'renderRow', function(row, args) {
    var object = args[0];
    if (!empty(object.parent)) {
        row.className += ' gridchildren';
    }
    return row;
});

 grid.on('dgrid-error', function(event) {
    console.error(event.error.message);
});

});

我们如何使用树扩展来设置行的样式？

问候，

Answer 1

您的问题与Tree mixin 的使用没有直接关系；事实上，如果没有它，在第一次渲染时你会遇到同样的问题，因为在这种情况下，aspect.after 在初始渲染运行后连接（因为网格立即启动并且正在使用的存储是同步的）。

有几个选项可以解决这个问题。

一种选择是最初将collection 设置为null，然后仅在调用aspect.after 后将其设置为您的实际商店。

另一个方法是不要将网格与文档流中的元素绑定，在这种情况下，在您手动调用 grid.startup 之前不会发生初始渲染，这样您就有机会提前调用 aspect.after。

或者，您可以将逻辑应用到您用来将功能混合到网格中的 declare 调用中，而不是在创建实例后使用 aspect。例如：

var Grid = declare([ OnDemandGrid, Tree, Keyboard, Selection, ColumnResizer ], {
    renderRow: function (object) {
        var rowElement = this.inherited(arguments);
        if (!empty(object.parent)) {
            rowElement.className += ' gridchildren';
        }
        return rowElement;
    }
});

另外值得注意的是：将列传递给tree（就像您在创建网格之前所做的那样）在 dgrid 0.4 中是不正确的。 Tree 现在是一个 mixin（您已经在 declare 调用中正确使用了它）。