jqgrid树网格可以显示用户定义的图标

Question

第一张图是使用jqGrid树网格的结果。图标是默认设置，非Leaf项目以“倒三角形”开头，Leaf项目以“o”开头。

如何设置显示结果如第二张图片，我可以为每一行设置不同的图标？

Answer 1

TreeGrid的输入数据可以包含带有类名的icon属性，该属性指定树叶的图标。节点属性的值应包含两个类：一个用于扩展节点，另一个用于折叠节点。例如

[
    { ...
        level: "0", parent: "null", isLeaf: false, expanded: true, loaded: true,
        icon: "ui-icon-folder-open,ui-icon-folder-collapsed" },
    { ...
        level: "1", parent: "1", isLeaf: true, expanded: false, loaded: true,
        icon: "ui-icon-flag" },
    { ...
        level: "2", parent: "2", isLeaf: true, expanded: false, loaded: true,
        icon: "ui-icon-star" },
    ...
]

演示https://jsfiddle.net/OlegKi/4svafpub/3/演示了显示

的TreeGrid

您没有发布任何详细信息。没有您使用的jqGrid版本，没有关于jqGrid（free jqGrid，商业Guriddo jqGrid JS的分支或版本＆lt; = 4.7中的旧jqGrid的信息。不知道你使用哪个CSS框架：jQuery UI或Bootstrap以及哪个图标集（jQuery UI图标，Font Awesome 4.x，Bootstrap的字形图标......）。您的要求的确切实施将取决于信息。无论如何，您必须从您使用的图标集中选择图标类，或者您将需要定义自定义CSS类，您将使用它们用于TreeGrid节点和叶子，以及定义CSS规则，它们指定所有必需的CSS属性：background-image，background-position等。结果，您将能够显示您需要的任何图标。

更新：在我看来，icon仅用于叶子，而不是如上所述的节点。

更新2：我在免费jqGrid的代码中做了一些更改，现在可以指定TreeGrid节点的图标。显示更新版本的免费jqGrid的相同代码

请参阅演示https://jsfiddle.net/OlegKi/4svafpub/4/