jqgrid treegrid为每个树级别定制css类 [英] jqgrid treegrid custom css-class for each tree-level

问题描述

我有一棵深树，对用户来说很难区分等级.是否可以为每个级别定制css类?例如firstlike h1和粗体，第二个粗体...

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 ...

推荐答案

我发现这个问题很有趣，但我认为可以更好地将单个图标用于树节点.如果确实需要为每行设置CSS样式，我可以转发给答案和

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:

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

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.

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

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.

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

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类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！