jsTree的吐槽

本来没记blog的习惯的

但对于jsTree，丫不吐糟不行了

 

先把树建好，这个简单，不多扯，对照文档很容易理解：

 

$("#simpleTree").jstree({ "ui":{ "select_limit":1 }, "json_data" : { "ajax" : { "url":"dpsCustomerAreaAction!getLocation.htm", "data":function(n){ return {"id":"0"}; } } }, "plugins" : [ "themes", "json_data","ui"] });

 

以下是吐糟：

首先是选择事件的监听：这里只做简单的alert

$("#simpleTree").bind("select_node.jstree",function(e , data){ var id = data.rslt.obj.attr("id"); alert(id); });

 

但丫的官方文档上写着什么：

.select_node ( node , check , event )

喂喂……差太远了吧……我的js可是从你官网下的……

 

接下来被喷的是json：

这是我的试验用Java代码

 

String perString="["+ "{ /"attr/":{/"id/":/"1/",/"name/":/"1name/" },/"data/": {/"title/": /"A node/"}, /"children/" : [ { /"data/":{/"title/" :/"Child1/"}, /"state/" : /"closed/",/"attr/":{/"id/":/"2/",/"name/":/"2name/" } } ,{/"data/":{/"title/":/"Child2/"},/"state/":/"closed/",/"attr/":{/"id/":/"3/",/"name/":/"3name/" }}] , /"state/" : /"open/" },"+ "{/"data/":{/"title/":/"Ajax node/"},/"attr/":{/"id/":/"4/",/"name/":/"4name/" }}"+ "]";

 

这里注意的是：如果想要在事件响应中用data.rslt.obj.attr("id")的形式，那json里一定要attr的元素，否则照例子是不会得到想要的结果的。

看了晕？那看json的结果吧

[{ "attr":{"id":"1","name":"1name" },"data": {"title": "A node"}, "children" : [ { "data":{"title" :"Child1"}, "state" : "closed","attr":{"id":"2","name":"2name" } } ,{"data":{"title":"Child2"},"state":"closed","attr":{"id":"3","name":"3name" }}] , "state" : "open" },{"data":{"title":"Ajax node"},"attr":{"id":"4","name":"4name" }}]

每个元素不管是property还是value都要用引号引起来，写代码时加上转义符……晕啊……

最后来一个让大家一起试着玩的：

"data": {"title": "A node"}，把json中所有类似于这样的元素组都改成"data":  "A node"

如果你的树还有children元素，那么……恭喜，在火狐下会有很好玩的结果等着你（IE下未试）……

好吧，我承认我Ajax不是很强……

不过比自己写棵树出来好吧……明天要试试拖拽……希望春哥能保佑我一切顺利……

另外，哪位高人擅长用simpleTree处理json，请留名指导小生……官网似乎被和谐了……啊，话说，我还是喜欢乱世和混沌啊……

修正：

测试的java代码应为：

String perString="["+
			"{/"data/": {/"title/": /"A node/", /"children/" : [ { /"data/":{/"title/" :/"Child1/", /"state/" : /"closed/"},/"attr/":{/"id/":/"2/",/"name/":/"2name/" } } ,{/"data/":{/"title/":/"Child2/",/"state/":/"closed/"},/"attr/":{/"id/":/"3/",/"name/":/"3name/" }}] , /"state/" : /"open/"},/"attr/":{/"id/":/"1/",/"name/":/"1name/" }},"+
			"{/"data/":{/"title/":/"Ajax node/"},/"attr/":{/"id/":/"4/",/"name/":/"4name/" }}"+
		"]


结果为：

[{"data": {"title": "A node"}, "children" : [ { "data":{"title" :"Child1", "state" : "closed"},"attr":{"id":"2","name":"2name" } } ,{"data":{"title":"Child2","state":"closed"},"attr":{"id":"3","name":"3name" }}] , "state" : "open","attr":{"id":"1","name":"1name" }},{"data":{"title":"Ajax node"},"attr":{"id":"4","name":"4name" }}]


再修正下：

String perString="["+
			"{/"data/": {/"title/": /"A node/",/"state/" : /"open/"}, /"children/" : [ { /"data/":{/"title/" :/"Child1/", /"state/" : /"closed/"},/"attr/":{/"id/":/"2/",/"name/":/"2name/" } } ,{/"data/":{/"title/":/"Child2/",/"state/":/"closed/"},/"attr/":{/"id/":/"3/",/"name/":/"3name/" }}] ,/"attr/":{/"id/":/"1/",/"name/":/"1name/" }},"+
			"{/"data/":{/"title/":/"Ajax node/"},/"attr/":{/"id/":/"4/",/"name/":/"4name/" }}"+
		"]";
		


结果

[{"data": {"title": "A node","state" : "open"}, "children" : [ { "data":{"title" :"Child1", "state" : "closed"},"attr":{"id":"2","name":"2name" } } ,{"data":{"title":"Child2","state":"closed"},"attr":{"id":"3","name":"3name" }}] ,"attr":{"id":"1","name":"1name" }},{"data":{"title":"Ajax node"},"attr":{"id":"4","name":"4name" }}]


回头看看，修正的过程也是种自我提升啊，不要怕犯错，恩……