Extjs自定义TreeGrid行CSS | Extjs自定义TreeGrid行CSS

本文介绍了Extjs自定义TreeGrid行CSS的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

是否可以在树形网格的子级上应用替代行CSS"?

Is there a way to apply Alternative row css on the child level of a tree grid?

当前，treePanel viewConfig上的stripeRows配置仅使所有内容变为灰色和白色，但是很难将子行与父行区分开.

Currently the stripeRows config on the treePanel viewConfig just makes everything grey and white, but it is difficult to distinguish the child rows from the parent rows.

理想情况下，我想使父对象以一种方式替代颜色，子行以另一种方式替代颜色.

Ideally I'd like to make the parent objects alternate colors one way and the child rows alternate colors another way.

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

I was thinking of writing a function using the "getRowClass" method to manually update the row class. I was wondering if there was a cleaner way.

推荐答案

getRowClass看起来不错，可以执行行属性更改.您可以使用getDepth()函数获取节点的深度:

The getRowClass looks good to perform row attributes change. You can get a node's depth with the getDepth() function:

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

在此处找到的解决方案

Solution found here

这篇关于Extjs自定义TreeGrid行CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！