先看效果图：
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); htm = htm&(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格式 htm = htm&(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> |
|
说明：
1、js加载完成后，调用服务器asp.net的方法，生成data
2、绑定data数据
时间： 2024-10-03 03:11:07