grafana树状图模板下载 树状图格式

树状图

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

开发工具与关键技术：Visual Studio 2015、树状图

作者： 梁柏源

撰写时间：2019/5/29

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

今天来讲一下树状图也就是zTree，树形图有很多种写法：有标准的JSON写法和简单JSON写法，有很多种类型：有不显示连接线的，有不显示节点的，有图标的（icon），也有没有图标的，还能自定义字体等等，

当然功能也很多：有单选框复选框功能的，当然有选框功能当然有一键全选和一键取消，禁止编辑，组合功能

当然要实现这一切的前提是要有以下这几个东东：

1. zTreeStyle/demo.css；
2. zTreeStyle/zTreeStyle.css；
3. jquery-1.4.4.min.js；
4. jquery.ztree.core.js；

有了这几个插件就可以做树状图了，

步骤：（1）首先得有个容器

<div class="zTreeDemoBackground left">
     <ul id="TreeChart" class="ztree" style="background:#ffffff"></ul>（当这里也可以设置样式，style="background:#ffffff"，不设置的话也有默认的）
</div>

（2）然后就是我们的script了：

var setting = {
              data: {
              simpleData: {
                            enable: true
                        }
                    }
        };（这个不能缺）
        var zNodes = [
         { id: 1, pId: 0, name: "服装", open: true },（这里是个顶节点）
         { id: 11, pId: 1, name: "上衣" },
         { id: 12, pId: 1, name: "裤子" },
         { id: 13, pId: 1, name: "裙子" },
          { id: 14, pId: 1, name: "套装" },
         { id: 2, pId: 0, name: "鞋子", open: true },（这里又是一个顶节点）
         { id: 21, pId: 2, name: "男鞋" },
         { id: 22, pId: 2, name: "女鞋" },
         { id: 3, pId: 0, name: "内衣", open: true },（这里还 是一个顶节点）
         { id: 31, pId: 3, name: "文胸" },
         { id: 32, pId: 3, name: "内裤" }
        ];
 
        $(document).ready(function () {
            $.fn.zTree.init($("#TreeChart"), setting, zNodes);
        });

这个就是简单的JSON写法缺点就是var zNodes里的id不能改其他的。当然还有一种标准的JSON写法，代码差不多：

var setting = {};
 
        var zNodes = [
    {
         name:”服装” , open: true, （这里是个顶节点）
         children: [
{
name: "上衣",（）
children: [
（这里我的代码里是没有的，这里只是样式，上面name：“上衣”，是一个顶节点里面的一个小节点，可以说以这种方法，可以做到无限节点）
{ name: "短袖" },
{ name: "长袖" },
{ name: "背心" }
]
{name: "裤子",（）},（这是没有节点的，里面的括号可以去掉）
{name: "裙子",（）},
{name: "套装",（）},
]
}
{
         name:”鞋子” , open: true, （这里是个顶节点）
         children: [
{name: "男鞋",（）},
{name: "女鞋",（）}
]
}
{
         name:”内衣” , open: true, （这里是个顶节点）
         children: [
{name: "文胸",（）},
{name: "内裤",（）}
]
}
}
];
              
        $(document).ready(function () {
            $.fn.zTree.init($("#TreeChart "), setting, zNodes);
        });

当然还有个没有子节点的节点{ name： “没有子节点的节点”，isParent：true}

代码看起来有点乱但思路还是很简单的，children前面（外面）的name是个节点，children里面name是内容。

前面说了树状型还能自定义icon、功能等等，看下去就行：

1. 自定义icon：只需在后面加上icon:"图片路径 "就行；
2. 自定义字体：只需在后面加上font:{'':''}就行，注意要用单引号括住就像这样

font:{'font-weight':'bold'}

1. 不显示连接线：在 setting 里面加上一句代码就像，像这样

var setting = {
             view: {
              showLine: false
          },
          data: {
              simpleData: {
                   enable: true
              }
          }
      };

1. 不显示图标：在setting加：

var setting = {
             view: {
                  showIcon: showIconForTree
             },
             data: {
                  simpleData: {
                      enable: true
                  }
             }
         };

（5）……………

接下来看一下简单JSON树状图的运行结果