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

Question

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

Answer 1

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

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

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

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

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

collapseNode

更新：我更多地考虑了树形图标的问题，并将代码修改为the new 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; } }); 。代码可以重写为以下内容：

icon: "ui-icon-carat-1-e,ui-icon-carat-1-s"

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