Mikel

ASP.NET MVC中使用JQuery EasyUI TreeGrid教程

1. 程序要求：

JQuery EasyUI 插件：http://www.jeasyui.com/download/index.php

2. 具体内容：

引用部分代码：

<link rel=”stylesheet” type=”text/css” href=”../themes/default/easyui.css”>

<link rel=”stylesheet” type=”text/css” href=”../themes/icon.css”>

<link rel=”stylesheet” type=”text/css” href=”demo.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" 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 classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100" height="100" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><embed type="application/x-shockwave-flash" width="100" height="100"></embed></object>

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初始化规定只能在加载页面解析