[原创]ASP.NET MVC中使用jQuery EasyUI TreeGrid教程

1. 程序要求:
JQuery EasyUI 插件:http://www.jeasyui.com/download/index.php
2. 具体内容:
引用部分代码:

	<link href="../themes/default/easyui.css" rel="stylesheet" type="text/css" />
 	<link href="../themes/icon.css" rel="stylesheet" type="text/css" />
 	<link href="demo.css" rel="stylesheet" type="text/css" />
         <script type="text/javascript" src="../jquery-1.6.min.js"></script><script type="text/javascript" src="../jquery.easyui.min.js"></script>

前台页面部分:

	<table id="grid" toolbar="#toolbar" class="easyui-treegrid" style="width:700px;height:300px" url="/Area/List" idField="Identifier" treeField="Area_Name" fitColumns="true" pagination="true">
		<thead>
			<tr>
				<th field="Area_Name" rowspan="2" width="150" editor="text">地区</th>
			</tr>
		</thead>
	</table>

ASP.NET MVC 的控制器代码:

public JsonResult List(string page, string rows)
{
            List<Area> areas = new BusinessLogic().Select<area />();
            List<Object> result = new List<Object>();
            foreach (Area a in areas)
            {
                if (a._parentId.Equals(0))
                {
                    result.Add(new { Identifier = a.Identifier, Area_Name = a.Area_Name });
                }
                else
                {
                    result.Add(new { Identifier = a.Identifier, Area_Name = a.Area_Name, _parentId = a._parentId });
                }
            }
            Dictionary<string , object> json = new Dictionary</string><string , object>();
            json.Add("total",areas.Count);
            json.Add("rows",result);

            return Json(json);
}

注意控制器Action返回的是Json格式的数据格式如下:
{“total”:3,”rows”:[{“Identifier”:1,”Area_Name”:”唐山市”},{“Identifier”:11,”Area_Name”:”路北区”,”_parentId”:1},{“Identifier”:2,”Area_Name”:”河北省”}]}
如果直接利用ASP.NET MVC的Json转换函数得到的Json数据没有total值,不会显示出树形结构,因为TreeGrid需要total的数值,Json(areas)得到的结果如下:
[{“Identifier”:1,”Area_Name”:”唐山市”},{“Identifier”:11,”Area_Name”:”路北区”,”_parentId”:1},{“Identifier”:2,”Area_Name”:”河北省”}]

就是因为这个数据格式的问题,纠结了半天没有搞定,后来对照treegrid的例子将数据格式统一了才显示出来
注意:一定要在treegrid的html标签中声明url属性的值,否则在$(function(){})中不会显示数据,可能是因为treegrid初始化规定只能在加载页面解析

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏