Jquer jsTree1.0 使用记录------（异步加载）

       最近项目用到树形控件，网上找很很久才找到适合不错的Jquer插件JsTree可是网上很少有全套的C#使用的资料研究了很久记录下来，以备下次使用好查询。

      官方网站：http://www.jstree.com/

      功能：

• 各种数据源 - HTML，XML，JSON
• 支持AJAX加载
• 拖放支持
• 高可配置性
• 主题支持+主题
• 使用jQuery的事件系统
• 可选键盘导航
• 在许多语言中保持相同的树
• 内联编辑
• 打开/关闭可选的动画
• 定义节点类型和微调他们
• 配置multitree拖放
• 支持可选的复选框树
• 搜索功能
• 支持插件
• 可选的状态保存使用Cookie

  JsTree 1.0异步加载  

View Code

 "json_data": {

                 // AJAX 获取数据
                 "ajax": {
                     // JSON 数据URL
                     "url": "ThreeHandler.ashx",
                     // 数据传参
                     "data": function (n) {
                         // the result is fed to the AJAX request `data` option
                         return {
                             "operation": "get_children",
                             "id": n.attr ? n.attr("id") : 0
                         };
                     }
                 }
             },

使用ajax异步获取后台JSON 实现树形异步加载。

URL后台数据来源，使用C# ashx一般处理程序

data 实现传参

异步后台JSON数据结构

{"attr":{"id":"<一看都明白是当前节点ID>"},"data":{"title":"<标题>","href":"<路径>"，"clss":"<好像是定义样式我没有用过>"},"state":"<是否打开也好像是是否显示加号”closed“关闭或”open“打开>"}

这是我异步加载获取一个节点时候的JSON拼装方法

/// <summary>
    /// 获取JSON字符
    /// </summary>
    /// <param name="OID"></param>
    /// <param name="ProductName"></param>
    /// <param name="CountSum"></param>
    /// <returns></returns>
    public string GetJsonStr(string OID , string ProductName,int CountSum)
    {
        string result = string.Empty;
        if (CountSum >0)
        {
            result = "{ \"attr\": { \"id\" : \"" + OID + "\"},\"data\": \"" + ProductName + "\",\"state\": \"closed\"}";
        }else
        {
            result = "{ \"attr\": { \"id\" : \"" + OID + "\"},\"data\": \"" + ProductName + "\"}";
        }
        return result;  
    
    }

返回ajax的数组集合："[{上面拼接返回的东西}，{上面拼接返回的东西}]"

 异步加载数据就记录这么多。有什么不对的地方请指正。

其他相关配置下次再写