前台:
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - Simple Data</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/demo.css" type="text/css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.js"></script>
<script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery.ztree.all.min.js"></script>
<SCRIPT type="text/javascript">
var setting = {
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0
}
}
};
var zNodes;
var zTreeObj;
var ids = [];//选中的节点及所有子节点的集合
$(document).ready(function(){
$.ajax({
async : false, //默认是true,异步请求。此处为同步,则同步请求将锁住浏览器,用户其他操作只有等请求完成后才能执行
cache:false, //设置为false将不会从浏览器缓存中加载请求信息。
type: 'POST', //请求方式 get或post
dataType : 'json', //须是string类型的参数,预期从服务器返回的数据类型,此处为json格式的。
url: 'tree/showTreeNodes.action',//请求的action路径
error: function () {//请求失败处理函数
alert('请求失败');
},
success:function(data){ //请求成功后回调函数。 data由服务器返回,并根据dataType参数进行处理后的数据。
zNodes = data; //把后台封装好的简单Json格式赋给zNodes
}
});
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
});
// 将新增加的节点数据更新到后台
function addChange(newNodes){
$.ajax({
async : true, //默认是true,异步请求。如果为同步,则同步请求将锁住浏览器,用户其他操作只有等请求完成后才能执行
cache:false, //设置为false将不会从浏览器缓存中加载请求信息。
contentType:'application/json;charset=UTF-8',
type:'POST', //请求方式 get或post
data:JSON.stringify(newNodes),
dataType : 'json', //须是string类型的参数,预期从服务器返回的数据类型,此处为json格式的。
url: 'tree/addTreeNode.action',//请求的action路径
error: function () {//请求失败处理函数
alert('请求失败');
},
success:function(data){ //请求成功后回调函数。 data由服务器返回,并根据dataType参数进行处理后的数据。
zNodes = data; //把后台封装好的简单Json格式赋给zNodes
}
});
//$.fn.zTree.init($("#treeDemo"), setting, zNodes);
}
/*
增加节点
*/
function addNodes(){
//var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = zTreeObj.getSelectedNodes();
var newNodes = null;
//获得选中节点的id
var id = nodes[0].id;
var max=0;
$.ajax({
async:false, //默认是true,异步请求。如果为同步,则同步请求将锁住浏览器,用户其他操作只有等请求完成后才能执行
cache:false, //设置为false将不会从浏览器缓存中加载请求信息。
//contentType:'application/json;charset=UTF-8',
type:'POST', //请求方式 get或post
//data:JSON.stringify(newNodes),
dataType:'text', //须是string类型的参数,预期从服务器返回的数据类型。
url:'tree/handleMax.action',//请求的action路径
error:function () {//请求失败处理函数
alert('请求失败');
},
success:function(data){ //请求成功后回调函数。 data由服务器返回,并根据dataType参数进行处理后的数据。
max = data; //把后台封装好的简单Json格式赋给zNodes
}
});
//弹出输入框,获取输入框的内容
var nameStr = prompt("请输入节点名称","");
var newNodes = {id:max,pId:id,name:nameStr};
//新增节点
zTreeObj.addNodes(nodes[0],newNodes);
//调用addChange方法,将新增加的节点数据更新到后台
addChange(newNodes);
}
//删除节点
function removeNodes(){
var nodes = zTreeObj.getSelectedNodes();
var length1 = nodes.length;
for(var i = 0;i<length1;i++){
remove(nodes[i]);//调用递归函数
var nodeId = nodes[i].id;
ids.push(nodeId);
//zTreeObj.removeNode(nodes[i]);
}
var idss = unique(ids);
var strIds = idss.join("#");
$.ajax({
async:false,
cache:false,
//contentType:'application/json;charset=UTF-8',
type:'POST',
data:"data="+strIds,
dataType:'json',
url:'tree/deleteTreeNodesTwo.action',
error:function () {
alert('请求失败');
},
success:function(data){
zNodes = data;
}
});
$.fn.zTree.init($("#treeDemo"),setting,zNodes);
}
//递归函数
function remove(node){
if(node.isParent){
var childrenNodes = node.children;
var length = childrenNodes.length;
for(var j=0;j<length;j++){
var childId = childrenNodes[j].id;
remove(childrenNodes[j]);//递归调用
ids.push(childId);
//zTreeObj.removeNode(childrenNodes[j]);
}
}
}
//去重复的值
function unique(arr) {
var result = [], hash = {};
for (var i = 0, elem; (elem = arr[i]) != null; i++) {
if (!hash[elem]) {
result.push(elem);
hash[elem] = true;
}
}
return result;
}
/*
修改节点
*/
function editNodes(){
//var zTreeObj = $.fn.zTree.getZTreeObj("treeDemo");
var nodes = zTreeObj.getSelectedNodes();
zTreeObj.editName(nodes[0]);
}
</SCRIPT>
</HEAD>
<BODY>
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
<input type="button" value="增加节点" οnclick="addNodes()"/>
<input type="button" value="删除节点" οnclick="removeNodes()"/>
<input type="button" value="修改节点" οnclick="editNodes()"/>
</div>
</BODY>
</HTML>
后台:
package com.nianlun.springmvc02.student.action;
import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;
import java.util.Map;
import javax.servlet.http.HttpServletRequest;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.nianlun.springmvc02.student.pojo.City;
import com.sun.corba.se.impl.oa.poa.ActiveObjectMap.Key;
import net.sf.json.JSON;
import net.sf.json.JSONArray;
@Controller
@RequestMapping("/tree")
public class TreeHandleAction {
int max = 1;
List<String> arrayList = new ArrayList<String>();
public TreeHandleAction() {
this.init();
}
// 创建初始化方法,在构造方法中执行
private void init() {
// {"id":"2","pId":"1","name":"sd"}
arrayList.add("{\"id\":\"1\",\"pId\":\"0\",name:\"设置\"}");
// arrayList.add("{id:1,pId:0,name:'设置'}");
// arrayList.add("{id:12,pId:1,name:'常规'}");
// arrayList.add("{id:121,pId:12,name:'路径'}");
// arrayList.add("{id:122,pId:12,name:'保存'}");
// arrayList.add("{id:13,pId:1,name:'界面'}");
// arrayList.add("{id:14,pId:1,name:'提示'}");
// arrayList.add("{id:15,pId:1,name:'打印'}");
}
// produces:指定返回的内容类型,仅当request请求头中的(Accept)类型中包含该指定类型才返回.produces="application/json;charset=UTF-8"
@ResponseBody
@RequestMapping(value = "/showTreeNodes")
public String showTreeNodes() {
// arrayList.clear();
JSONArray jsonArray = JSONArray.fromObject(arrayList);
return jsonArray.toString();
}
// 增加树节点
@ResponseBody
@RequestMapping("/addTreeNode")
public String addTreeNode(@RequestBody String string) {
// 接收传递过来的节点数据newNodes string类型
// 将此节点存储到列表中
arrayList.add(string);
JSONArray jsonArray = JSONArray.fromObject(arrayList);
return jsonArray.toString();
}
@ResponseBody
@RequestMapping("/handleMax")
public String handleMax() {
max = max + 1;
return max + "";
}
//删除节点方法一
@ResponseBody
@RequestMapping("/deleteTreeNodes")
//为什么使用list接收前台传递来的数据不行,而使用数组却可以?
//使用list,接收后list中是LinkedHashMap类型,[{id=2},{id=3}],会报错LinkedHashMap无法转为City
//使用数组,[City[id=2],City[id=3]]
public String deleteTreeNodes(@RequestBody City[] city){
for (int i = 0; i < city.length; i++) {
for (int j = 0; j < arrayList.size(); j++) {
if (city[i].getId().equals(arrayList.get(j).substring(7, 8))){
arrayList.remove(j);
break;//如果找到匹配的id,则终止当前的for循环,继续外层for循环
}
}
}
JSONArray jsonArray = JSONArray.fromObject(arrayList);
return jsonArray.toString();
}
//删除节点方法二
@ResponseBody
@RequestMapping("/deleteTreeNodesTwo")
public String deleteTreeNodesTwo(HttpServletRequest request){
String str = request.getParameter("data");
String[] ids = str.split("#");
for (int i = 0; i < ids.length; i++) {
for(int j=0;j<arrayList.size();j++){// "id":"2"
String idStr = "\"id\":\""+ids[i]+"\"";
if (arrayList.get(j).contains(idStr)) {
arrayList.remove(j);
break;
}
}
}
JSONArray jsonArray = JSONArray.fromObject(arrayList);
return jsonArray.toString();
}
}