动态树与静态树显示——（一）
生活随笔
收集整理的這篇文章主要介紹了
动态树与静态树显示——（一）
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
常用屬性
?
常用事件:
?
?
?
?
1.第一種是靜態(tài)樹:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>靜態(tài)樹</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><link rel="stylesheet" type="text/css" href="../themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="../themes/icon.css"><script type="text/javascript" src="../js/jquery.min.js"></script><script type="text/javascript" src="../js/jquery.easyui.min.js"></script><script src="../js/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script></head><body><ul id="treeID" class="easyui-tree" data-options="animate:true,checkbox:true,lines:true"><li><span>第一章</span><ul><li><span>第一節(jié)</span><ul><li><span>第一條</span></li><li><span>第二條</span></li></ul></li><li><span>第二節(jié)</span></li><li><span>第三節(jié)</span></li><li><span>第四節(jié)</span></li><li><span>第五節(jié)</span></li></ul></li><li><span>第二章</span></li><li><span>第三章</span></li><li><span>第四章</span></li></ul><script type="text/javascript"> // 文檔加載后折疊所有的節(jié)點(diǎn) $(function(){$("#treeID").tree("collapseAll");})</script></body></html>?效果:
?
?
2.動(dòng)態(tài)樹：
?
例如:
?
?
?
?
動(dòng)態(tài)樹例子:
目錄結(jié)構(gòu):
?
頁面:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html><head><title>動(dòng)態(tài)</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><link rel="stylesheet" type="text/css" href="themes/default/easyui.css"><link rel="stylesheet" type="text/css" href="themes/icon.css"><script type="text/javascript" src="js/jquery.min.js"></script><script type="text/javascript" src="js/jquery.easyui.min.js"></script><script src="js/easyui-lang-zh_CN.js" type="text/javascript" charset="utf-8"></script></head><body><ul id="ttt"></ul><script type="text/javascript">$("#ttt").tree({url: "/Oraclefenye/tree_data.json",lines: true});</script><script type="text/javascript">$("#ttt").tree({onClick: function(node) {alert(node.text);}});</script></body></html>?
?
tree_data.json
[{"id":1,"text":"第一章" },{"id":2,"text":"第二章","state":"closed","children":[{"id":21,"text":"第一節(jié)" },{"id":22,"text":"第二節(jié)" },{"id":23,"text":"第三節(jié)","state":"closed","children":[{"id":231,"text":"第一條" }, {"id":232,"text":"第二條" }] }] } ]?
?效果:
?
?
?
將json數(shù)據(jù)改為
[{ "id":1, "text":"Folder1", "iconCls":"icon-save", "children":[{ "text":"File1", "checked":true },{ "text":"Books", "state":"open", "attributes":{ "url":"/demo/book/abc", "price":100 }, "children":[{ "text":"PhotoShop", "checked":true },{ "id": 8, "text":"Sub Bookds", "state":"closed" }] }] },{ "text":"Languages", "state":"closed", "children":[{ "text":"Java" },{ "text":"C#" }] }]?
結(jié)果:
?
總結(jié)
以上是生活随笔為你收集整理的动态树与静态树显示——（一）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： RabbitMQ入门-Routing直连
- 下一篇： rsync问题-connection r