easyui treeGrid异步加载子节点示例

  easyui treeGrid异步加载子节点示例。如果要异步加载treegrid的子节点,需要输出扁平的数据结构,然后通过_parentId来控制treegrid的父节点子节点结构。嵌套的children结构好像是不支持,没研究出来。

easyui treeGrid异步加载示例

  示例代码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异步加载子节点示例

评论(0)Web开发网
阅读(1234)喜欢(1)不喜欢(0)easyui开发技巧