异步加载 tree，点一下节点，就发一下请求到后台，然后显示出得到的当前层级节点
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="utf-8" />
5 <title></title>
6 </head>
7 <script type="text/javascript" src="js/jquery-1.8.0.js" ></script>
8 <body>
9 <ul id="myTree"></ul> ///定义ztree要显示的容器标签
10
11 </body>
12 <script>
13 var myTreeNodes = []; //定义接收返回集合的容器，为了在后面init真正初始化树时，作为最后一个参数用
14 var IDMark_A = "_a"; //定义个变量，其实就是为了后面匹配tree自动生成的a标签（在这里做下说明而已，不定义直接在下面拼也行吧）
15 var mySetting = {
16 view:{
17 addDivDom: myyAddDivDom //自定义控件，这里是加入了复选框
18 },
19 data:{
20 key:title:"name", //设置title提示信息对应的属性名称 也就是节点相关的某个属性
21 children:"childNodes"
22 },
23 async:{
24 enable:true, //是否开启异步加载模式
25 type:‘post‘,
26 url: myGetUrl,//得到请求路径的方法
27 dataFilter: myFilter //对于请求回来的数据进行预处理的方法
28 }
29 }
30
31 //加入自定义的显示控件 （这里是文本框）
32 function myAddDivDom(tree,treeNode){
33 var aObj = $("#"+treeNode.tId+IDMark_A);///这个就是个选择器，选的是原节点所在的a标签（这是tree自己生成的a标签）
34 if(treeNode.myCheck=="1"){///这个是可以自己加判断，让指定的对象前加上复选框
35 var editStr = "<input type=‘checkbox‘ value=‘"+treeNode.id+"‘onfocus=‘this.blur();‘></input>";
36 aObj.before(editStr); ///before是jq的方法，意思是在调用者标签的签名加入参数（参数也可以是标签，和html()方法的参数是一样的）
37 }
38 }
39
40 //得到请求路径
41 function myGetUrl(treeId,treeNode){
42 var firstId = "";//第一个节点对象的id
43 var url = "";
44 if(treeNode==null){ //第一次，加载树时发的请求
45 url = path+"xxx/loadNextTreeNodes.do?id="+firstId+"&otherParam"+otherParam;
46 }else{//树加载完成后，点击某个（有子节点的）节点后发出的请求
47 url = path + "xxx/loadNextTreeNodes.do?id="+treeNode.id+"&otherParam"+otherParam;
48 }
49 return url;
50 }
51
52 //对返回的数据进行预处理
53 function myFilter(treeId,parentNode,childNodes){
54 for (var i=0,i<childNodes.length;i++) {
55 /*
56 下面等号左边的 childNodes[i] 的属性都是在 tree中要显示的每个节点的属性，
57 而右边的childNodes[i]的属性则表示从后台得到的对象集合中每个对象的真实属性
58 */
59 childNodes[i].code=xxxx;
60 childNodes[i].open=true;
61 childNodes[i].name = childNodes[i].xxxName;
62 childNodes[i].xxx = childNodes[i].xxxxx;
63
64 if(childNodes[i].hasChild==1){
65 childNodes[i].isParent = true;///要显示成树，集合中的数据必须要有个boolean类型的 isParent属性
66 //可以在后台对象属性上直接加上，也可以在预处理这里的js中根据条件加上这个属性
67 }
68 }
69 return childNodes;
70 }
71
72 ///上面这些都是为了生成树的准备信息，下面这句才是真正生成树的代码(当然这句可以放在任意位置，比如最上面也可以)
73 $.fn.zTree.init($("#myTree"),mySetting,myTreeNodes);//参数1：容器对象 2：tree的setting设置 3：接收后台返回值的数组
74 /*
75 执行这句的时候，会自动 先执行 myGetUrl 方法，得到 url，然后自动发送这个url到后台请求数据（就和ajax一样，其实这句话里面就是发了一个ajax请求），
76 然后请求回来的 数据会自动先传入myFilter方法的childNodes参数中，并执行myFilter方法，
77 然后在加载tree的同时自动调用myAddDivDom方法，在对应的节点前拼好checkbox复选框，并显示在页面上。
78 */
79
80 </script>
81
82 <script>
83 //下面这些都是java代码
84 @ResponseBody
85 @RequestMapping("loadNextTreeNodes")
86 public void loadNextTreeNodes(){
87 List list=[];//假设后台有一个要展示为 tree的list集合
88 for(item:list){
89 item.setHasChild("0");
90 if(xxx){
91 item.setHasChild("1");
92 }
93 }
94 writeJson(list);//把list转成json写到前台
95 }
96
97 //下面这个就是封装了个写json到前台的方法，供参考
98 public void writeJson(Object obj){
99 PrintWriter out = null;
100 try{
101 response.setContentType("");
102 response.setHeader("");
103 response.setHeader("");
104 out = response.getWriter();
105 out.print(new Gson().toJson(obj));
106 }catch(Exception e){
107
108 }finally{
109 try{
110 FileUtil.flushAndCloseWrite(out);//关闭流
111 }catch(e){
112 }
113 }
114 }
115
116 </script>
117 </html>
时间： 2024-11-05 00:11:40