项目总结—jQuery EasyUI-Tree使用
2014-01-23 11:16
316 查看
概要
最近在做组织部考核的项目,我们利用jQuery EasyUI 框架进行页面的布局,分配给我的第一个任务是用jQueryEasyUIde 树形菜单控件在页面上以一个树形结构显示分层数据,我们就来看下这些树形结构是如何显示的。
分类
关于树形结构显示的内容有两种,一种是显示的内容直接来自于前台页面也就是固定的文本,另一种是来自于数据库,将数据库里的内容进行提取在页面进行显示。第一种
我们先来看第一种将数据直接写到前台的方法,我们先来看下效果。接下来我们来看下代码的实现:
<%-- 树的加载 --%> <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数据并在前台显示就搞定了。
总结
上述两种,一种是显示的固定的文本,一种是显示的数据库的文本。第一种显示方法简单,缺点就是不能很方便的进行变换内容,第二种是可以动态的加载树,可以针对需要随时来变,虽然第二种比第一种复杂,但优点也是显而易见的。最后感谢下小崔哥和社河的帮助。相关文章推荐
- 项目总结—jQuery EasyUI- DataGrid使用
- 项目总结—jQuery EasyUI- DataGrid使用
- Git Bash+EGit在项目中配合使用最常用方法总结(根据场景使用)
- Maven学习总结(四)——使用Maven构建项目
- Extjs项目中使用总结
- vue项目中使用echarts 遇到问题总结2
- Maven学习总结——IDEA中使用Maven构建多模块项目
- Git Bash+EGit在项目中配合使用最常用方法总结(根据场景使用)
- Android视频播放项目总结之 使用第三方Vitamio库,开发万能播放器(四)
- 浅析jQuery EasyUI中的tree使用指南
- 关于DevExpress的XtraTreeList使用方法总结
- shiro使用总结-项目集成开发
- 使用Log4j为项目配置日志输出应用详细总结及示例演示.
- 使用editView的项目总结
- 关于DevExpress的XtraTreeList使用方法总结
- 前端项目的总结——为什么使用mobx?
- 学习和使用开源项目经验总结
- EXT.NET 使用总结(2) ---TreePanel(带右键菜单,节点自定义属性)
- JQuery EasyUI的datagrid的使用方式总结
- 项目中Gradle使用总结