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：＆＃34;＃FFFFFF＆＃34;   此变量显式设置颜色。

树的外观基本演示：DEMO

Answer 1

因此，经过一些研究后，我意识到这个问题无法在前端视角解决。所以我进入了bootstrap-treeview.js文件，找到了一个覆盖颜色的函数（Line：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",
}];

输出：