日期:2014-05-16  浏览次数:20515 次

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,标示匹配的节点样式