ztree简单用法

首先引入zTreeStyle/zTreeStyle.css，ztree/js/jquery.ztree.all-3.5.js
创建tree

<div class="widget-main padding-8" style="height:auto;">
  <div class="demo">
          <ul id="tree" class="ztree"style="overflow:auto;">
          </ul>
   </div>
</div>

js代码

    <script type="text/javascript">

        var zTree;

        var setting = {
            view: {
                dblClickExpand: false,
                selectedMulti: false, //设置是否能够同时选中多个节点
                showIcon: true,  //设置是否显示节点图标
                showLine: true,  //设置是否显示节点与节点之间的连线
                showTitle: true,  //设置是否显示节点的title提示信息
            },
            data: {
                simpleData: {
                    enable: true,
                    idKey: "id",
                    pIdKey: "pId",
                }
            },
            callback: {
                onClick: zTreeOnClick, //单击事件
            },

        };
        // zTree 的数据属性，深入使用请参考 API 文档（zTreeNode 节点数据详解）
        var zNodes = [
        { id: 1, pId: 0, name: "工商库", open: true },
        { id: 11, pId: 1, name: "企业信息库", open: true },
        { id: 12, pId: 1, name: "行政处罚信息库" },
        { id: 13, pId: 1, name: "企业年报库" },
        { id: 14, pId: 1, name: "公示信息库" },
        { id: 111, pId: 11, name: "表格1",},
        { id: 112, pId: 11, name: "表格2" },
        { id: 113, pId: 11, name: "表格3" },
        { id: 114, pId: 11, name: "表格4" },
        { id: 121, pId: 12, name: "表格5" },
        { id: 122, pId: 12, name: "表格6" },
        { id: 123, pId: 1, name: "表格7" },
        { id: 131, pId: 13, name: "表格8" },
        { id: 2, pId: 0, name: "国税库", open: true },
        { id: 21, pId: 2, name: "child node1" },
        { id: 22, pId: 2, name: "child node2" },
        { id: 3, pId: 0, name: "地税库", open: true },
        { id: 31, pId: 3, name: "child node1" },
        { id: 32, pId: 3, name: "child node2" },
        { id: 4, pId: 0, name: "公安库", open: true },
        { id: 41, pId: 4, name: "child node1" },
        { id: 42, pId: 4, name: "child node2" }
        ];

        $(document).ready(function () {
            var t = $("#tree");
            t = $.fn.zTree.init(t, setting, zNodes);
        });
</script>

功能介绍
1，点击树节点，右侧显示节点名称以及父节点名称，编辑分类名称点击修改即可修改分类名
2，点击上级分类文本框选择父节点，编辑分类名称点击保存，相应父节点下增加子节点
3，点击树节点，点击删除相应节点以及所有子节点被删除

//单击事件
 function zTreeOnClick(event, treeId, treeNode) {
     var treeObj = $.fn.zTree.getZTreeObj("tree");
     var sNodes = treeObj.getSelectedNodes();
     if (sNodes.length > 0) {
         var parentNode = sNodes[0].getParentNode();
     }
     $("#edit").show();
     $("#baocun").hide();
     $("#name").val(treeNode.name);
     $("#sname").val(parentNode.name);
    //var isNode = sNodes[0];
    // if (!isNode.isParent) {
    //    window.location.href = "";
    // };

 };
 //删除子节点
 function btn_del() {
     var treeObj = $.fn.zTree.getZTreeObj("tree");
     var nodes = treeObj.getSelectedNodes();
     for (var i = 0, l = nodes.length; i < l; i++) {
         treeObj.removeNode(nodes[i]);
     }
 }
 //添加子节点
 function btn_add(event, treeId, treeNode) {
     var sn = $("#sname").val();
     var n = $("#name").val();
     var treeObj = $.fn.zTree.getZTreeObj("tree");
     var nodes = treeObj.getNodesByParam("name",sn, null);
     var parentNode = nodes[0];
     var newNode = { name: n };
     treeObj.addNodes(parentNode, newNode, true);
     //var newNode = { name: n };
     //var sNodes = treeObj.getSelectedNodes();
     //var parentNode = sNodes[0];
     //treeObj.addNodes(parentNode, newNode, true);
 }
 //修改子节点
 function edit() {
     var n = $("#name").val();
     var treeObj = $.fn.zTree.getZTreeObj("tree");
     var sNodes = treeObj.getSelectedNodes();
     var parentNode = sNodes[0].name;
     treeObj.editName(sNodes[0]);
     treeObj.cancelEditName(n);
 }