基于JQuery的asp.net树

在网上找了tree,想直接拿来用,谁知道竟然没有找到基于asp.net的tree,索性自己便把jquery的tree拿来研究了下,然后结合者asp.net,做了一个递归树.

本tree的数据从sql的表中提取而来,sql表的结构如下:

上面的表中  parentmodeuleID是代表父ID的标志,如果当前节点为根节点,则规定为0. 

然后就是如何将上面的单表来组成树状结构.这时我们可以利用IList来加载数据库models来实现,具体Tree类如下:

 

using  System;
using  System.Collections.Generic;
using  System.Linq;
using  System.Web;
using  System.Web.UI;


namespace  RolePermission1
{
     public   class  Tree
    {
         public   int  ModuleID {  get ;  set ; }

         public   int  ParentID {  get ;  set ; }

         public   string  ModulePath {  get ;  set ; }

         public   string  ModuleName {  get ;  set ; }

        
    }
}

 

然后就是在公共处理页面,将数据库的数据进行组织,形成符合jquery tree的json格式,具体代码如下:

 

 [WebMethod]
         public   static   string  GetJson()
        {
             string  json  =   " [ " ;
            IList < Tree >  t  =  DB.returnParentTree();
             foreach  (Tree model  in  t)
            {
                 if  (model  !=  t[t.Count  -   1 ])
                {
                    json  +=  GetJsonByModel(model)  +   " , " ;
                }
                 else
                {
                    json  +=  GetJsonByModel(model);
                }
            }
            json  +=   " ] " ;
            json = json.Replace( " ' " , " \ "" );
             return  json;
        }

         public   static   string  GetJsonByModel(Tree t)
        {
             string  json  =   "" ;
             bool  flag  =  DB.isHaveChild(t.ModuleID);

            json  =   " { "
                       +   " 'id':' "   +  t.ModuleID  +   " ', "
                       +   " 'text':' "   +  t.ModuleName  +   " ', "
                       +   " 'value':' "   +  t.ModuleID  +   " ', "
                       +   " 'showcheck':true, "
                       +   " 'checkstate':'0', "
                       +   " 'hasChildren': "   +  flag.ToString().ToLower()  +   " , "
                       +   " 'isexpand':false, "
                       +   " 'ChildNodes': " ;   /* 奶奶的,这个地方一定要注意是ChildNodes  而不是childNodes 害得我无语了 */
             if  ( ! flag)
            {
                json  +=   " null, " ;
                json  +=   " 'complete':false} " ;
            }
             else
            {
                json  +=   " [ " ;
                IList < Tree >  list  =  DB.getChild(t.ModuleID);
                 foreach  (Tree tree  in  list)
                {
                     if  (tree  !=  list[list.Count  -   1 ])
                    {
                        json  +=  GetJsonByModel(tree)  +   " , " ;
                    }
                     else
                    {
                        json  +=  GetJsonByModel(tree);
                    }
                }
                json  +=   " ],'complete':true} " ;
            }
             return  json;
        }

 

 

上面就是利用递归的方式来将数据库的数据组合成合适的json数据,利用到的数据库操作类代码如下:

 

using  System;
using  System.Collections.Generic;
using  System.Linq;
using  System.Web;
using  System.Data;
using  System.Data.SqlClient;

namespace  RolePermission1
{
     public   class  DB
    {

         public   static   readonly   string  connStr = System.Configuration.ConfigurationManager.AppSettings[ " connStr " ];

         public   static  SqlConnection GetConn()
        {
            SqlConnection conn  =   new  SqlConnection(connStr);
            conn.Open();
             return  conn;
        }

         public   static  DataTable GetDT( string  sql)
        {
            DataTable dt  =   new  DataTable();
             using  (SqlConnection conn  =  DB.GetConn())
            {
                SqlDataAdapter sda  =   new  SqlDataAdapter(sql, conn);
                sda.Fill(dt);
            }
             return  dt;
        }

         public   static  IList < Tree >  returnParentTree()
        {
            IList < Tree >  t  =   new  List < Tree > ();
             string  sql  =   " select * from Models where [ParentModuleID]=0 order by OrderBy asc " ;
            DataTable dt  =  GetDT(sql);
             foreach  (DataRow dr  in  dt.Rows)
            {
                Tree tParent  =   new  Tree();
                tParent.ModuleID  =  Int32.Parse(dr[ " ID " ].ToString());
                tParent.ModuleName  =  dr[ " ModuleName " ].ToString();
                tParent.ModulePath  =  dr[ " MenuPath " ].ToString();
                tParent.ParentID  =  Int32.Parse(dr[ " ParentModuleID " ].ToString());
                t.Add(tParent);
            }
             return  t;
        }

         public   static   bool  isHaveChild( int  id)
        {
             bool  flag = false ;
             string  sql  =   " select ID from Models where ParentModuleID= " + id + "" ;
            DataTable dt  =  GetDT(sql);
             if  (dt.Rows.Count  >   0 )
            {
                flag  =   true ;
            }
             return  flag;
            
        }
         public   static  IList < Tree >  getChild( int  id)
        {
            IList < Tree >  t  =   new  List < Tree > ();
             string  sql  =   " select * from Models where ParentModuleID= "   +  id  +   "" ;
            DataTable dt  =  GetDT(sql);
             foreach  (DataRow dr  in  dt.Rows)
            {
                Tree tParent  =   new  Tree();
                tParent.ModuleID  =  Int32.Parse(dr[ " ID " ].ToString());
                tParent.ModuleName  =  dr[ " ModuleName " ].ToString();
                tParent.ModulePath  =  dr[ " MenuPath " ].ToString();
                tParent.ParentID  =  Int32.Parse(dr[ " ParentModuleID " ].ToString());
                t.Add(tParent);
            }
             return  t;
        }

    }
}

 

 

好了,当json数据处理好以后,就可以将json打到前台,交给jquery来处理了,

 

<% @ Page Language = " C# "  AutoEventWireup = " true "  CodeBehind = " Default.aspx.cs "  Inherits = " RolePermission1._Default "   %>
<! DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
< html  xmlns ="http://www.w3.org/1999/xhtml"   >
< head  runat ="server" >
     < title ></ title >
     < script  src ="jquery.treeview/lib/jquery.js"  type ="text/javascript" ></ script >
     < link  href ="jquery.treeview/tree.css"  rel ="stylesheet"  type ="text/css"   />
     < script  src ="jquery.treeview/common.js"  type ="text/javascript" ></ script >
     < script  src ="jquery.treeview/jquery.tree.js"  type ="text/javascript" ></ script >
</ head >
< body >
     < form  id ="form1" >
      < button  id ="showchecked"  runat ="server" > Get Selected Nodes </ button >
     < div  id ="showTree"  class ="filetree" >
     </ div >
     </ form >
</ body >
   < script  type ="text/javascript" >
      $(document).ready( function () {
        $.ajax({
           type:  " post " ,
            contentType:  " application/json;charset=utf-8 " ,
            dataType:  " json " ,
            url:  " WebForm1.aspx/GetJson " ,
            success:  function (data) {
                 var  o  =  { showcheck:  true  };
                o.data  =  eval(data.d);
                $( " #showTree " ).treeview(o);
            }
            });
    });
    $( " #showchecked " ).click( function (e) {
         var  s  =  $( " #showTree " ).getTSVs();
         if  (s  !=   null )
            alert(s.join( " , " ));
         else
            alert( " NULL " );
    });
     </ script >
</ html >

 

好了,来看看加载结果吧:

制作过程中需要注意的是:首先,递归必须正确;其次注意js大小写('ChildNodes'被我写成了'childNodes',花费了我一天时间才调整过来 晕哦) 再者就是可以直接调用公共页面的方法,只要在方法前面加上[webmethod]标记即可.