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来动态读取树节点所达到的效果图。

 

 

 

 

转载于:https://www.cnblogs.com/pirlo/archive/2010/10/20/1856822.html