jqgrid treegrid为每个树级别定制css-class
我有一棵深树，对于用户来说，很难区分这些级别。 是否可以为每个级别设置自定义css类？ 例如，首先是h1和粗体，第二个是粗体……
我发现这个问题很有意思，但我认为可以更好地为树节点使用单独的图标。 如果你确实需要为每行设置CSS样式，我可以转发答案和这一行 。 您应该只更改演示中的测试条件以测试隐藏level列的内容。
所以我创建了演示程序 ，演示了如何为每个节点级别设置单独的图标：
首先，我要提一下，TreeGrid支持开箱即用的单独图标。 您只需将icon属性添加到发布的数据即可。 属性的值应该是CSS类，它将添加到代表图标的div中。 例如icon: "ui-icon-star" 。 图标的标准类是“ui-icon-radio-off”。 此外，div接收类“ui-icon tree-leaf treeclick”。 因此，如果您在标准jQuery UI图标中找到所需的图标，则更改叶子的图标将非常容易。
非叶树节点有两个图标：一个处于折叠forms，另一个处于展开forms。 没有简单的方法来更改每个jqGrid配置的图标，但是您可以通过在loadComplete编写额外的JavaScript代码并关于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; } });
更新 ：我发布了function请求和拉取请求 ，它将上述function添加到TreeGrid。