jstree 学习笔记

1) 官网:http://jstree.com/ 

jstree版本:v.1.0.rc2

 

2) jstree 可以异步的不停的读取数据库的内容。在数据量很大的时候,可以一层一层的去读取树节点的内容,不至于界面卡死掉,有很好的用户体验。

前台javascript调用jstree的方法(更多方法可以参考官网的文档,写的很详细)。 

javascript: 

$(function () {
     $("#demo2").jstree({   
  
"json_data" : {  
      
"ajax" : {  
   
"url" : "jsondata.aspx",  
   
"data" : function (n) {   
       
return { 
    
"id" : n.attr ? n.attr("id") : 0
       };   
   } 
      }
  },
  
"themes" : {
      
"theme" : "classic",
      
"dots" : true,
      
"icons" : false
  },
  
"plugins" : [ "themes""json_data"
     });     
 }); 


展开所有节点: $("#demo2").jstree("open_all");

 

3) 在jsondata.aspx 页面的page_load中,通过读取数据库拿到每层树节点所要显示的内容,再拼接成jsondata格式的字符串,response.write出来。

jsondata 格式:

[
 { "data" : "A node", "children" : [ { "data" : "Only child", "state" : "closed" } ], "state" : "open" }

]

 

4) 我应用jstree来动态读取树节点所达到的效果图。

 

 

 

 

posted @ 2010-10-20 16:35  jmz  阅读(2814)  评论(0编辑  收藏  举报
Copyright by © Pippon