當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

一步步用zTree(1)

發布時間：2025/3/15 编程问答 16 豆豆

生活随笔收集整理的這篇文章主要介紹了一步步用zTree(1) 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

需要文件如圖

最后結果如圖

代碼如下

先將官網demo上的例子copy到自己的項目中,測試一番。文件如下所示 <%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%> <%@ taglib prefix="s" uri="/struts-tags"%> <%String path = request.getContextPath();String basePath = request.getScheme() + "://"+ request.getServerName() + ":" + request.getServerPort()+ path + "/"; %> <!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" /> <link href="<%=basePath%>styles/bootstrap/bootstrap.css"rel="stylesheet" /> <link href="<%=basePath%>scripts/zTree/zTreeStyle/zTreeStyle.css" rel="stylesheet" /> <title>zTree</title> </head> <body><div class="container"><div class="row"><div><ul id="treeDemo" class="ztree"></ul></div></div> </div><script src="<%=basePath%>scripts/jquery/jquery-1.8.3.js" type="text/javascript"></script><script type="text/javascript" src="<%=basePath%>scripts/zTree/jquery.ztree.core-3.5.js"></script><script type="text/javascript">var setting = {data: {simpleData: {idKey:"id",pIdKey:"pId",rootPId:null,enable: true,}}};var zNodes =[{ id:1, pId:0, name:"父節點1 - 展開", open:true},{ id:11, pId:1, name:"父節點11 - 折疊"},{ id:111, pId:11, name:"葉子節點111"},{ id:112, pId:11, name:"葉子節點112"},{ id:113, pId:11, name:"葉子節點113"},{ id:114, pId:11, name:"葉子節點114"},{ id:12, pId:1, name:"父節點12 - 折疊"},{ id:121, pId:12, name:"葉子節點121"},{ id:122, pId:12, name:"葉子節點122"},{ id:123, pId:12, name:"葉子節點123"},{ id:124, pId:12, name:"葉子節點124"},{ id:13, pId:1, name:"父節點13 - 沒有子節點", isParent:true},{ id:2, pId:0, name:"父節點2 - 折疊"},{ id:21, pId:2, name:"父節點21 - 展開", open:true},{ id:211, pId:21, name:"葉子節點211"},{ id:212, pId:21, name:"葉子節點212"},{ id:213, pId:21, name:"葉子節點213"},{ id:214, pId:21, name:"葉子節點214"},{ id:22, pId:2, name:"父節點22 - 折疊"},{ id:221, pId:22, name:"葉子節點221"},{ id:222, pId:22, name:"葉子節點222"},{ id:223, pId:22, name:"葉子節點223"},{ id:224, pId:22, name:"葉子節點224"},{ id:23, pId:2, name:"父節點23 - 折疊"},{ id:231, pId:23, name:"葉子節點231"},{ id:232, pId:23, name:"葉子節點232"},{ id:233, pId:23, name:"葉子節點233"},{ id:234, pId:23, name:"葉子節點234"},{ id:3, pId:0, name:"父節點3 - 沒有子節點", isParent:true}];$(function(){$.fn.zTree.init($("#treeDemo"), setting, zNodes);});</script> </body> </html>

轉載于:https://my.oschina.net/liangzhenghui/blog/103556

總結

以上是生活随笔為你收集整理的一步步用zTree(1)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

ztree