项目总结—jQuery EasyUI-Tree使用

最新推荐文章于 2020-09-25 17:01:18 发布

iteye_20659

最新推荐文章于 2020-09-25 17:01:18 发布

阅读量177

点赞数

文章标签： json javascript 数据库 ViewUI

本文详细介绍了如何使用jQueryEasyUI框架在页面上以树形结构显示分层数据，包括直接从文本和数据库获取数据的两种方式，并提供了具体的代码实现和效果展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

概要

最近在做组织部考核的项目，我们利用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":"Node1", 
"state":"closed", 
"children":[{ 
"id":11, 
"text":"Node11"
},{ 
"id":12, 
"text":"Node12"
}] 
},{ 
"id":2, 
"text":"Node2", 
"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();
        }

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