asp.net中利用jquery zTree异步加载数据

时间:2022-11-28 19:48:16

jquery zTree需要使用的js和css,可以从下列地址获取:http://download.csdn.net/detail/taomanman/8865543

运行效果如下图所示:

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);
                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)
        {

        }
    }
}