项目总结—jQuery EasyUI-Tree使用

概要

最近在做组织部考核的项目，我们利用jQuery EasyUI 框架进行页面的布局,分配给我的第一个任务是用jQuery EasyUIde树形菜单控件在页面上以一个树形结构显示分层数据，我们就来看下这些树形结构是如何显示的。

分类

关于树形结构显示的内容有两种，一种是显示的内容直接来自于前台页面也就是固定的文本，另一种是来自于数据库，将数据库里的内容进行提取在页面进行显示。

第一种

我们先来看第一种将数据直接写到前台的方法，我们先来看下效果。

接下来我们来看下代码的实现：

<%-- 树的加载 --%>
        
            
 
                
                    

                       考核对象
                        

                            
                               县市区
                                

                                    

                                       县市区定量
                                    
                                    

                                       县市区定性
                                    
 
                                
                            
                            

                               市直单位
                                

                                    

                                       市直单位定量
                                    
                                    

                                       市直单位定性
                                    
                                
                            
                            

                               开发区
                                

                                    

                                       开发区数据
                                    
                                
                            
                            

                               干部
                                

                                    

                                       干部定量
                                    
                                    

                                       干部定性
                                    
                                
                            
 
                        
                    
                
 
 
            

这一种就是将页面的文字直接显示到到前台，一般可以用来做静态网页时来用。

第二种

将数据库中的文本获取到前台进行显示，这里需要说下的是，关于前台的树加载的文本是有固定的Json格式的文本，也就是说我们从后台获取的数据库中的内容是不能直接显示的，是需要进行Json的转换，这样才可以使前台顺利的显示我们的文本。

我们先来看下页面树加载的Json格式的数据是什么样的：

[{ 
"id":1, 
"text":"Node1", 
"state":"closed", 
"children":[{ 
"id":11, 
"text":"Node11"
},{ 
"id":12, 
"text":"Node12"
}] 
},{ 
"id":2, 
"text":"Node2", 
"state":"closed"

}]

下面就来看下的的实现过程，在这里我们使用了一般处级程序与前台进行交互，所以我们先来看下我们的前台与一般应用程序的交互：

先来看前台的代码：

<%-- 树的加载 --%>
        
            
 
                

 
                
 
            

在url里写的就是我们一般处级程序的名称，我们就是通过url这里与一般处级程序进行交互的，现在我们来看一般处理程序的代码：

 public void Query(HttpContext context)
        {
 
 
            //组合查询语句：条件+排序
            StringBuilder strWhere = newStringBuilder();
 
            //先获取关于班子干部字典表的datatable
            DataTable dtTreeInfo = newDataTable();
            //通过调用D层信息获取
            DataSet ds =systemDictionaryBLL.GetListTree("");
            dtTreeInfo = ds.Tables[0];
 
            //将字典表的信息与另一张表的信息一起组合转化成前台需要的json数据的格式
            string strJson =getJson(dtTreeInfo);
           context.Response.Write(strJson);//返回给前台页面
            context.Response.End();
        }

关于如何从数据库获取出DataTable这里我们就不赘余了。

接下来是关于将DataTable转化为树识别的Json格式数据的过程,大家可以照着前面我们需要的Json数据格式来理解下面的代码：

   /// 

        /// 节点树的组合
        /// 
        /// 参数为DataTable
        /// 
        public string getJson(DataTable dt)
        {
            StringBuilder json = newStringBuilder();
            json.Append("[");
            foreach (DataRow dr in dt.Rows)
            {
 
               json.Append("{\"id\":" +dr["id"].ToString());
               json.Append(",\"text\":\"" +dr["name"].ToString() + "\"");
               json.Append(",\"state\":\"closed\"");
 
                DataTable dtChildren = newDataTable();
 
 
                //调用D层方法获取dataTable
                DataSet ds =characterizationTargetBLL.GetList(" type='" +dr["name"].ToString() + "'");
                dtChildren = ds.Tables[0];
 
                if (dt != null &&dt.Rows.Count > 0)
                {
                   json.Append(",\"children\":[");
                   json.Append(DataTable2Json(dtChildren,Convert.ToInt32(dr["id"])));
                    json.Append("]");
                }
                json.Append("},");
 
            }
            if (dt.Rows.Count > 0)
            {
                json.Remove(json.Length - 1,1);
            }
            json.Append("]");
            return json.ToString();
        }

下面我们就来看下我们的效果图：

到这里我们通过一般处级程序将数据库获取的DataTable转化为我们页面需要的固定格式的Json数据并在前台显示就搞定了。

总结

上述两种，一种是显示的固定的文本，一种是显示的数据库的文本。第一种显示方法简单，缺点就是不能很方便的进行变换内容，第二种是可以动态的加载树，可以针对需要随时来变，虽然第二种比第一种复杂，但优点也是显而易见的。最后感谢下小崔哥和社河的帮助。