基于jsTree的無限級樹JSON數(shù)據(jù)的轉(zhuǎn)換代碼
更新時(shí)間：2010年07月27日 08:49:40 作者：
基于jsTree的無限級樹JSON數(shù)據(jù)的轉(zhuǎn)換代碼,需要的朋友可以參考下。
jstree 主頁 :
http://www.jstree.com/
其中提供了一種從后臺取數(shù)據(jù)渲染成樹的形式：
$("#mytree").tree({
data : {
type : "json",
url : "${ctx}/user/power!list.do"
}
});
對于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è)從后臺實(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/
其中提供了一種從后臺取數(shù)據(jù)渲染成樹的形式：
復(fù)制代碼 代碼如下:
$("#mytree").tree({
data : {
type : "json",
url : "${ctx}/user/power!list.do"
}
});
對于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è)從后臺實(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)無限級的聯(lián)動(dòng)菜單(使用demo)
- Vue.js組件tree實(shí)現(xiàn)無限級樹形菜單
- 實(shí)例詳解AngularJS實(shí)現(xiàn)無限級聯(lián)動(dòng)菜單
- js實(shí)現(xiàn)無限級樹形導(dǎo)航列表效果代碼
- JS實(shí)現(xiàn)無限級網(wǎng)頁折疊菜單(類似樹形菜單)效果代碼
- json+jQuery實(shí)現(xiàn)的無限級樹形菜單效果代碼
- javascript實(shí)現(xiàn)無限級select聯(lián)動(dòng)菜單
- 基于jquery的無限級聯(lián)下拉框js插件
- js無限級折疊菜單精簡版
- JS無限級導(dǎo)航菜單實(shí)現(xiàn)方法
相關(guān)文章
超出JavaScript安全整數(shù)限制的數(shù)字計(jì)算BigInt詳解
這篇文章給大家分享了超出JavaScript安全整數(shù)限制的數(shù)字計(jì)算BigInt的相關(guān)知識點(diǎn)，有興趣的朋友參考學(xué)習(xí)下。2018-06-06
javascript 拖放效果實(shí)現(xiàn)代碼
JavaScript擅長于修改頁面中的DOM元素，但是我們使用JavaScript通常只是實(shí)現(xiàn)一些簡單功能，例如實(shí)現(xiàn)圖片的翻轉(zhuǎn)，網(wǎng)頁中的標(biāo)簽頁，等等。這篇文章將向你展示如何在頁面中，對創(chuàng)建的元素實(shí)現(xiàn)拖放。2010-01-01
PHP中如何unicode編碼，在JavaScript中h如何解碼
PHP中如何unicode編碼，在JavaScript中如何解碼？js中h這樣的，怎么轉(zhuǎn)碼？2023-07-07
本系列的開篇文章我們一起探討了jQuery如何開發(fā)插件，今天這篇文章，我們來繼續(xù)插件開發(fā)之旅，希望大家能夠喜歡。2015-01-01
JavaScript?Canvas實(shí)現(xiàn)圖片局部放大鏡效果
這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript?Canvas實(shí)現(xiàn)圖片局部放大鏡效果,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
json_decode 索引為數(shù)字時(shí)自動(dòng)排序問題解決方法
這篇文章主要介紹了使用son_encode 給前端返回?cái)?shù)據(jù)，結(jié)果順序不對，經(jīng)debug調(diào)試，發(fā)現(xiàn)是json_encode 函數(shù)的問題,變成 " " + 數(shù)字即可,需要的朋友可以參考下2020-03-03
JavaScript根據(jù)CSS的Media Queries來判斷瀏覽設(shè)備的方法
這篇文章主要介紹了JavaScript根據(jù)CSS的Media Queries來判斷瀏覽設(shè)備的方法,主要思路是通過CSS Media Queries改變一個(gè)類的某個(gè)屬性值(例如 z-index),然后用JavaScript讀取判斷,需要的朋友可以參考下2016-05-05
這篇文章主要介紹了JS前端解壓zip的方法和技巧,業(yè)務(wù)中有時(shí)候需要獲取某個(gè) zip 壓縮包內(nèi)的文件內(nèi)容展示到前端,在 zip 包體積不是那么大的時(shí)候并且不涉及壓縮包解密的時(shí)候,可以考慮純前端方案,需要的朋友可以參考下2024-03-03
JS使用getComputedStyle()方法獲取CSS屬性值
經(jīng)常會(huì)用到j(luò)s來獲取元素的CSS樣式，由于方法眾多，在下面的文章中為大家詳細(xì)整理下2014-04-04
支持IE和FF的div＋css選項(xiàng)卡...2006-11-11