Jquery Tree控件如何进行JSON数据绑定

一、 前端资源引用：

<link href="JS/Tree/tree.css" rel="stylesheet" type="text/css" />   
 <script src="JS/jquery-1.4.2.min.js" type="text/javascript"></script>
 <script src="JS/Tree/TreeView.js" type="text/javascript"></script>

 

二、 HTML代码：

<div id="treeDiv"></div>

 

三、 创建数据请求页面(HttpHandler),aspx或者ashx文件都可以，我们需要做的就是将树形控件中的属性封装在匿名对象中，然后用JavaScriptSerialize类进行json数据格式的解析，具体代码如下：

        //将TreeView中的属性封装成Object对象；

        object NodeAdd(string sid, string stext, bool bshowcheck, 
                                bool bPermissions, string svalue, 
                                 string scheckstate, bool bisexpand, 
                       bool bcomplete, bool bhasChildren, object[] oChildNodes)
        {
            var obj = new
            {
                id = sid,   //ID标识
                text = stext,  //显示的文本
                showcheck = bshowcheck,  //是否显示选择框
                Permissions = bPermissions,  //是否有权限
                value = svalue,  //显示文本对应的值
                checkstate = scheckstate,  //是否选中
                isexpand = bisexpand,  //是否展开
                complete = bcomplete,
                hasChildren = bhasChildren,  //是否有子节点
                ChildNodes = oChildNodes  //子节点内容
            };
            return obj;
        }

 

       //JSON序列化对象；
 
        string JsonSerialize(object o)
        {
            JavaScriptSerializer jSerializer = new JavaScriptSerializer();
            return jSerializer.Serialize(o);
        }

        //判断是否有子节点
 
        bool HasChild(int parentid)
        {
            bool count =false;
            DataSet ds = this.ds("select count(*) from [table name] where PID=" + parentid);
            if (ds.Tables[0].Rows.Count>0)
            {
                count = true;
            }
            return count;

        // 返回JSON字符串
 
        string BuilderJsonStr(int parentid)
        {
            string result = string.Empty;
            int pid = parentid;
            DataSet ds = this.ds("select * from [table name] where PID=" + parentid);
            foreach (DataRow dr in ds.Tables[0].Rows)
            {
                pid = int.Parse(dr["ID"].ToString());
                result += JsonSerialize(NodeAdd(dr["ID"].ToString(), dr["Name"].ToString(), true, true, dr["PID"].ToString(), "1", true, true,
                        HasChild(parentid),objectArray(pid)))+",";
            }
            return "["+result.TrimEnd(',')+"]";
        }


        // 递归生成object[]数组
 
        object[] objectArray(int parentid)
        {
            int pid = parentid;
            DataSet ds = this.ds("select * from [table name] where PID=" + parentid);
            object[] objects=new object[ds.Tables[0].Rows.Count];
            for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
            {
               DataRow dr = ds.Tables[0].Rows[i];
                pid =int.Parse(dr["ID"].ToString());
                objects[i] = NodeAdd(dr["ID"].ToString(), dr["Name"].ToString(), true, true, dr["PID"].ToString(),
                                     "1", true, true,
                                     HasChild(parentid), objectArray(pid));
            }
          
            return objects;
        }

当然，我们将json数据准备好之后需要response出来，至于下面的输出json的代码可以根据需要添加在不同的地方(方法体最后或者方法调用的地方)

Response.ContentType = "application/json";
Response.Write(BuilderJsonStr(param));
Response.End();

四、 最后通过jquery ajax方法将json数据绑定到tree控件

<script type="text/javascript">
            $(function() {
                $.getJSON("GetTreeData.aspx", function(msg) {
                    var o = {
                        showcheck: true,
                        url: "GetTreeData.aspx",
                        datatype: "json",
                        onnodeclick: function(item) {
                            alert(item.id);
                        }
                    };
                    o.data = msg;
                    $('#treeDiv').treeview(o);
                });
            });
 </script>