基于jstree的无限级树json数据的转换 -凯发k8网页登录

专注于javaweb开发
随笔 - 39, 文章 - 310, 评论 - 411, 引用 - 0
数据加载中……

基于jstree的无限级树json数据的转换

jstree 凯发k8网页登录主页 :
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 々上善若水々 阅读(17478) 评论(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 |

# 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 |

# 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 |

# re: 基于jstree的无限级树json数据的转换  回复     

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

# re: 基于jstree的无限级树json数据的转换  回复     

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

# re: 基于jstree的无限级树json数据的转换  回复     

@阳衡锋
请确认已经导入了


我用试了下,在我的工程里没发现问题.ff和ie均测试。 
2009-05-07 08:26 | 々上善若水々

# re: 基于jstree的无限级树json数据的转换  回复     

没,我用跑得好好的,换成
就报错了。我发邮件给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 |

# re: 基于jstree的无限级树json数据的转换  回复     

sdaf
2014-03-04 15:18 |

# re: 基于jstree的无限级树json数据的转换  回复     

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

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

2014-06-24 03:24 |

# 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
2014-07-14 21:00 |

# 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 "}
2014-07-14 21:01 |

# 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 |

# 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 = ""];
2014-07-14 21:06 |

# re: 基于jstree的无限级树json数据的转换  回复     

bahis, poker, casino, rulet, tavla, batak, iddaa, okey, android bahis, iphone bahis, best10 casino, bets10 casino


2014-07-15 09:33 |

# 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") })



2014-07-25 09:31 |

# re: 基于jstree的无限级树json数据的转换  回复     

kilercioğlu evden eve nakliyat şehir içi ve şehirler arası taşımacılık için kurumsal web sayfamız
2014-08-05 01:42 |

# re: 基于jstree的无限级树json数据的转换  回复     

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

# 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 |

# re: 基于jstree的无限级树json数据的转换  回复     

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


2014-08-08 05:54 |

#  re  回复     

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

# 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 |

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


网站导航:
              
 
网站地图