jqgrid treegrid 为每个树级自定义 css-class [英] jqgrid treegrid custom css-class for each tree-level

问题描述

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

解决方案

我觉得这个问题很有趣，但我认为可以更好地为树节点使用单独的图标.如果您确实需要为每行设置 CSS 样式，我可以转发到 改变叶子的图标会很容易.

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

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

var $grid = $("#treegrid"),orgExpandNode = $.fn.jqGrid.expandNode,orgCollapseNode = $.fn.jqGrid.collapseNode;$grid.jqGrid({……加载完成:函数(数据){var item, i, l = data.length ||0;对于 (i = 0; i < l; i++) {项目=数据[i]；if (!item.isLeaf && (item.level === "0" || item.level === 0)) {如果(item.expanded){$("#" + item.id + "div.treeclick").removeClass("ui-icon-triangle-1-s").addClass("ui-icon-carat-1-s");} 别的 {$("#" + item.id + "div.treeclick").removeClass("ui-icon-triangle-1-e").addClass("ui-icon-carat-1-e");}}}}});$.jgrid.extend({扩展节点:函数(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");}返回 ret;},折叠节点:函数(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");}返回 ret;}});

更新:我稍微考虑了一下树形图标的问题，将代码修改为新的演示.

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

var $grid = $("#treegrid"),orgExpandNode = $.fn.jqGrid.expandNode,orgCollapseNode = $.fn.jqGrid.collapseNode,changeTreeNodeIcon = 功能(项目){var 图标，$div，id；if (!item.isLeaf && typeof item.icon === "string") {图标 = item.icon.split(',');if (icons.length === 2) {id = item[this.p.localReader.id] ||项目[this.p.jsonReader.id];$div = $("#" + $.jgrid.jqID(id) + "div.treeclick");如果(item.expanded){$div.removeClass(图标[0]).removeClass("ui-icon-triangle-1-s").addClass(图标[1]);} 别的 {$div.removeClass(图标[1]).removeClass("ui-icon-triangle-1-e").addClass(icons[0]);}}}};$grid.jqGrid({……加载完成:函数(数据){var item, i, l = data.length ||0;对于 (i = 0; i < l; i++) {项目=数据[i]；changeTreeNodeIcon.call(this, item);}}});$.jgrid.extend({扩展节点:函数(rc){var ret = orgExpandNode.call(this, rc);changeTreeNodeIcon.call(this[0], rc);返回 ret;},折叠节点:函数(rc){var ret = orgCollapseNode.call(this, rc);changeTreeNodeIcon.call(this[0], rc);返回 ret;}});

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

I have a deep tree and for user it's difficult to distinguish the levels. Is it possible to have custom css-classes for each level? For example firstlike h1 and bold, second bold ...

解决方案

I find the question interesting, but I think that one can better use individual icons for the tree nodes. If you do need to set CSS style per row I can you forward to the answer and this one. You should just change the test criteria in the demos to test the content of the hidden level column.

So I created the demo which demonstrate how you can set individual icons per node level:

First of all I should mention, that TreeGrid supports individual icons for leafs out-of-the-box. You can just add icon property to the posted data. The value of the property should be the CSS class which will be added to the div which represent the icon. For example icon: "ui-icon-star". The standard class for the icon is "ui-icon-radio-off". Additionally the div receive the classes "ui-icon tree-leaf treeclick". So if you find the icon which you need in the standard jQuery UI icons the changing if the icon of the leaf will be very easy.

Non-leaf tree nodes have two icons: one in the collapsed form and another in the expanding form. There are no simple way to change the icons per jqGrid configuration, but you can implement the requirement by writing an additional JavaScript code inside of loadComplete and with respect of chaining (overwriting or subclassing) of expandNode and collapseNode method like I suggested here.

In the demo I just changed the icons of the top-level tree nodes. In the same way you can change icons on any other level. Below you find the most important parts of the code from my demo:

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

UPDATED: I thought a little more about the problem of tree icons and modified the code to the new demo.

I decided that it would be more practicable to be able to define icons of the tree node exactly like for the leafs. Because one need to specify two icons one can separate the classes for collapsed and expanded icons by comma. For example: icon: "ui-icon-carat-1-e,ui-icon-carat-1-s". The code can be rewritten to the following:

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

UPDATED: I posted the feature request and the pull request which add the described above functionality to TreeGrid.

这篇关于jqgrid treegrid 为每个树级自定义 css-class的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！