每个组的自定义 Bootstrap 图标 LazyLoading - FancyTree

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

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

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

您的示例使用 Bootstrap Glyphicons, but also 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覆盖图标class 属性:

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

每个组的自定义 Bootstrap 图标 LazyLoading - FancyTree

Custom Bootstrap Icon for each group LazyLoading - FancyTree

twitter-bootstrap

fancytree