本篇文主要對EasyUI中TreeGrid組件的使用進行演示。對於正在學此組件的童鞋，不防花個幾分鍾看一下。本文主要演示：TreeGrid的簡單應用、懶加載方法、控件數據格式。
TreeGrid組件是由DataGrid集成而來，可以使行與行之間存在父子關系，是一種樹形網格組件。
1. 創建簡單示例
通過post方式調用后端數據，將數據展示到前端，具體代碼如下：
1.1 前端代碼
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TreeGridDemo</title>
<link href="/Scripts/easyui/themes/icon.css" rel="stylesheet" />
<link href="/Scripts/easyui/themes/metro-blue/easyui.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Scripts/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<table id="TreeDemo" title="Folder Browser" class="easyui-treegrid" style="width: 400px; height: 300px"
url="/TreeGridShow/ShowTreeGridJson"
rownumbers="true"
idfield="id"
treefield="name">
<thead>
<tr>
<th field="name" width="160">Name</th>
<th field="remark" width="160" align="right">Remark</th>
</tr>
</thead>
</table>
</body>
</html>
1.2 后端代碼
[HttpPost]
public JsonResult ShowTreeGridJson() { List<ColorPanal> colorList = new List<ColorPanal>() { new ColorPanal() { id = "1", name = "所有顏色", remark="all", _parentId = ""}, new ColorPanal() { id = "2", name = "冷色", remark="二級", _parentId = "1"}, new ColorPanal() { id = "3", name = "白色", remark="二級", _parentId = "2",state="closed"},//添加state狀態為closed可以標識此節點下有子集 new ColorPanal() { id ="4", name = "藍色", remark="二級", _parentId = "2" }, new ColorPanal() { id = "5", name = "暖色", remark="二級", _parentId = "1" }, new ColorPanal() { id = "6", name = "混和", remark="二級", _parentId ="1" } }; return Json(new DataGridModel { total = colorList.Count(),//總行數 rows = colorList.ToList().ConvertAll(p => new { p.id, p.name, p.remark, p.state, p._parentId }) }); } public class ColorPanal { public string id, name, remark, _parentId, state; } public class DataGridModel { public int total { get; set; } public IEnumerable<object> rows { get; set; } }
1.3 效果展示
2. 懶加載示例
2.1實現代碼
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TreeGridDemo</title>
<link href="/Scripts/easyui/themes/icon.css" rel="stylesheet" />
<link href="/Scripts/easyui/themes/metro-blue/easyui.css" rel="stylesheet" />
<script src="/Scripts/jquery-1.9.1.min.js"></script>
<script src="/Scripts/easyui/jquery.easyui.min.js"></script>
</head>
<body>
<table id="TreeDemo" title="Folder Browser" class="easyui-treegrid" style="width: 400px; height: 300px"
url="/TreeGridShow/ShowTreeGridJson"
rownumbers="true"
idfield="id"
treefield="name">
<thead>
<tr>
<th field="name" width="160">Name</th>
<th field="remark" width="160" align="right">Remark</th>
</tr>
</thead>
</table>
<script>
$("#TreeDemo").treegrid({
width: function () { return document.body.clientWidth * 0.9 },//寬度調整
//onBeforeExpand 點擊展開結點后出發的事件，返回true繼續執行，返回false事件關閉
onBeforeExpand: function (row) {
//已經展開過,無需重新加載（若去掉，前端則會不停刷新展開節點）
var childrens = $("#TreeDemo").treegrid("getChildren", row["id"]);
if (childrens != null && childrens.length > 0) {
return false;
}
//此處添加ajax異步，可調用后端
$('#TreeDemo').treegrid('collapse', row["id"]).treegrid('append', {
parent: row["id"],
data: jsonstr
}).treegrid('expand', row["id"]);
return true;
}
});
var jsonstr = [
{ "id": 10, "name": "淺白", remark: "三級", "_parentId": 3 },
{ "id": 20, "name": "粉白", remark: "三級", "_parentId": 3 }
];
</script>
</body>
</html>
2.2 后端代碼見1.2
2.3 效果圖
3. 格式說明
3.1 基礎數據格式：
{
"total": 6,//總行數
"rows": [
{
"id": "1",
"name": "所有",
"remark": "備注",
"_parentId": "0",//注意此名稱唯一
"state": "open"
},
{
"id": "1",
"name": "所有",
"remark": "備注",
"_parentId": "1",
"state": "open"
}
]
}
3.2 異步節點加載格式
[
{
"id": 10,
"name": "淺白",
remark: "三級",
"_parentId": 3
},
{
"id": 20,
"name": "粉白",
remark: "三級",
"_parentId": 3
}
]
3. 結語
此演示示例沒有做分頁演示，可用於數據量小的數據展示；懶加載可用於多層級展示。
附源碼地址：http://download.csdn.net/download/manbuba/10106241