我的漫漫程序之旅

专注于JavaWeb开发
随笔 - 37, 文章 - 309, 评论 - 411, 引用 - 0
数据加载中……

基于jsTree的无限级树JSON数据的转换

jstree 主页 :
http://www.jstree.com/

其中提供了一种从后台取数据渲染成树的形式:
 $("#mytree").tree({
      data  : 
{
        type  : 
"json",
        url : 
"${ctx}/user/power!list.do"
      }

}
);

对于url中返回的值必须是它定义的json数据形式:

$("#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" } 
    ]
  }

}
);


这里需要一个从后台实例集合转换为它规定的json数据的形式.

/**
     * 无限递归获得jsTree的json字串
     * 
     * 
@param parentId
     *            父权限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);
            
// 有子节点
            if (a.getIshaschild() == 1)
            
{
                str 
+= "{attributes:{id:\"" + a.getAnid()
                        + "\"}
,state:\"open\",data:\"" + a.getAnname() + "\" ,";
                str += "children:[";
                
// 查出它的子节点
                List<Action> list = actionManager.queryByParentId(a.getAnid());
                
// 遍历它的子节点
                for (int j = 0; j < list.size(); j++)
                
{
                    Action ac 
= list.get(j);
                    
//还有子节点(递归调用)
                    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;
    }

调用:
@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是菜单类或权限类等的实体。
效果图:



posted on 2009-05-05 17:09 々上善若水々 阅读(17006) 评论(27)  编辑  收藏

评论

# re: 基于jsTree的无限级树JSON数据的转换  回复  更多评论   

exttree最好了!配合dwr ok
2009-05-05 22:50 | 大罗卜

# re: 基于jsTree的无限级树JSON数据的转换  回复  更多评论   

Action ac = list.get(j);
//还有子节点(递归调用)
if (ac.getIshaschild() == 1)
{
this.getJson(ac.getParentid());
}
else
{

help
2009-05-05 23:56 | web tasarımı

# re: 基于jsTree的无限级树JSON数据的转换  回复  更多评论   

@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;
}
2009-05-05 23:56 | yuz estetigi

# re: 基于jsTree的无限级树JSON数据的转换  回复  更多评论   

$("#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" }
]
}
});
2009-05-05 23:57 | Burun Estetigi

# re: 基于jsTree的无限级树JSON数据的转换  回复  更多评论   

这个树真的很不错, 还有内置的右键菜单及事件调用. 比 xloadtree 好看.
2009-05-06 09:28 | BeanSoft

# re: 基于jsTree的无限级树JSON数据的转换  回复  更多评论   

不知道怎么回事,我用这个树的时候,发现很多问题,最有意思的是,我用不压缩的能用,用那个min版竟然报错。
2009-05-06 13:38 | 阳衡锋

# re: 基于jsTree的无限级树JSON数据的转换  回复  更多评论   

@阳衡锋
请确认已经导入了
<script type="text/javascript" src="path-to-jsTree/_lib.js"></script>

我用<script type="text/javascript" src="path-to-jsTree/tree_component.min.js"></script>试了下,在我的工程里没发现问题.ff和ie均测试。 
2009-05-07 08:26 | 々上善若水々

# re: 基于jsTree的无限级树JSON数据的转换  回复  更多评论   

没,我用<script type="text/javascript" src="path-to-jsTree/tree_component.min.js"></script>跑得好好的,换成
<script type="text/javascript" src="path-to-jsTree/tree_component.min.js"></script>就报错了。我发邮件给jstree的作者,他要我去下载最新版,下载下来的还是一样。不知道最新的版本时候解决了这个问题。
2009-05-07 12:47 | 阳衡锋

# re: 基于jsTree的无限级树JSON数据的转换[未登录]  回复  更多评论   

能不能把右键菜单给取消?
2009-09-07 21:37 |

# re: 基于jsTree的无限级树JSON数据的转换  回复  更多评论   

@风
可以,请自行参考jstree api
2009-09-09 13:37 | 々上善若水々

# re: 基于jsTree的无限级树JSON数据的转换  回复  更多评论   

@阳衡锋
作者在最新版里提供的下载确实是报错的,jquery.xslt.js这个插件不知道为什么被作者给换掉了,貌似也不是最新版的插件,在火狐下是好的,ie下解析xml是有问题的,你从插件的官方下载最新的替换就没事了,或者用作者老版本的这个插件。
2009-09-12 16:58 | 周万峰

# re: 基于jsTree的无限级树JSON数据的转换  回复  更多评论   

@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 中 的 this.renderJson 引用那个类库?
2013-08-22 08:52 | javaWeb

# re: 基于jsTree的无限级树JSON数据的转换  回复  更多评论   

sdaf
2014-03-04 15:18 | @fei

# re: 基于jsTree的无限级树JSON数据的转换  回复  更多评论   

json转换为json树形数据,怎么写啊,其中字段里有两个节点,一个是ID,一个是parentID,怎么树形显示啊?
2014-03-04 15:20 | @fei

# re: 基于jsTree的无限级树JSON数据的转换  回复  更多评论   

{ID: "pjson_2"}, Veri: {title: "Özel simge", simgesi: ".. / media / images / ok.png"}},
{Özellikleri: {ID: "pjson_3"}, Veri: "Çocuk düğüm 2"},
{Özellikleri: {ID: "pjson_4"}, Veri: "Diğer Bazı Çocuk düğüm"}
]},

http://otomatikrentacar.com
2014-06-24 03:24 | Otomatik Rent A Car

# re: 基于jsTree的无限级树JSON数据的转换  回复  更多评论   

: "pjson_2"}, Veri: {title: "Özel simge", simgesi: ".. / media / images / ok.png"}},
{Özellikleri: {ID: "pjson_3"}, Veri: "Çocuk düğüm 2"},
{Özellikleri: {ID: "pjson_4"}, Veri: "Diğer Bazı Çocuk
http://ilkyazreklam.com
2014-07-14 21:00 | ilkyaz reklam

# re: 基于jsTree的无限级树JSON数据的转换  回复  更多评论   

: "pjson_2"}, Veri: {title: "Özel simge", simgesi: ".. / media / images / ok.png"}},
{Özellikleri: {ID: "pjson_3"}, Veri: "Çocuk düğüm 2"},
{Özellikleri: {ID: "pjson_4"}, Veri: "Diğer Bazı Çocuk "}
http://ilkyazreklam.com
2014-07-14 21:01 | ilkyaz reklam

# re: 基于jsTree的无限级树JSON数据的转换  回复  更多评论   

ukash bozdurma icin zel simge", simgesi: ".. / media / images / ok.png"}},
{Özellikleri: {ID: "pjson_3"}, Veri: ") Result(name = "success", location = "/main/user/action-list.jsp") })
public String list()
{
String str = "[";
// 从根开始
str += this.getJson(0);
str += "]";
this.renderJson
2014-07-14 21:05 | ukash bozdurma

# re: 基于jsTree的无限级树JSON数据的转换  回复  更多评论   

likleri: {ID: "pjson_3"}, Veri: ") Sonuç (name =" Başarı ", Location =" / ana / kullanıcı / Aksiyon-list.jsp ")})
Kamu Dize listesi ()
{
Dize str = "[";
/ / root gelen
str + = this.getJson (0);
str + = ""]; http://www.hepsiukash.com/p/ukash-bozdurma.html
2014-07-14 21:06 | ukash bozdurma

# re: 基于jsTree的无限级树JSON数据的转换  回复  更多评论   

Bahis, Poker, Casino, Rulet, Tavla, Batak, İddaa, Okey, Android Bahis, İphone Bahis, Best10 CAsino, Bets10 Casino


http://www.androidbahis.com/
2014-07-15 09:33 | ahmet katar

# re: 基于jsTree的无限级树JSON数据的转换  回复  更多评论   

{ attributes: { id : "pjson_2" }, data: { title : "Custom icon", icon : "../media/images/ok.png" }

+ "\"},state:\"open\",data:\"" + a.getAnname() + "\" ,";

{ @Result(name = "success", location = "/main/user/action-list.jsp") })


https://www.oddsring404.com/livecasino?wm=8308867
2014-07-25 09:31 | OddsRing Giriş

# re: 基于jsTree的无限级树JSON数据的转换  回复  更多评论   

Kilercioğlu evden eve nakliyat şehir içi ve şehirler arası taşımacılık için kurumsal web sayfamız http://www.sehirlerarasievdenevetasimacilik.com.tr
2014-08-05 01:42 | şehirlerarası nakliyat

# re: 基于jsTree的无限级树JSON数据的转换  回复  更多评论   

kilercioğlu nakliyat eşya depolama ofis taşıma ve kurumsal taşımacılık hizmetleri. http://www.istanbulizmirevdenevenakliye.com
2014-08-05 01:44 | eşya depolama

# re: 基于jsTree的无限级树JSON数据的转换  回复  更多评论   

Kurumsal taşımacılık iş yeri taşıma ofis taşımacılığı ve evden eve nakliyat
2014-08-05 01:46 | ofis taşıma şirketleri

# re: 基于jsTree的无限级树JSON数据的转换  回复  更多评论   

ts2.convention.annotation.Action(results =
{ @Result(name = "success", location = "/main/user/action-list.jsp") })
public String list()

http://www.bozdurmak.com/
2014-08-08 05:54 | ukash bozdurma

#  re  回复  更多评论   

额r热r
2014-08-22 15:52 | f'f

# re: 基于jsTree的无限级树JSON数据的转换  回复  更多评论   

d : "pjson_3" }, data: "Child node 2" },
{ attributes: { id : "pjson_4" }, data: "Some other child node" }
]},
{ attributes: { id : "pj
2015-04-18 15:37 | https://iddaaoyunlari.com/

只有注册用户登录后才能发表评论。


网站导航: