html5 树插件 html5树形菜单

树形菜单的制作

开发工具与关键技术：Visual Studio 2015 制作树形菜单
作者：李国旭

首先，这个树形菜单在我们做的项目里面使用的频率呢可以经常见得到的，接下来我给大家介绍一下这个树形菜单的制作程序。
它呢主要是靠一个核心的控件来操作就是“jQuery.ztree”用它来搭建树形菜单既简单又高效，而且效果上也符合我们的需求和项目的需要。
树形菜单方法：第一，树形的样式也可以自己写也可以通过选用它的样式，例如：

<link href="~/Content/zTree/zTreeStyle/zTreeStyle.css" rel="stylesheet" />//基础样式
<link href="~/Content/zTree/awesomeStyle/awesome.css" rel="stylesheet" />//鲜艳样式
<link href="~/Content/zTree/metroStyle/metroStyle.css" rel="stylesheet" />//经典样式

以上的这三个树形菜单的样式呢，每一个的树形样式都是不一样的：有基础的、鲜艳的、经典的样式
第二，要写好树形的ul标签的容器，用来装树形菜单的样式：

然后呢，引入JS的控件下图的第一个是树形菜单的核心控件、第二是树形菜单的勾选控件，第三就是用来编辑的控件。 ![在这里插入图片描述]() 那么引入了之后就需要给他们配置JS的树形参数，图中的圈是添加和移除的伪类，就是鼠标移入就会显示出添加、编辑和删除子节点，下面的就是他们的代码设置了之后呢就可以自己自定义创建，删除，嵌套，重命名，和选择节点 ![在这里插入图片描述]()

$(document).ready(function () {
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
        });

        var newCount = 1;
        function addHoverDom(treeId, treeNode) {
            var sObj = $("#" + treeNode.tId + "_span");
            if (treeNode.editNameFlag || $("#addBtn_" + treeNode.tId).length > 0) return;
            var addStr = "<span class='button add' id='addBtn_" + treeNode.tId
                + "' title='add node' onfocus='this.blur();'></span>";
            sObj.after(addStr);
            var btn = $("#addBtn_" + treeNode.tId);
            if (btn) btn.bind("click", function () {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                zTree.addNodes(treeNode, { id: (100 + newCount), pId: treeNode.id, name: "new node" + (newCount++) });
                return false;
            });
        };
        function removeHoverDom(treeId, treeNode) {
            $("#addBtn_" + treeNode.tId).unbind().remove();
        };

我们还需要做的就是加载树形菜单父节点的数据通常表示一个树节点的方式就是在每一个节点存储一个 parentid，这个也可以说是父节点的ID。 那么的直接加载这些数据到树形菜单是不允许的。 但是我们可以在加载树形菜单之前，把它转换为标准标准的树形菜单数据格式。 树形的插件提供一个 ‘loadFilter’ 选项函数，它可以实现这个功能。 它提供一个机会来改变任何一个进入数据，而我这里是通过直接加载他们的数据而得到的

如图所示：加载的父节点数据的代码

最后请看效果图：红色圈圈的就是可以任意添加子节点和编辑、删除子节点