基于jsTree的無限級(jí)樹JSON數(shù)據(jù)的轉(zhuǎn)換代碼
更新時(shí)間：2010年07月27日 08:49:40 作者：
基于jsTree的無限級(jí)樹JSON數(shù)據(jù)的轉(zhuǎn)換代碼,需要的朋友可以參考下。
jstree 主頁 :
http://www.jstree.com/
其中提供了一種從后臺(tái)取數(shù)據(jù)渲染成樹的形式：
$("#mytree").tree({
data : {
type : "json",
url : "${ctx}/user/power!list.do"
}
});
對(duì)于url中返回的值必須是它定義的json數(shù)據(jù)形式:
$("#demo2").tree({
data : {
type : "json",
json : [
{ attributes: { id : "pjson_1" }, state: "open", data: "Root node 1", children : [
{ attributes: { id : "pjson_2" }, data: { title : "Custom icon", icon : "../media/images/ok.png" } },
{ attributes: { id : "pjson_3" }, data: "Child node 2" },
{ attributes: { id : "pjson_4" }, data: "Some other child node" }
]},
{ attributes: { id : "pjson_5" }, data: "Root node 2" }
]
}
});
這里需要一個(gè)從后臺(tái)實(shí)例集合轉(zhuǎn)換為它規(guī)定的json數(shù)據(jù)的形式.
/** *//**
* 無限遞歸獲得jsTree的json字串
*
* @param parentId
* 父權(quán)限id
* @return
*/
private String getJson(long parentId)
{
// 把頂層的查出來
List<Action> actions = actionManager.queryByParentId(parentId);
for (int i = 0; i < actions.size(); i++)
{
Action a = actions.get(i);
// 有子節(jié)點(diǎn)
if (a.getIshaschild() == 1)
{
str += "{attributes:{id:\"" + a.getAnid()
+ "\"},state:\"open\",data:\"" + a.getAnname() + "\" ,";
str += "children:[";
// 查出它的子節(jié)點(diǎn)
List<Action> list = actionManager.queryByParentId(a.getAnid());
// 遍歷它的子節(jié)點(diǎn)
for (int j = 0; j < list.size(); j++)
{
Action ac = list.get(j);
//還有子節(jié)點(diǎn)(遞歸調(diào)用)
if (ac.getIshaschild() == 1)
{
this.getJson(ac.getParentid());
}
else
{
str += "{attributes:{id:\"" + ac.getAnid()
+ "\"},state:\"open\",data:\"" + ac.getAnname()
+ "\" " + " }";
if (j < list.size() - 1)
{
str += ",";
}
}
}
str += "]";
str += " }";
if (i < actions.size() - 1)
{
str += ",";
}
}
}
return str;
}
調(diào)用:
@org.apache.struts2.convention.annotation.Action(results =
{ @Result(name = "success", location = "/main/user/action-list.jsp") })
public String list()
{
String str = "[";
// 從根開始
str += this.getJson(0);
str += "]";
this.renderJson(str);
return null;
}
其中Action是菜單類或權(quán)限類等的實(shí)體。
效果圖:
http://www.jstree.com/
其中提供了一種從后臺(tái)取數(shù)據(jù)渲染成樹的形式：
復(fù)制代碼 代碼如下:
$("#mytree").tree({
data : {
type : "json",
url : "${ctx}/user/power!list.do"
}
});
對(duì)于url中返回的值必須是它定義的json數(shù)據(jù)形式:
復(fù)制代碼 代碼如下:
$("#demo2").tree({
data : {
type : "json",
json : [
{ attributes: { id : "pjson_1" }, state: "open", data: "Root node 1", children : [
{ attributes: { id : "pjson_2" }, data: { title : "Custom icon", icon : "../media/images/ok.png" } },
{ attributes: { id : "pjson_3" }, data: "Child node 2" },
{ attributes: { id : "pjson_4" }, data: "Some other child node" }
]},
{ attributes: { id : "pjson_5" }, data: "Root node 2" }
]
}
});
這里需要一個(gè)從后臺(tái)實(shí)例集合轉(zhuǎn)換為它規(guī)定的json數(shù)據(jù)的形式.
復(fù)制代碼 代碼如下:
/** *//**
* 無限遞歸獲得jsTree的json字串
*
* @param parentId
* 父權(quán)限id
* @return
*/
private String getJson(long parentId)
{
// 把頂層的查出來
List<Action> actions = actionManager.queryByParentId(parentId);
for (int i = 0; i < actions.size(); i++)
{
Action a = actions.get(i);
// 有子節(jié)點(diǎn)
if (a.getIshaschild() == 1)
{
str += "{attributes:{id:\"" + a.getAnid()
+ "\"},state:\"open\",data:\"" + a.getAnname() + "\" ,";
str += "children:[";
// 查出它的子節(jié)點(diǎn)
List<Action> list = actionManager.queryByParentId(a.getAnid());
// 遍歷它的子節(jié)點(diǎn)
for (int j = 0; j < list.size(); j++)
{
Action ac = list.get(j);
//還有子節(jié)點(diǎn)(遞歸調(diào)用)
if (ac.getIshaschild() == 1)
{
this.getJson(ac.getParentid());
}
else
{
str += "{attributes:{id:\"" + ac.getAnid()
+ "\"},state:\"open\",data:\"" + ac.getAnname()
+ "\" " + " }";
if (j < list.size() - 1)
{
str += ",";
}
}
}
str += "]";
str += " }";
if (i < actions.size() - 1)
{
str += ",";
}
}
}
return str;
}
調(diào)用:
復(fù)制代碼 代碼如下:
@org.apache.struts2.convention.annotation.Action(results =
{ @Result(name = "success", location = "/main/user/action-list.jsp") })
public String list()
{
String str = "[";
// 從根開始
str += this.getJson(0);
str += "]";
this.renderJson(str);
return null;
}
其中Action是菜單類或權(quán)限類等的實(shí)體。
效果圖:
您可能感興趣的文章:
- Angular.JS實(shí)現(xiàn)無限級(jí)的聯(lián)動(dòng)菜單(使用demo)
- Vue.js組件tree實(shí)現(xiàn)無限級(jí)樹形菜單
- 實(shí)例詳解AngularJS實(shí)現(xiàn)無限級(jí)聯(lián)動(dòng)菜單
- js實(shí)現(xiàn)無限級(jí)樹形導(dǎo)航列表效果代碼
- JS實(shí)現(xiàn)無限級(jí)網(wǎng)頁折疊菜單(類似樹形菜單)效果代碼
- json+jQuery實(shí)現(xiàn)的無限級(jí)樹形菜單效果代碼
- javascript實(shí)現(xiàn)無限級(jí)select聯(lián)動(dòng)菜單
- 基于jquery的無限級(jí)聯(lián)下拉框js插件
- js無限級(jí)折疊菜單精簡版
- JS無限級(jí)導(dǎo)航菜單實(shí)現(xiàn)方法
相關(guān)文章
云開發(fā)是微信平臺(tái)新開放的功能，為開發(fā)者提供集成了服務(wù)器，數(shù)據(jù)庫和資源存儲(chǔ)的云服務(wù)。這篇文章主要介紹了小程序云開發(fā)初探(小結(jié))，感興趣的小伙伴們可以參考一下2018-10-10
由于<input type="file">的value屬性石只讀的，所以要取消選擇只能通過其他途徑，此處有2種方法2013-03-03
限時(shí)搶購-倒計(jì)時(shí)的完整實(shí)例(分享)
下面小編就為大家?guī)硪黄迺r(shí)搶購-倒計(jì)時(shí)的完整實(shí)例(分享)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
JavaScript控制網(wǎng)頁平滑滾動(dòng)到指定元素位置的方法
這篇文章主要介紹了JavaScript控制網(wǎng)頁平滑滾動(dòng)到指定元素位置的方法,實(shí)例分析了javascript操作頁面滾動(dòng)的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
基于JavaScript實(shí)現(xiàn)簡單抽獎(jiǎng)功能代碼實(shí)例
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)簡單抽獎(jiǎng)功能代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-10-10
js插件YprogressBar實(shí)現(xiàn)漂亮的進(jìn)度條效果
ProgressBar.js 是一個(gè)借助動(dòng)態(tài) SVG 路徑的漂亮的，響應(yīng)式的進(jìn)度條效果。使用 ProgressBar.js 可以很容易地創(chuàng)建任意形狀的進(jìn)度條。這個(gè) JavaScript 庫提供線條，圓形和方形等幾個(gè)內(nèi)置的形狀，但你可使用 Illustrator 或任何其它的矢量圖形編輯器創(chuàng)建自己的進(jìn)度條效果。2015-04-04
Immutable 在 JavaScript 中的應(yīng)用
在 JavaScript 中，對(duì)象是引用類型的數(shù)據(jù)，其優(yōu)點(diǎn)在于頻繁的修改對(duì)象時(shí)都是在原對(duì)象的基礎(chǔ)上修改，并不需要重新創(chuàng)建，這樣可以有效的利用內(nèi)存，不會(huì)造成內(nèi)存空間的浪費(fèi)，對(duì)象的這種特性可以稱之為 Mutable，中文的字面意思是「可變」2016-05-05
使用TextRange獲取輸入框中光標(biāo)的位...2006-10-10
解決css和js的{}與smarty定界符沖突問題的兩種方法
當(dāng)輸入url地址后網(wǎng)頁出現(xiàn)如下文所描述的問題通常是css和js的{}與smarty定界符沖突導(dǎo)致的，解決方法有兩個(gè)，具體如下，感興趣的朋友可以參考下2013-09-09
Javascript設(shè)計(jì)模式理論與編程實(shí)戰(zhàn)之簡單工廠模式
簡單工廠模式是由一個(gè)方法來決定到底要?jiǎng)?chuàng)建哪個(gè)類的實(shí)例, 而這些實(shí)例經(jīng)常都擁有相同的接口. 這種模式主要用在所實(shí)例化的類型在編譯期并不能確定， 而是在執(zhí)行期決定的情況。 說的通俗點(diǎn)，就像公司茶水間的飲料機(jī)，要咖啡還是牛奶取決于你按哪個(gè)按鈕2015-11-11