日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔！

生活随笔

當(dāng)前位置： 首頁 >

一步步用zTree(1)

發(fā)布時(shí)間：2025/3/15 29 豆豆
生活随笔 收集整理的這篇文章主要介紹了 一步步用zTree(1) 小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

需要文件如圖

最后結(jié)果如圖


代碼如下

先將官網(wǎng)demo上的例子copy到自己的項(xiàng)目中,測試一番。文件如下所示 <%@ 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:"父節(jié)點(diǎn)1 - 展開", open:true},{ id:11, pId:1, name:"父節(jié)點(diǎn)11 - 折疊"},{ id:111, pId:11, name:"葉子節(jié)點(diǎn)111"},{ id:112, pId:11, name:"葉子節(jié)點(diǎn)112"},{ id:113, pId:11, name:"葉子節(jié)點(diǎn)113"},{ id:114, pId:11, name:"葉子節(jié)點(diǎn)114"},{ id:12, pId:1, name:"父節(jié)點(diǎn)12 - 折疊"},{ id:121, pId:12, name:"葉子節(jié)點(diǎn)121"},{ id:122, pId:12, name:"葉子節(jié)點(diǎn)122"},{ id:123, pId:12, name:"葉子節(jié)點(diǎn)123"},{ id:124, pId:12, name:"葉子節(jié)點(diǎn)124"},{ id:13, pId:1, name:"父節(jié)點(diǎn)13 - 沒有子節(jié)點(diǎn)", isParent:true},{ id:2, pId:0, name:"父節(jié)點(diǎn)2 - 折疊"},{ id:21, pId:2, name:"父節(jié)點(diǎn)21 - 展開", open:true},{ id:211, pId:21, name:"葉子節(jié)點(diǎn)211"},{ id:212, pId:21, name:"葉子節(jié)點(diǎn)212"},{ id:213, pId:21, name:"葉子節(jié)點(diǎn)213"},{ id:214, pId:21, name:"葉子節(jié)點(diǎn)214"},{ id:22, pId:2, name:"父節(jié)點(diǎn)22 - 折疊"},{ id:221, pId:22, name:"葉子節(jié)點(diǎn)221"},{ id:222, pId:22, name:"葉子節(jié)點(diǎn)222"},{ id:223, pId:22, name:"葉子節(jié)點(diǎn)223"},{ id:224, pId:22, name:"葉子節(jié)點(diǎn)224"},{ id:23, pId:2, name:"父節(jié)點(diǎn)23 - 折疊"},{ id:231, pId:23, name:"葉子節(jié)點(diǎn)231"},{ id:232, pId:23, name:"葉子節(jié)點(diǎn)232"},{ id:233, pId:23, name:"葉子節(jié)點(diǎn)233"},{ id:234, pId:23, name:"葉子節(jié)點(diǎn)234"},{ id:3, pId:0, name:"父節(jié)點(diǎn)3 - 沒有子節(jié)點(diǎn)", isParent:true}];$(function(){$.fn.zTree.init($("#treeDemo"), setting, zNodes);});</script> </body> </html>

轉(zhuǎn)載于:https://my.oschina.net/liangzhenghui/blog/103556

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。