javascript - Bootstrap Treeview 中不同背景颜色的节点

Question

Bootstrap Treeview (https://github.com/jonmiles/bootstrap-treeview)

我正在使用 Bootstrap treeview 创建联系人管理系统。有两种类型的联系人:个人和工作，我在一棵树中显示这两种类型。

有什么方法可以在加载树时以两种不同的颜色显示两种不同的类型？

如个人联系人(节点)将具有蓝色背景和工作联系人(节点)将具有白色/灰色背景。

 $.ajax({
            "type": "POST",
            "url":Some Url,
            dataType: "json",
            success: function(data) {
                $('#tree').treeview({
                    data: data,
                    levels: 1,
                    backColor:"#FFFFFF",
                    onNodeSelected: function(event, data) {
                        Do Something.
                    }

                });
            }
        });

backColor:"#FFFFFF" This variable explicitly sets a color.

关于树外观的基本演示:DEMO

Answer 1

所以经过一番研究，我发现这个问题无法从前端 Angular 解决。所以我进入了 bootstrap-treeview.js 文件并找到了一个覆盖颜色的函数(行:622)。

因此，要覆盖背景颜色，必须在后端完成。在节点中，您将有另一个元素/变量以及文本和其他变量，称为 BackColor 并设置颜色。

所以从这个意义上说，我为我的个人联系人设置了颜色，为我的工作联系人设置了颜色，以在同一树中区分。

例子:

 var myTree = [{
  text: "Parent1",
  backColor:"#FFAEAE",
  nodes: [{
    text: "Child11",
    nodes: [{
      text: "GrandChild111"
    }, {
      text: "GrandChild112"
    }]
  }, {
    text: "Child12"
  }]
}, {
  text: "Parent2",
  backColor:"#FFAEAE",
  nodes: [{
    text: "Child21"
  }, {
    text: "Child22"
  }]
}, {
  text: "Parent3",
  backColor:"#FFAEAE",
  nodes: [{
    text: "Child31"
  }, {
    text: "Child32"
  }, {
    text: "Child33"
  }]
}, {
  text: "Parent4",
  backColor:"#FFAEAE"
}, {
  text: "Parent5",
  backColor:"#FFAEAE",
  nodes: [{
    text: "Child51"
  }, {
    text: "Child52"
  }, {
    text: "Child33"
  }]
}, {
  text: "Parent6",
  backColor:"#56BAEC"
}, {
  text: "Parent7",
  backColor:"#56BAEC",
  nodes: [{
    text: "Child71",
    nodes: [{
      text: "GrandChild711"
    }, {
      text: "GrandChild712"
    }]
  }, {
    text: "Child72",
    nodes: [{
      text: "GrandChild711"
    }, {
      text: "GrandChild712"
    }]
  }]
}, {
  text: "Parent8",
  backColor:"#56BAEC"
}, {
  text: "Parent9",
  backColor:"#56BAEC",
  nodes: [{
    text: "Child91"
  }, {
    text: "Child92"
  }]
}, {
  text: "Parent10",
  backColor:"#56BAEC",
}];

输出: