构建一个简单的树形图

构建一个简单的树形图

开发工具与关键技术：VisualStudio C#
作者：落白
撰写时间：2019/06/27

在很多的项目里都需要使用到树形图，而下面要介绍的一个最为简单的树形图，主要的使用步骤可以分为三步。

首先需要拖入必要的插件，基本算是整个内容最重要的部分了，只要插件没拖错，下面基本也不会有什么问题了。

至于第二步就是建立树形图的主干了，也就是创建ul标签。有了主干以后，其他的分支都是通过代码来添加，所以ul标签占领的是主导地位。

@*第二步、页面上加入树标签：*@
  <ul id="treeDemo" class="ztree"></ul>

这里的树形图的子分支都是需要自己手动添加的，所以这是树形图最简单的实用方式，如果需要让子分支是根据表格查询出来的内容或者其他的方式来添加的话，那树形图就要跟控制器的查询方法相关联，这里就不多作介绍。

 @*第三步、写js代码初始化树即可：*@

  var setting = {
        view: {
            addHoverDom: false,
            removeHoverDom: false,
            selectedMulti: false
        },
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        edit: {
            enable: true
        }
    };
    var zNodes = [
        { id: 1, pId: 0, name: "[core] 基本功能 演示", open: true },
        { id: 101, pId: 1, name: "最简单的树 --  标准 JSON 数据" },
        { id: 102, pId: 1, name: "最简单的树 --  简单 JSON 数据" },
        { id: 2, pId: 0, name: "[excheck] 复/单选框功能 演示", open: false },
        { id: 201, pId: 2, name: "Checkbox 勾选操作" },
        { id: 206, pId: 2, name: "Checkbox nocheck 演示" },
        { id: 211, pId: 2, name: "Radio halfCheck 演示" },
        { id: 205, pId: 2, name: "用 zTree 方法 勾选 Radio" },
        { id: 3, pId: 0, name: "[exedit] 编辑功能 演示", open: false }，
        { id: 305, pId: 3, name: "高级 增 / 删 / 改 节点" },
        { id: 307, pId: 3, name: "异步加载 & 编辑功能 共存" }，
        
    ];
$(document).ready(function () {
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});