ZTree 增删修改（jsp/servlet）学习系列之一---修改节点

来源：互联网发布：买域名和空间编辑：程序博客网时间：2024/06/06 00:05

前言

上一篇我们已经学习过了删除节点的实现，对于修改节点就简单多了，因为上一篇中已经实现了大部分的代码，这里只需添加一些代码就可以了。

实现

为了改动较少，所以我们不去掉上篇中已经实现的删除的功能，就让修改和删除共存！

代码如下：

<%@ page language="java" contentType="text/html; charset=UTF-8"    pageEncoding="UTF-8"%><%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %><c:set var="path" value="${pageContext.request.contextPath}"/><!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><script type="text/javascript" src="${path}/jq/jquery-3.2.0.min.js"></script><script type="text/javascript" src="${path }/Z-Tree/jquery.ztree.core.js"></script><script type="text/javascript" src="${path }/Z-Tree/jquery.ztree.excheck.js"></script><script type="text/javascript" src="${path }/Z-Tree/jquery.ztree.exedit.js"></script><link rel="stylesheet" href="${path}/css/zTreeStyle/zTreeStyle.css" type="text/css"/><title>Insert title here</title></head><script>var zTree;var selectNode;var load = false;$(function(){zTree = $.fn.zTree.init($("#treeDemo"), setting);})        var setting = {async : {enable : true, dataType : "text",type : "post",url :  "${path}/CityNodeServlet?timestamp="+ new Date().getTime(), //请求节点生成的servletautoParam : [ "id" ]   //每次异步加载传给服务器的参数},view : {dblClickExpand : true,selectedMulti:false,}, edit: {               enable: true,                       //编辑节点必须设置该字段，并且编辑状态包括修改和删除，所以如果设置trueeditNameSelectAll : true,           //删除按钮和修改按钮都会出现，添加按钮需要自己额外添加showRenameBtn : true,               // 默认值就是true,可以不写的showRemoveBtn: showRemoveBtn,       //选做，可以删除这一行//高级用法就是为showRemoveBtn 设置函数，函数体内判断节点来为某一些节点禁用删除按钮,比如这里禁止删除跟节点。},data : {key : {name : "nodeName"   // 取后台传过来的json数据中 nodeName 字段值作为节点名称},simpleData : {enable : true,idKey : "id",       //节点的id,注意此处要对应你后台传过来的节点的属性名idpIdKey : "pId",     //节点的pId,注意此处要对应你后台传过来的节点的属性名pIdrootPId : 0         //根节点的pId = 0}},callback : {beforeRemove : beforeRemove,   //删除前的回调函数beforeRename : beforeRename,  //修改前的回调函数onAsyncSuccess: zTreeOnAsyncSuccess  //异步加载完毕的回调函数}};function showRemoveBtn(treeId,treeNode){return !treeNode.level==0;             //跟节点返回false,所以跟节点不显示删除按钮。}function beforeRemove(treeId, treeNode){  if(treeNode.pId==0){                //如果删除的是根节点，也提示无法删除alert("根节点无法删除！")return false;                    //返回false 就会使前端的节点还保持存在，//如果是true,则会在前端界面删除，但数据库中还会有，刷新一下即可再次出现}if(confirm("是否删除？")){  // 询问是否删除，若删除，则利用Ajax 技术异步删除，同是返回json格式数据，告知前台是否删除成功！$.post('${path}/DeleteCityServlet?ids='+treeNode.id,function(data){ // 从数据库中删除    if(data.success){                   // data  为 json 格式数据    zTree.removeNode(treeNode);     // z-Tree 的api ，从视角上 删除  alert(data.msg);                // 要在后台删除成功后再进行视角上删除，这样就真正意义实现了删除。    }else{    alert(data.msg);    return false;    } });}return ;}function beforeRename(treeId, treeNode, newName, isCancel){var oldName = treeNode.nodeName;    //首先取原始的节点值if(newName==""){                  // 新名称为空的情况var node = treeNode.getParentNode();  //获取父节点zTree.reAsyncChildNodes(node, "refresh");  //重新访问数据库更新父节点，即可回到旧名称alert("名称不能为空！");}else if(newName!=treeNode.nodeName){     // 如果新名称与就名称一致，什么也不做$.ajax({url:"${path}/EditCityServlet",     //更改请求data : {id:treeNode.id,name:newName,pId:treeNode.pId},cache : false,dataType : 'JSON',type:'post',success: function(data){    if(data.success){   alert(data.msg);   //提示更改成功!    }else{                    //修改失败，即同一父类型下不能名称相同（我自己加的限制条件，你可以根据需要修改）                       var node = treeNode.getParentNode();   zTree.reAsyncChildNodes(node, "refresh");  //回到旧名称 alert(data.msg); }}});}}function zTreeOnAsyncSuccess(event, treeId, treeNode, msg){  // 这个函数仅仅是为了 初始化时展开 1级菜单if(!load){            var nodes = zTree.getNodesByParam("pId", 0, null);$.each( nodes, function(i, n){zTree.expandNode(n, true, false, true);});load = true;}}</script><style type="text/css">.title{  margin: 30px 30px;  font-size:15px;}#tree{ margin: 30px 30px;}</style><body><div class="title">jsp/servelt 目录树的添加、删除和修改（请不要删除根节点）</div><div id="tree"><ul id="treeDemo" class="ztree"></ul></div></body></html>

CityDAO代码：

package util;import java.util.List;public interface CityDAO {public List findTypeChildrenById(Integer id);public void deleteCity(Integer id);public void editCity(Integer id, String city);  //修改}

CityImpl代码（仅给出修改功能代码）：

public void editCity(Integer id, String city) {Connection conn = null;PreparedStatement ps = null;try{   conn = DbUtil.getConnection();String sql = "update essaytype set province = ? where id = ?";ps = conn.prepareStatement(sql);ps.setString(1, city);ps.setInt(2, id);ps.execute();}catch(Exception e){e.printStackTrace();}finally{DbUtil.closeAll(conn, ps);}}

修改处理函数editCityServlet:

package util;import java.io.IOException;import java.util.List;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import com.sun.org.apache.xalan.internal.xsltc.compiler.Template;import net.sf.json.JSONObject;/** * Servlet implementation class EditCityServlet */@WebServlet("/EditCityServlet")public class EditCityServlet extends HttpServlet {private static final long serialVersionUID = 1L;    private CityDAO c = new CityImpl();    /**     * @see HttpServlet#HttpServlet()     */    public EditCityServlet() {        super();        // TODO Auto-generated constructor stub    }/** * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response) */protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {request.setCharacterEncoding("utf-8");Integer id      =  Integer.parseInt(request.getParameter("id"));String  city = request.getParameter("name");Integer pId = Integer.parseInt(request.getParameter("pId"));List<City> cities = c.findTypeChildrenById(pId);String msg ="";boolean flag = true;   //成功或者失败的标志for(City  temp:cities){          //遍历孩子节点  看看名称是否重复if(temp.getCity().equals(city)){flag= false;break;}}if(flag){c.editCity(id, city);msg = "修改成功！";}else {msg = "修改失败，同一级下该名称已存在，请尝试修改为其它名称！";}JSONObject jO = new JSONObject();jO.put("msg", msg);jO.put("success", flag);response.setContentType("application/json;charset=utf-8");response.getWriter().println(jO.toString());}/** * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response) */protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {// TODO Auto-generated method stubdoGet(request, response);}

效果图：

1 0