项目总结—jQuery EasyUI-Tree使用

 

概要

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

 

分类

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

 

第一种

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

 

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

  

<%-- 树的加载 --%>
        <divdata-options="region:'west',split:true" title="定性指标体系"style="width: 200px;">
            <divclass="easyui-accordion"data-options="fit:true,border:false">
 
                <ulid="AssessmeObjectTree" class="easyui-tree">
                    <li>
                       <span>考核对象</span>
                        <ul>
                            <lidata-options="state:'closed'">
                               <span>县市区</span>
                                <ul>
                                    <li>
                                       <span>县市区定量</span>
                                    </li>
                                    <li>
                                       <span>县市区定性</span>
                                    </li>
 
                                </ul>
                            </li>
                            <li>
                               <span>市直单位</span>
                                <ul>
                                    <li>
                                       <span>市直单位定量</span>
                                    </li>
                                    <li>
                                       <span>市直单位定性</span>
                                    </li>
                                </ul>
                            </li>
                            <li>
                               <span>开发区</span>
                                <ul>
                                    <li>
                                       <span>开发区数据</span>
                                    </li>
                                </ul>
                            </li>
                            <li>
                               <span>干部</span>
                                <ul>
                                    <li>
                                       <span>干部定量</span>
                                    </li>
                                    <li>
                                       <span>干部定性</span>
                                    </li>
                                </ul>
                            </li>
 
                        </ul>
                    </li>
                </ul>
 
 
            </div>
        </div>

 

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

 

第二种

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

 

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

[{   
    "id": 1,   
    "text": "Node 1",   
    "state": "closed",   
    "children": [{   
        "id": 11,   
        "text": "Node 11"  
    },{   
        "id": 12,   
        "text": "Node 12"  
    }]   
},{   
    "id": 2,   
    "text": "Node 2",   
    "state": "closed"  

}] 

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

 

先来看前台的代码：

 

        

<%-- 树的加载 --%>
        <divdata-options="region:'west',split:true" title="定性指标体系"style="width: 200px;">
            <divclass="easyui-accordion"data-options="fit:true,border:false">
 
                <ul id="TestTree"class="easyui-tree"data-options="url:'SetCharacterizationTargetLevelTree.ashx/ProcessRequest',method:'get',">
 
                </ul>
 
            </div>
        </div>

 

 

在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数据格式来理解下面的代码：

 

   /// <summary>
        /// 节点树的组合
        /// </summary>
        /// <paramname="dt">参数为DataTable</param>
        /// <returns></returns>
        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();
        }

</pre><pre code_snippet_id="167810" snippet_file_name="blog_20140123_5_6617399" name="code" class="csharp">  #region dataTable转换成Json格式
        /// <summary>  
        /// dataTable转换成Json格式  
        /// </summary>  
        /// <param name="dt"></param>  
        /// <returns></returns>  
        public static string DataTable2Json(DataTable dt, int pid = -1)
        {
            StringBuilder jsonBuilder = new StringBuilder();


            for (int i = 0; i < dt.Rows.Count; i++)
            {
                jsonBuilder.Append("{");
                for (int j = 0; j < dt.Columns.Count; j++)
                {
                    int id = pid;
                    jsonBuilder.Append("\"");
                    dt.Columns[j].ColumnName = dt.Columns[j].ColumnName.ToLower();
                    if (dt.Columns[j].ColumnName == "name") dt.Columns[j].ColumnName = "text";
                    jsonBuilder.Append(dt.Columns[j].ColumnName);
                    if (dt.Columns[j].ColumnName.ToLower() == "id" && pid != -1)
                    {
                        jsonBuilder.Append("\":" + (id * 10 + Convert.ToInt32(dt.Rows[i][j])) + ",");
                    }
                    else
                    {
                        jsonBuilder.Append("\":\"" + dt.Rows[i][j].ToString() + "\",");
                    }
                }


                if (dt.Columns.Count > 0)
                {
                    jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
                }
                jsonBuilder.Append("},");
            }
            if (dt.Rows.Count > 0)
            {
                jsonBuilder.Remove(jsonBuilder.Length - 1, 1);
            }
            return jsonBuilder.ToString();
        }
        #endregion dataTable转换成Json格式

     

 

 

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

 

 

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

 

总结

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