jquery - jqgrid treegrid 每个树级别的自定义 css 类

Question

我有一棵很深的树，对于用户来说很难区分级别。是否可以为每个级别设置自定义 css 类？例如，第一个像 h1 和粗体，第二个粗体...

Answer 1

我发现这个问题很有趣，但我认为可以更好地为树节点使用单独的图标。如果您确实需要设置每行的 CSS 样式，我可以转发到 the answer和 this one 。您只需更改演示中的测试标准即可测试隐藏 level 列的内容。

所以我创建了the demo它演示了如何为每个节点级别设置单独的图标:

首先我应该提到，TreeGrid 支持开箱即用的叶子的单独图标。您只需将 icon 属性添加到发布的数据即可。该属性的值应该是 CSS 类，它将添加到代表图标的 div 中。例如图标:“ui-icon-star”。图标的标准类是“ui-icon-radio-off”。此外，div 还接收类“ui-icon tree-leaf treeclick”。所以如果你在标准 jQuery UI icons 中找到你需要的图标更改叶子的图标将非常容易。

非叶​​树节点有两个图标:一个处于折叠形式，另一个处于展开形式。没有简单的方法来更改每个 jqGrid 配置的图标，但您可以通过在 loadComplete 内部编写额外的 JavaScript 代码并考虑 expandNode 的链接(覆盖或子类化)来实现该要求 和 collapseNode 方法，就像我建议的 here .

在演示中，我只是更改了顶级树节点的图标。以同样的方式，您可以更改任何其他级别的图标。您可以在下面找到我的演示中代码中最重要的部分:

var $grid = $("#treegrid"),
    orgExpandNode = $.fn.jqGrid.expandNode,
    orgCollapseNode = $.fn.jqGrid.collapseNode;

$grid.jqGrid({
    ....
    loadComplete: function (data) {
        var item, i, l = data.length || 0;
        for (i = 0; i < l; i++) {
            item = data[i];
            if (!item.isLeaf && (item.level === "0" || item.level === 0)) {
                if (item.expanded) {
                    $("#" + item.id + " div.treeclick")
                        .removeClass("ui-icon-triangle-1-s")
                        .addClass("ui-icon-carat-1-s");
                } else {
                    $("#" + item.id + " div.treeclick")
                        .removeClass("ui-icon-triangle-1-e")
                        .addClass("ui-icon-carat-1-e");
                }

            }
        }
    }
});

$.jgrid.extend({
    expandNode: function (rc) {
        var ret = orgExpandNode.call(this, rc);
        if (!rc.isLeaf && (rc.level === "0" || rc.level === 0)) {
            $("#" + rc._id_ + " div.treeclick")
                .removeClass("ui-icon-triangle-1-s ui-icon-carat-1-e")
                .addClass("ui-icon-carat-1-s");
        }
        return ret;
    },
    collapseNode: function (rc) {
        var ret = orgCollapseNode.call(this, rc);
        if (!rc.isLeaf && (rc.level === "0" || rc.level === 0)) {
            $("#" + rc._id_ + " div.treeclick")
                .removeClass("ui-icon-triangle-1-e ui-icon-carat-1-s")
                .addClass("ui-icon-carat-1-e");
        }
        return ret;
    }
});

已更新:我对树形图标的问题进行了更多思考，并将代码修改为 the new demo .

我认为能够像叶子一样定义树节点的图标会更实用。因为需要指定两个图标，所以可以用逗号分隔折叠和展开图标的类。例如:图标:“ui-icon-carat-1-e,ui-icon-carat-1-s”。代码可以重写为以下内容:

var $grid = $("#treegrid"),
    orgExpandNode = $.fn.jqGrid.expandNode,
    orgCollapseNode = $.fn.jqGrid.collapseNode,
    changeTreeNodeIcon = function (item) {
        var icons, $div, id;
        if (!item.isLeaf && typeof item.icon === "string") {
            icons = item.icon.split(',');
            if (icons.length === 2) {
                id = item[this.p.localReader.id] || item[this.p.jsonReader.id];
                $div = $("#" + $.jgrid.jqID(id) + " div.treeclick");
                if (item.expanded) {
                    $div.removeClass(icons[0])
                        .removeClass("ui-icon-triangle-1-s")
                        .addClass(icons[1]);
                } else {
                    $div.removeClass(icons[1])
                        .removeClass("ui-icon-triangle-1-e")
                        .addClass(icons[0]);
                }
            }
        }
    };

$grid.jqGrid({
    ....
    loadComplete: function (data) {
        var item, i, l = data.length || 0;
        for (i = 0; i < l; i++) {
            item = data[i];
            changeTreeNodeIcon.call(this, item);
        }
    }
});

$.jgrid.extend({
    expandNode: function (rc) {
        var ret = orgExpandNode.call(this, rc);
        changeTreeNodeIcon.call(this[0], rc);
        return ret;
    },
    collapseNode: function (rc) {
        var ret = orgCollapseNode.call(this, rc);
        changeTreeNodeIcon.call(this[0], rc);
        return ret;
    }
});

已更新:我发布了 the feature request和 the pull request它将上述功能添加到 TreeGrid。