如何使用带树扩展的dgrid的renderRow方法的一个方面.

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);
});

});

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

问候,

Answer 1

你的问题与Treemixin的使用没有直接关系; 事实上,在第一次渲染时没有它就会遇到同样的问题,因为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通话中正确使用).