asp.net中利用jquery zTree异步加载数据
jquery zTree需要使用的js和css，可以从下列地址获取：http://download.csdn.net/detail/taomanman/8865543
运行效果如下图所示：
1、用于获取JSON数据的代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="RegionData.aspx.cs" Inherits="AT.Web.Ajax.RegionData" %>
using AT.Business.DAL;
using AT.Business.IDAO;
using Newtonsoft.Json;
using System;
using System.Collections.Generic;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace AT.Web.Ajax
{
public partial class RegionData : System.Web.UI.Page
{
private AT_System_IDAO systemidao = new AT_System_Dal();
protected void Page_Load(object sender, EventArgs e)
{
try
{
//取得前台ajax请求的方法名称
string ajaxMethod = Request["ajaxMethod"].ToString();
System.Reflection.MethodInfo method = this.GetType().GetMethod(ajaxMethod);
if (method != null)
{
//通过方法名称指向对应的方法
method.Invoke(this, new object[] { });
}
}
catch (Exception)
{
throw;
}
finally
{
Response.End();
}
}
/// <summary>
/// 异步加载当前节点的子节点
/// </summary>
public void AnsyData()
{
List<object> lsNode = new List<object>();
try
{
string parentId = Request.Params["id"];
DataTable dtRegion = this.systemidao.GetRegionList();
DataView dv = new DataView(dtRegion);
dv.RowFilter = "PRegion_ID = '" + parentId + "'";
lsNode = getList(dv);
Response.Write(JsonConvert.SerializeObject(lsNode));
}
catch (Exception)
{
throw;
}
}
/// <summary>
/// 判断当前节点是否还有子节点
/// </summary>
/// <param name="ParentId">父节点Id</param>
/// <returns>bool类型</returns>
public bool isParentTrue(string ParentId)
{
try
{
DataTable dtRegion = this.systemidao.GetRegionList();
DataView dv = new DataView(dtRegion);
dv.RowFilter = "PRegion_ID = '" + ParentId + "'";
return dv.Count >= 1 ? true : false;
}
catch (Exception)
{
throw;
}
}
/// <summary>
/// 初始化第一次节点加载
/// </summary>
public void FirstAnsyData()
{
try
{
DataTable dtRegion = this.systemidao.GetRegionList();
DataView dv = new DataView(dtRegion);
dv.RowFilter = " PRegion_ID = '0' ";
List<object> lsNode = new List<object>();
lsNode = getList(dv);
//用到了Newtonsoft.dll 转化成Json格式
Response.Write(JsonConvert.SerializeObject(lsNode));
}
catch (Exception)
{
throw;
}
}
/// <summary>
/// 把数据形式转换成zTree的json数据格式
/// </summary>
/// <param name="table"></param>
/// <returns></returns>
public List<object> getList(DataView table)
{
try
{
List<object> lsNode = new List<object>();
bool isParent = true;
foreach (DataRowView drv in table)
{
var ParentId = string.IsNullOrEmpty(drv["PRegion_ID"].ToString()) ? "0" : drv["PRegion_ID"].ToString();
if (isParentTrue(drv["Region_ID"].ToString()))
{
isParent = true;
}
else
{
isParent = false;
}
var zTreeData = new
{
id = drv["Region_ID"],
pId = string.IsNullOrEmpty(ParentId) ? "0" : ParentId,
name = drv["Region_Name"],
isParent = isParent
};
lsNode.Add(zTreeData);
}
return lsNode;
}
catch (Exception)
{
throw;
}
}
}
}
2、用于展示zTree目录树的页面代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="AT.Web.WebForm1" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>zTree树形示例</title>
<link href="Themes/Styles/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
<script src="Themes/Scripts/jquery-1.8.2.min.js" type="text/javascript"></script>
<script src="Themes/Scripts/artDialog/artDialog.source.js" type="text/javascript"></script>
<script src="Themes/Scripts/artDialog/iframeTools.source.js" type="text/javascript"></script>
<script src="Themes/Scripts/FunctionJS.js" type="text/javascript"></script>
<script type="text/javascript">
</script>
<script src="Themes/Scripts/jquery.ztree.core-3.5.min.js"></script>
<script type="text/javascript">
var zNodes;
var zTree;
//setting异步加载的设置
var setting = {
async: {
enable: true, //表示异步加载生效
url: "Ajax/RegionData.aspx", // 异步加载时访问的页面
autoParam: ["id"], // 异步加载时自动提交的父节点属性的参数
otherParam: ["ajaxMethod", 'AnsyData'], //ajax请求时提交的参数
type: 'post',
dataType: 'json'
},
checkable: true,
showIcon: true,
showLine: true, // zTree显示连接线
data: { //用pId来标识父子节点的关系
simpleData: {
enable: true
}
},
expandSpeed: "", // 设置 zTree 节点展开、折叠的动画速度，默认为"fast"，""表示无动画
callback: { // 回调函数
onClick: zTreeOnClick, // 单击鼠标事件
asyncSuccess: zTreeOnAsyncSuccess //异步加载成功事件
}
};
$(document).ready(function () {
InitRegion();
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//初始化加载节点
function InitRegion() {
$.ajax({
url: 'Ajax/RegionData.aspx',
type: 'post',
dataType: 'json',
async: false,
data: { 'ajaxMethod': 'FirstAnsyData' },
success: function (data) {
zNodes = data;
}
});
};
//单击时获取zTree节点的Id,和value的值
function zTreeOnClick(event, treeId, treeNode, clickFlag) {
var treeValue = treeNode.id + "," + treeNode.name;
//单击给文本框赋值
var Id = treeNode.pId;
var v = "";
if (Id == '' || Id == undefined || Id == null) {
v = treeNode.name + " - 父节";
}
else {
v = treeNode.name + " - 子节";
}
top.Role_Form.Get_Region_ID(treeNode.id, v);
//双击的话关闭弹出框
//OpenClose();
alert(v + "," + treeNode.name);
};
function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ul id="treeDemo" class="ztree"></ul>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace AT.Web
{
public partial class WebForm1 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
}
}