树状图

树状图

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

开发工具与关键技术：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树状图的运行结果