easyui treeGrid异步加载子节点示例
easyui treeGrid异步加载子节点示例。如果要异步加载treegrid的子节点，需要输出扁平的数据结构，然后通过_parentId来控制treegrid的父节点子节点结构。嵌套的children结构好像是不支持，没研究出来。
示例代码easyui版本为1.3.5，其他版本没测试。
easyui treeGrid异步加载子节点无限极示例源代码如下
data.ashx，数据源
<%@ WebHandler Language="C#" Class="data" %>
using System;
using System.Web;
public class data : IHttpHandler {
public void ProcessRequest(HttpContext context)
{
string id = context.Request.QueryString["id"], s = "";
int testNodeLen = 3;//测试子节点长度控制
if (string.IsNullOrEmpty(id))
{
//根节点，可以根据数据库查询出来
for (int i = 0; i < testNodeLen; i++) s += ",{\"id\":\"" + i.ToString() + "\",\"name\":\"根节点" + i.ToString() + "\","
//输出state:closed是异步展开treeGrid的关键，easyui会发送ajax请求配置的url参数，附带参数id=此节点的id值
+ "\"state\":\"closed\"}";
}
else
{
Random r = new Random();
//修改为依据id参数查询数据库
for (int i = 0; i < testNodeLen; i++)
s += ",{\"id\":\"" + id + "_" + i.ToString() + "\",\"name\":\"子节点" + id + "_" + i.ToString() + "\""
//注意子节点不能缺少_parentId，当输出扁平数据结构时，是通过此参数控制父节点和子节点关系，动态加载子节点好像不支持children嵌套结构
+ ",\"_parentId\":\"" + id + "\""
//注意如果是叶子节点，不要输出state属性，这里随机一个值
+ (r.Next(0, 2) == 0 ? ",\"state\":\"closed\"" : "")
+ "}";
}
s = "[" + s.TrimStart(',') + "]";
context.Response.Write(s);
}
public bool IsReusable {
get {
return false;
}
}
}
async-easyui-treegrid.html
<!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title>easyui treeGrid异步加载示例</title> <link rel="stylesheet" type="text/css" href="../../themes/default/easyui.css"> <link rel="stylesheet" type="text/css" href="../../themes/icon.css"> <script type="text/javascript" src="../../jquery.min.js"></script> <script type="text/javascript" src="../../jquery.easyui.min.js"></script> </head> <body> <table title="easyui treeGrid异步加载子节点无限极示例" class="easyui-treegrid" id="tg" style="width:280px;height:300px" data-options=" url: 'data.ashx', method: 'get', rownumbers: true, idField: 'id', treeField: 'name' "> <thead> <tr> <th data-options="field:'name'" width="220">Name</th> </tr> </thead> </table> </body> </html>
加支付宝好友偷能量挖...
原创文章，转载请注明出处：easyui treeGrid异步加载子节点示例