Question

有没有办法在树形网格的子级别上应用Alternative row css？

目前，treePanel viewConfig上的stripeRows配置只会使所有内容变为灰色和白色，但很难将子行与父行区分开来。

理想情况下，我想让父对象以一种方式替换颜色，子行以另一种方式替换颜色。

我正在考虑使用“getRowClass”方法编写一个函数来手动更新行类。我想知道是否有更清洁的方式。

Answer 1

getRowClass看起来很适合执行行属性更改。您可以使用getDepth（）函数获取节点的深度：

var grid = Ext.create ('Ext.tree.Panel', {
    xtype: 'tree-grid',
    viewConfig: {
        getRowClass: function(record, rowIndex, rowParams, store) {
            return 'node-depth-' + record.getDepth()
        }
    }
...

并使用css：

.node-dept-1 .x-grid-cell { 
    background-color: white; 
}
.node-depth-2 .x-grid-cell { 
    background-color: #dddddd;
}
...

找到解决方案here

Answer 2

我在模型上使用了iconCls属性来通过图标区分行。这不仅有利于分离父/子行，还有子行本身。

我使用模型映射技巧为我提供了不同的行类型值，如下所示：

{name:'iconCls', mapping:'type.name'}

然后还添加了一个css类来支持不同的类型名称：

.cables, .Cable {
    background-image: url(../images/silk/cables.jpg) !important;
}

希望这会有所帮助。

Extjs自定义TreeGrid行CSS

2 个答案: