Question

我懒得加载FancyTree。

我有组，然后是子组。我希望每个子组都有一个不同的图标。

这是加载树的jQuery代码：

<script type="text/javascript">
    $(function () {

        var glyph_opts = {
            map: {
                doc: "glyphicon glyphicon-file",
                docOpen: "glyphicon glyphicon-file",
                checkbox: "glyphicon glyphicon-unchecked",
                checkboxSelected: "glyphicon glyphicon-check",
                checkboxUnknown: "glyphicon glyphicon-share",
                dragHelper: "glyphicon glyphicon-play",
                dropMarker: "glyphicon glyphicon-arrow-right",
                error: "glyphicon glyphicon-warning-sign",
                expanderClosed: "glyphicon glyphicon-plus-sign",
                expanderLazy: "glyphicon glyphicon-plus-sign",
                expanderOpen: "glyphicon glyphicon-minus-sign",
                folder: "glyphicon glyphicon-folder-close",
                folderOpen: "glyphicon glyphicon-folder-open",
                loading: "glyphicon glyphicon-refresh"
            }
        };

        $("#tree").fancytree({
            source: $.ajax({
                url: '@Url.Action("CompaniesTree", "Dashboard")',
                type: "GET",
                dataType: "json"
            }),
            extensions: ["glyph"],
            glyph: glyph_opts,
            lazyLoad: function (event, data) {
                var model = {
                    key: data.node.key,
                    data: data.node.data
                };
                $.ajax({
                    url: '@Url.Action("ChildItems", "Dashboard")',
                    type: "POST",
                    async: false,
                    contentType: "application/json",
                    data: JSON.stringify(model),
                    success: function (response) {
                          data.result = response;
                    }
                });
            }

        });
    });
</script>

万一你需要知道服务器端代码：我从我的控制器返回List<TreeModel>，我需要在此响应中添加另一个属性，它应该更改图标，

public class TreeModel
{
    public string title { get; set; }
    public string key { get; set; }
    public bool lazy { get; set; }
    public bool folder { get; set; }
    public TreeItem data { get; set; }
}

Answer 1

您可以简单地编辑用于字形图标的类名。

map: {
    doc: "glyphicon glyphicon-file",
    docOpen: "glyphicon glyphicon-file",
    ...

您的示例使用的是Bootstrap Glyphicons，还有Font Awesome，其他人可以使用。

修改2015-11-21：请注意，从Fancytree 2.14开始iconClass已替换为icon。

使用iconClass回调定义每个节点的自定义图标
（注意：以下示例使用Fancytree v2.11.1或更高版本）：

$("#tree").fancytree({
  ...
  iconClass: function(event, data){
    if( data.node.isFolder() ) {
      return "glyphicon glyphicon-book";
    }
  },

另一种方法是直接使用节点的iconclass属性覆盖图标类：

[
  {"title": "Node 1", "key": "1", "iconclass": "glyphicon glyphicon-book" },
  ...

每个组的自定义引导程序图标LazyLoading - FancyTree

1 个答案: