jqgrid treegrid为每个树级自定义css-class

Question

我有一棵很深的树,对于用户来说,很难区分水平.是否可以为每个级别提供自定义css类？例如,首先是h1和粗体,第二个是粗体......

Answer 1

我发现这个问题很有意思,但我认为可以更好地使用树节点的单个图标.如果你确实需要为每行设置CSS样式,我可以转发答案和这一行.您应该只更改演示中的测试条件以测试隐藏level列的内容.

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

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

非叶树节点有两个图标:一个处于折叠形式,另一个处于展开形式.没有简单的方法可以更改每个jqGrid配置的图标,但是您可以通过编写一个额外的JavaScript代码来实现该需求loadComplete,expandNode并在此处提供链接(覆盖或子类化)和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;
    }
});

更新:我发布了功能请求和pull请求,它将上述功能添加到TreeGrid.