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

 

1. 程式要求：

jQuery EasyUI 外掛程式：http://www.jeasyui.com/download/index.php

1. 具體內容：

引用部分代碼：

<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" 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, 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(){})中設定url是不會顯示資料，可能是因為treegrid初始化規定只能在載入頁面解析

原文地址：http://www.mikel.cn/