今天做前端頁面要用到樹結構，用了第三方插件ztree，搞了好久不過終於弄出來了，， 一點小心得。（用的版本 V3 ）
首先看下載的文件結構：
一：將要用到的CSS 和 JS 拷貝到工程中，我這里在工程中建一個文件夾ztreeStyle專門放ztree插件所需要的文件，里面可能有些文件用不上吧，但是我也不去深究了 剛接觸 以后有時間在慢慢細化吧！
二：下面是action代碼了，，非常之簡單一目了然。
//此方法是當第一次進頁面的時候為父節點賦值， 為了測試里面寫的都是些死數據， @RequestMapping(value="/ztree/ztreeTestget",method=RequestMethod.GET) public String ztreeTestget(HttpServletResponse response,HttpServletRequest request,ModelMap model) throws Exception{ System.out.println("進來了進來了進來了進來了進來了進來了進來了進來了進來了進來了進來了"); List<PartyCategory > li=new ArrayList<PartyCategory>(); PartyCategory pp=new PartyCategory(); pp.setId(1); //id pp.setParentId(0); //父ID pp.setName("哈哈"); PartyCategory ppp=new PartyCategory(); ppp.setId(2); ppp.setParentId(0); ppp.setName("呵呵"); PartyCategory pppp=new PartyCategory(); pppp.setId(3); pppp.setParentId(0); pppp.setName("嘿嘿"); li.add(pp); li.add(ppp); li.add(pppp); model.addAttribute("li", li); return "ZtreeTest"; } //次方法當點根節點的時候進去然后返回子節點數據 ， 為了測試ajax輸出返回的是手寫的死數據 @RequestMapping(value="/ztree/ztreeTest",method=RequestMethod.POST) public void ztreeTest(String id,HttpServletResponse response,HttpServletRequest request) throws Exception{ request.setCharacterEncoding("gb2312"); response.setContentType("text/html;charset=utf-8"); PrintWriter pw = response.getWriter(); pw.write("[{\"id\":4,\"pId\":0,\"name\":\"" +11111+"\"},{\"id\":5,\"pId\":0,\"name\":\"" +22222+"\"}]"); }
三：下面是jsp，基本上自己沒寫什么就是從下載的插件里有demo頁面代碼拷貝過來就基本OK了 就是稍微的改動一些代碼，自己加了少許的代碼，，
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; %> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <base href="<%=basePath%>"> <title>My JSP 'addPost.jsp' starting page</title> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="description" content="This is my page"> </head> <script type="text/javascript" src="${ctx }/res/js/jquery-1.9.1.min.js"></script> <link rel="stylesheet" href="${ctx }/res/ztreeStyle/css/demo.css" type="text/css"> <link rel="stylesheet" href="${ctx }/res/ztreeStyle/css/zTreeStyle/zTreeStyle.css" type="text/css"> <script type="text/javascript" src="${ctx }/res/ztreeStyle/js/jquery-1.4.4.min.js"></script> <script type="text/javascript" src="${ctx }/res/ztreeStyle/js/jquery.ztree.core-3.5.js"></script> <script type="text/javascript" src="${ctx }/res/ztreeStyle/js/jquery.ztree.excheck-3.5.js"></script> <SCRIPT type="text/javascript"> var setting = { async: { enable: true, url:"${ctx}/ztree/ztreeTest", //沒點擊一次節點AJAX 都會與此路徑交互一次 autoParam:[ "id", "name" ], //ajax提交的時候，傳的是id值 otherParam:{"chk":"chk"}, dataFilter: dataFilter }, check: { enable: true, autoCheckTrigger: true }, data: { simpleData: { enable: true, idKey : "id", // id編號命名 pIdKey : "pId", // 父id編號命名 rootPId : 0 } }, callback: { onCheck: onCheck, onAsyncSuccess: onAsyncSuccess } }; function dataFilter(treeId, parentNode, childNodes) { if (parentNode.checkedEx === true) { for(var i=0, l=childNodes.length; i<l; i++) { childNodes[i].checked = parentNode.checked; childNodes[i].halfCheck = false; childNodes[i].checkedEx = true; } } return childNodes; } function onCheck(event, treeId, treeNode) { cancelHalf(treeNode) treeNode.checkedEx = true; } function onAsyncSuccess(event, treeId, treeNode, msg) { cancelHalf(treeNode); } function cancelHalf(treeNode) { if (treeNode.checkedEx) return; var zTree = $.fn.zTree.getZTreeObj("treeDemo"); treeNode.halfCheck = false; zTree.updateNode(treeNode); } var zNodes =[ //這里我用到了jstl表達式forEach循環，循環的就是 //后台request作用域里存放的數據，而這里就是首次加載頁面是樹顯示的根節點 <c:forEach items="${li}" var="abc" varStatus="vs"> { id:"${abc.id}", pId:"${abc.parentId}", name:"${abc.name}"}, </c:forEach> ]; $(document).ready(function(){ $.fn.zTree.init($("#treeDemo"), setting, zNodes); }); //獲取節點復選框的值 function onCheck(e,treeId,treeNode){ var treeObj=$.fn.zTree.getZTreeObj("treeDemo"), nodes=treeObj.getCheckedNodes(true), v=""; id=""; for(var i=0;i<nodes.length;i++){ v+=nodes[i].name + ","; id+=nodes[i].id + ","; // alert(nodes[i].id); //獲取選中節點的值 } alert(id); //獲取選中節點的值 $("#myid").val(id); } </SCRIPT> <body> <hr/> <input type="text" id="myid" /> <br/> <form action="" method="post"> <div class="content_wrap"> <div class="zTreeDemoBackground left"> <ul id="treeDemo" name="trees" class="ztree"></ul> </div> </div> <input type="submit" value="form提交"> </form> —————————————————————————————————————————————————————————————————————————————————————————————————————— <h1><a href="${ctx }/ztree/ztreeTestget">測試</a></h1> </body> </html>
此時已經結束了，，簡單的一棵ajax請求的樹已經實現，，
