4

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

4

1 回答 1

7

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

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

在此处输入图像描述

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

非叶树节点有两个图标：一个是折叠形式，另一个是展开形式。没有简单的方法来更改每个 jqGrid 配置的图标，但是您可以通过在loadComplete我建议的方法expandNode中编写额外的 JavaScript 代码来实现要求。collapseNode

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

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

更新：我考虑了更多关于树图标的问题，并将代码修改为新的演示。

我认为能够像叶子一样定义树节点的图标会更实用。因为需要指定两个图标，所以可以用逗号分隔折叠图标和展开图标的类。例如：icon: "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;
    }
});

更新：我发布了将上述功能添加到 TreeGrid的功能请求和拉取请求。

于 2012-02-28T12:38:57.513 回答