基于jsTree的無限級樹JSON數(shù)據(jù)的轉(zhuǎn)換代碼
更新時間：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" }
]
}
});
這里需要一個從后臺實例集合轉(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é)點
if (a.getIshaschild() == 1)
{
str += "{attributes:{id:\"" + a.getAnid()
+ "\"},state:\"open\",data:\"" + a.getAnname() + "\" ,";
str += "children:[";
// 查出它的子節(jié)點
List<Action> list = actionManager.queryByParentId(a.getAnid());
// 遍歷它的子節(jié)點
for (int j = 0; j < list.size(); j++)
{
Action ac = list.get(j);
//還有子節(jié)點(遞歸調(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)限類等的實體。
效果圖:
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" }
]
}
});
這里需要一個從后臺實例集合轉(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é)點
if (a.getIshaschild() == 1)
{
str += "{attributes:{id:\"" + a.getAnid()
+ "\"},state:\"open\",data:\"" + a.getAnname() + "\" ,";
str += "children:[";
// 查出它的子節(jié)點
List<Action> list = actionManager.queryByParentId(a.getAnid());
// 遍歷它的子節(jié)點
for (int j = 0; j < list.size(); j++)
{
Action ac = list.get(j);
//還有子節(jié)點(遞歸調(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)限類等的實體。
效果圖:
您可能感興趣的文章:
相關(guān)文章
云開發(fā)是微信平臺新開放的功能，為開發(fā)者提供集成了服務(wù)器，數(shù)據(jù)庫和資源存儲的云服務(wù)。這篇文章主要介紹了小程序云開發(fā)初探(小結(jié))，感興趣的小伙伴們可以參考一下2018-10-10
由于<input type="file">的value屬性石只讀的，所以要取消選擇只能通過其他途徑，此處有2種方法2013-03-03
下面小編就為大家?guī)硪黄迺r搶購-倒計時的完整實例(分享)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
JavaScript控制網(wǎng)頁平滑滾動到指定元素位置的方法
這篇文章主要介紹了JavaScript控制網(wǎng)頁平滑滾動到指定元素位置的方法,實例分析了javascript操作頁面滾動的技巧,非常具有實用價值,需要的朋友可以參考下2015-04-04
基于JavaScript實現(xiàn)簡單抽獎功能代碼實例
這篇文章主要介紹了基于JavaScript實現(xiàn)簡單抽獎功能代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-10-10
js插件YprogressBar實現(xiàn)漂亮的進(jìn)度條效果
ProgressBar.js 是一個借助動態(tài) SVG 路徑的漂亮的，響應(yīng)式的進(jìn)度條效果。使用 ProgressBar.js 可以很容易地創(chuàng)建任意形狀的進(jìn)度條。這個 JavaScript 庫提供線條，圓形和方形等幾個內(nèi)置的形狀，但你可使用 Illustrator 或任何其它的矢量圖形編輯器創(chuàng)建自己的進(jìn)度條效果。2015-04-04
Immutable 在 JavaScript 中的應(yīng)用
在 JavaScript 中，對象是引用類型的數(shù)據(jù)，其優(yōu)點在于頻繁的修改對象時都是在原對象的基礎(chǔ)上修改，并不需要重新創(chuàng)建，這樣可以有效的利用內(nèi)存，不會造成內(nèi)存空間的浪費(fèi)，對象的這種特性可以稱之為 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)致的，解決方法有兩個，具體如下，感興趣的朋友可以參考下2013-09-09
Javascript設(shè)計模式理論與編程實戰(zhàn)之簡單工廠模式
簡單工廠模式是由一個方法來決定到底要創(chuàng)建哪個類的實例, 而這些實例經(jīng)常都擁有相同的接口. 這種模式主要用在所實例化的類型在編譯期并不能確定， 而是在執(zhí)行期決定的情況。 說的通俗點，就像公司茶水間的飲料機(jī)，要咖啡還是牛奶取決于你按哪個按鈕2015-11-11