Javascript 类似于jqGrid中的treegrid

我只想在需要时扩展一棵树

例如：

OS-Type

是一个叶子节点，它不展开，但是

内存

有子类别，所以它展开

那么，我应该用什么来实现类似的功能呢？因为在jqGrid子网格中，每一行都有一个扩展，我不想在这里使用

我的代码（取自您的示例）

如果子类别==envVariable，则应显示一个

+

符号以展开

这就是我到目前为止的想法，我的

Config1

和

Config2

列也不会出现

在上图中，

SSASERVERLOGSDIR

，

SSABIN

和

tusc.tusc RUN

应位于

envVariable

下，检查子类别==envVariable

envariable

将不具有任何

Config1

和

Config2

值

已更新特定行的颜色不变

loadComplete: function() {
            var i, names=this.p.groupingView.sortnames[0], l = names.length;
            for (i=0;i<l;i++) {
                if (names[i]==='envVariable') {
                    $(this).jqGrid('groupingToggle',this.id+"ghead_"+i);
                } else {
                    // hide the grouping row
                    $('#'+this.id+"ghead_"+i).hide();
                }
            }
            var getColumnIndexByName = function(grid, columnName) {
                var cm = grid.jqGrid('getGridParam','colModel'),i=0,l=cm.length;
                for (; i<l; i++) {
                    if (cm[i].name===columnName) {
                        return i; // return the index
                    }
                }
                return -1;
            };

            var iCol = getColumnIndexByName($(this),'isEqual'),
            cRows = this.rows.length, iRow, row, className;
            for (iRow=0; iRow<cRows; iRow++) {
                row = this.rows[iRow];
                className = row.className;
                if ($.inArray('jqgrow', className.split(' ')) > 0) { // $(row).hasClass('jqgrow')

                    if(row.cells[iCol].title=="false")   //here i identify isEqual's value
                    {
                        if ($.inArray('myAltRowClass', className.split(' ')) === -1) {
                            row.className = className + ' myAltRowClass';
                        }
                    }
                }
            }

        }

loadComplete:function（）{
变量i，name=this.p.groupingView.sortnames[0]，l=names.length；
对于（i=0；i，在我看来，您真正尝试实现的是按
子类别对数据进行分组。我严格建议您查看jqGrid的官方演示页面，看看它可以实现的不同可能性

您的代码还有一个常见问题。您在表单
属性[0]中的
colModel
项中使用
name
和
index
属性.firstValue“
，这是不允许的。
name
属性，如果是本地数据，也可以是
index
属性，不能包含任何特殊字符。读取JSON数据需要使用附加的
jsonmap
属性：

{ name: 'firstValue', index: 'firstValue', width: 350, jsonmap:'attribute.0.firstValue' },
{ name: 'secondValue', index: 'secondValue', width: 350,jsonmap:'attribute.0.secondValue' }

此外，还应定义另一列，用于对数据进行分组：

{ name: 'subCategory', index: 'subCategory' }

要使用分组，应在jqGrid定义中添加以下选项：

grouping: true,
groupingView: {
    groupField: ['subCategory'],
    groupOrder: ['desc'],
    groupDataSorted : true,
    groupColumnShow: [false],
    groupText: ['<b>{0} - {1} Item(s)</b>']
}

毕竟，您将拥有以下功能：


单击“envVariable”组分组标题中的“+”图标后，将显示详细信息：


您将找到相应的演示。我在
jsonReader
中添加了
page:function（）{return 1；}
，以显示正确的页码

如果只想在分组标题中看到“envariable”文本，则应将
groupText:['{0}-{1}项]
替换为
groupText:['{0}']
很抱歉，但是和工作方式非常不同。您应该以相应的形式准备输入，例如使用树状网格。在编写代码之前，您至少应该查看jqGrid文档的相应部分。此外，如果您只需更准确地描述您拥有的信息类型，if将非常有用ve，数据是否来自数据库，您希望如何显示它或可能如何编辑它等等。@Oleg:我将返回所需内容的详细表示：）@Oleg:请检查我的问题，我提供了一个图像，以更好地描述我的问题“树扩展”下的含义？节点是否显示在展开的表单中？您使用的是树网格的哪个输入？有一些隐藏的树网格列需要填充。这些列中有一列是“展开的”。如果在列中放置“false”，则节点将显示为未展开的。请使用查看。如果要隐藏“+”有子网格的某些网格行的图标是可能的。如何根据其
isEqual
值false将行背景颜色设置为单色？就像在我的顶部图像中一样，哪一行的
isEqual
为
false
，颜色为
深粉色（这意味着特定行具有不同的数据）@Abhishek Simon:看或。要更改单元格的背景色，请看和。Danke，我是nehmen einen Blick:）我正在学习德语，你的英语相当好。我也遵循了jSON中确定的
isEqual
值作为
false
，但不知何故它并没有更改行的背景色。请看我更新的问题。
{ name: 'subCategory', index: 'subCategory' }

grouping: true,
groupingView: {
    groupField: ['subCategory'],
    groupOrder: ['desc'],
    groupDataSorted : true,
    groupColumnShow: [false],
    groupText: ['<b>{0} - {1} Item(s)</b>']
}

loadComplete: function() {
    var i, names=this.p.groupingView.sortnames[0], l = names.length;
    for (i=0;i<l;i++) {
        if (names[i]==='envVariable') {
            $(this).jqGrid('groupingToggle',this.id+"ghead_"+i);
        } else {
            // hide the grouping row
            $('#'+this.id+"ghead_"+i).hide();
        }
    }
}