JsTree 1.0 使用小结

　　jsTree 从 0.99版本到1.0版本之间语法和配置发生了很大的变化，且1.0版的文档也不是很详细，给开发带来了一些麻烦。以下是使用jsTree 1.0-rc3的一些小结：

　　版本：jsTree 1.0-rc3

　　主要实现功能：异步加载树、绑定节点的单击事件、配置节点图标、设置节点的开关状态、配置节点class、后台搜索树 

 1、异步加载树：如果节点下没有子节点，系统会异步加载子节点，如果节点下有子节点，则不会再次加载数据

 $("#treeDiv").jstree({
                "json_data": {
                    "ajax": {//不需要设置返回的类型
                        "url": '.....ashx',//加载数据的IHttpHandler  路径
                        "data": function(n){

　　　　　　　　　　　　//取数据时的参数，用{}括起来表示是javascript对象，当第一次加载或点击节点展开时，就是把参数传递到后台

　　　　　　　　　　　　//在此用户可以子定义要传递的参数

　　　　　　　　　　　　  return {id:n.attr？n.attr("id")：0，...};

　　　　　　　　　　　　}
                    }
                }
                , "themes": { "theme": "default", "dots": true, "icons": true }
                , "plugins": ["themes", "json_data", "ui"]
            });
        };

 

2、绑定节点的单击事件：由于未找到通过配置如何绑定，所以采用jQuery的delegate 方式在页面绑定，通过在后台设置href的值，然后前台解析

  $("#treeDiv").delegate("a", "click", function() {
                var href = eval("(" + $(this).attr("href") + ")");

　　　　}）;

3、基本配置：

        {  "attr" : {"id":"标示 "};

             ,"data" :{"title": " 显示的标题 "
　　　　            　,"attr":{"href" :"可以自定义一些值，在UI 解析"

　　          　　　　　　　　 ,"class": "jstree-search"//可以预先在后台给节点设置样式

           　　　　　　　　  }
          　 　　　　,"icon":" 图标的地址  "

           　　　　}

            , "state" : "closed" 或"open"

　　　　,"children":[ {子节点1},{子节点2}]

          }

4、后台搜索树：此功能没有用jsTree的自带功能，而是根据搜索条件自己重新加载数据，然后通过设置节点的class，标示匹配的节点样式