asp.net+jquery+ztree实现动态绑定数据例子

先看效果图：

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-04-26 20:47:25

asp.net+jquery+ztree实现动态绑定数据例子

asp.net+jquery+ztree实现动态绑定数据例子的相关文章

asp.net+jquery滚动滚动条加载数据的下拉控件_jquery

asp.net repeater怎么动态绑定数据

多个下拉列表-使用Jquery ztree 在同一个页面中出现多个input选择，每个input数据不同

基于jquery+ztree+java获取json数据构建树实例

jquery ztree实现下拉树形框使用到了json数据_jquery

数据-asp+ACCESS提交问题希望大牛给例子

C#使用Jquery zTree实现树状结构显示异步数据加载_C#教程

zTree+ashx获取数据形成树形菜单的例子

如何用jquery 将 datagrid中数据导出到excel?