版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/tianyp358265852/article/details/48393771
ztree ztree ztree增删改功能 增删改功能 增删改功能
一、引入文件
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.ztree.core-3.5.min.js"></script>
<!-- 开启带复选框的树，要引入这个js文件 -->
<script type="text/javascript" src="<%=request.getContextPath()%>/js/jquery.ztree.excheck-3.5.min.js"></script>
二、body
使用表格布局：
需要的原材料分为三部分：按钮、树、文本框
按钮：修改后保存、新建菜单、删除菜单、新建的保存
树：<div id="treeClass" class="ztree" ></div>
文本框: id( 中 点的id),
pid( 中 点的pid),
父 菜 ( 中 点的父 名称),
菜 名称( 中 点的名称),
url( 中 点的url)
三、script
1.树的基本设置
2.ztree的增删改
要对树进行增删改的操作，其实就是对树的某个具体节点进行操作，那么我们首先就要获取点击节点的相关信息：通过 function zTreeOnClick(event, treeId, treeNode){}方法
这里我们选中的节点要首先判断是不是根节点，因为根节点的业务
流程和其他节点的流程是不一样的。
选完节点后我们要给文本框赋值，这里要注意如果选中的是根节
点，那么它的父级菜单我们要进行特殊处理，pid用var pId =
treeNode.pId也拿不到，所以 pId的取 也要做特殊的 理。2.1增加
思路：获取选中节点信息，将选中节点的id作为新建节点的pid，填
入增加节点的信息，然后发送ajax请求，然后将填写的pId，
menuName,menuURL作为参数传到后台，调用添加的方法，将数据存
入数据库，最后调用回调函数，将新建节点的信息在前台展示。
流程：
1、选中节点，只显示修改的保存，新建菜单，删除菜单
这三个按钮，将选中节点的信息填入文本框；
2、点击新建按钮后，只显示新建的保存按钮，隐藏其余
按钮；
3、清空id，菜单名称，url文本框,将选中节点的id作为
新建节点的pid以及选中节点的名字作为新建节点父节点的名字赋值
给文本框（只能读不能改），输入新建节点的名字和url，点击保存
按钮，清空菜单名称和url文本框，以便于继续保存。调用添加节点的方法：先将数据存入数据库，在调用回调函数，将
存入的信息展示在前台
Action:因为这里返回的是一个json对象，不是json数组，
所以使用JSONObect.fromobject方法。
outJson:
这里决定了你后台servlet的http服务返回到前台的数据类
型。设置成json返回的数据就是以json格式传输的，有兴趣的同学
可以在网上搜response.setContentType()中MIME参数类型总结，可
以查看详细的资料。
Dao:
2.2删除
思路：点击一个节点,获取该节点的Id,将该节点的Id传到后
台，调用删除的方法，根据Id删除
流程：选中要删除的节点，判断是不是父节点，如果不是父节
点，点击删除按钮，将该节点删除，只保留父级菜单和pid文本框的值，将其他的按钮隐藏，只留下新建的保存这个按钮。
Action:
Dao:
2.3修改
思路：
首先要获取修改节点的信息：id,pid,menuName,menuURL；然后发送
ajax请求，将要修改的信息传送到后台，执行修改的方法，之后使
用回调函数，将更新后的值展示在前台，最后将文本框的值清空，只保留父级节点Id和名字。(注意：修改的传参不能少了pid，如果
少了pid那么更新后的节点就没有了pid，那么修改后的节点就不在
原来的位置了)
Action:
Dao:
准备工作：
1、页面布局
2、生成树
3、先不写zTreeOnClick的方法体
业务流程（讲的时候文本框都显示，以便于操作理解）
1、加载页面后
按钮:只显示新建的保存按钮菜单：只有父级菜单，菜单名称和Url文本框显示,id和Pid文本框隐
藏，但是父级菜单和Pid有值，pid的值为1.
2、输入信息后，点击保存按钮，将信息存入数据库，
然后再在前台展示。（Action层的讲解）
点击保存后：
按钮：按钮不变
文本框：只保留pid和父级菜单的数据
3、写zTreeOnClick的方法体，如何获取节点信息，并且赋值给文本框，判断
点击的是不是根节点
3.1、点击普通节点：
按钮：只显示修改后的保存，新建菜单，删除按钮
菜单：都显示，并且要获取值
3.1.1、点击修改后的保存：
按钮：只显示新建的保存
文本框:pid,父级菜单，的值没有变，id、菜单名称和Url清空
3.1.2、点击新建菜单按钮：
按钮：只显示新建的保存
文本框:pid,父级菜单，的值没有变，id、菜单名称和Url清空
3.1.3、点击删除按钮：先判断是不是父节点，父节点无法删除
按钮：只显示新建的保存
文本框：只有pid和父级菜单有值，pid的值是根节点的id，父级菜单的
名字是根节点的名字
也就是说删除选中节点后，再进行添加是在根节点下添加的
3.2、点击根节点：
按钮：只显示新建菜单和修改后的保存按钮
菜单：只显示菜单名称和Url的文本框,将id,pid,父级菜单文本框隐
藏，但是id,pid文本框里有值，并且解决父级菜单名没有报错的bug
3.2.1、点击新建菜单：
按钮：只显示一个新建的保存
文本框：
pid：Pid为1
父级菜单：为根节点的菜单名
3.2.2、点击修改后的保存：
按钮：只显示一个新建的保存文本框：将Pid的值设置为1，在修改的方法里进行了判断