现在位置首页 / 项目实战 /正文

asp.net实现ztree异步加载示例及demo下载

作者: IT小兵 | 2014年12月29日| 热度:℃ | 评论: |参与:

在以前的文章中介绍很多asp.net使用ztree的例子,大家可以参考:

[asp.net+jquery+ztree实现树形选择]

[Jquery插件--Ztree异步加载多选菜单(城市数据)]

[Ztree教程-采用Jquery Ajax异步加载数据和Ztree自带异步加载数据]

[Ztree教程-asp.net下代码部署及服务端获取数据的例子]

今天再次给大家分析一下:asp.net实现ztree异步加载示例及demo下载。

百度网盘demo下载:链接:http://pan.baidu.com/s/1jGopOr0 密码:0l3t

效果图:

代码结构:

1、html代码:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JqueryzTree._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="script/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="script/jquery.ztree-2.6.js" type="text/javascript"></script>
    <link href="style/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
    <link href="style/demoStyle/demo.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
		var zTree;
		var demoIframe;
                                       //setting 是 zTree 的全部设置参数集合,采用 JSON 结构,便于灵活配置
		var setting = {
			isSimpleData: true,
			treeNodeKey: "id",         //设置节点唯一标识属性名称
			treeNodeParentKey: "pId",  //设置节点的父节点唯一标识属性名称
			nameCol: "name",           //设置 zTree 显示节点名称的属性名称,此处默认为Name
			showLine: true,            //在树型中是否显示线条样式
			root: {                    //zTree数据节点的根,全部节点数据都处于 root.nodes 内
				isRoot: true,
				nodes: []
			},
			async: true, 
            asyncUrl: "asyncdemo.aspx?&time="+Math.random(), 
            asyncParam: ["id","pId","name"],    //异步调用时传到后台的参数
           	callback:{
				asyncSuccess: zTreeOnAsyncSuccess
			}
		};
       
     var  treeNodes = [<%= NodesData%>];  
  
   	
		$(document).ready(function() {
			zTree = $("#treeid").zTree(setting, treeNodes);
		});
	    function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
		    
	    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ul id="treeid" class="tree" style="width: 230px; height: 100%; overflow: auto;">
        </ul>
    </div>
    </form>
</body>
</html>

我们可以看到  asyncUrl: "asyncdemo.aspx?&time="+Math.random(), 。这段代码是调用asp.net提供一个数据服务页面。

2、提供数据的页面代码及数据结构:

using System;
using System.Collections.Generic;
using System.Text;
namespace JqueryzTree
{
    public partial class asyncdemo : System.Web.UI.Page
    {
        StringBuilder NodesData = new StringBuilder();
        #region 实体类
        /// <summary>
        /// 实体类
        /// </summary>
        private class TBCity
        {
            /// <summary>
            /// 地区ID
            /// </summary>
            public int C_ID { get; set; }
            /// <summary>
            /// 地区名称
            /// </summary>
            public string C_Name { get; set; }
            /// <summary>
            /// 父地区ID
            /// </summary>
            public int C_ParentID { get; set; }
        }
        #endregion
        protected void Page_Load(object sender, EventArgs e)
        {
            List<string> treenodes = new List<string>();
            string Ids = Request.Params["id"].ToString();
            string Idt = Request.Params["pId"].ToString();
            string Idts = Request.Params["name"].ToString();
            List<TBCity> mfType = GetTBCity();
            foreach (TBCity citys in mfType)
            {
                if (citys.C_ParentID.ToString() == Ids)
                {
                    string node = string.Format("{{ \"id\":{0}, \"pId\":{1}, \"name\":\"{2}\",\"url\":\"http://www.baidu.com\",\"isParent\":false}}",
                      citys.C_ID, citys.C_ParentID, citys.C_Name);
                    treenodes.Add(node);
                }
            }
            string strs = string.Join(",", treenodes.ToArray());
            NodesData.Append(strs);
            htm = htm&("[" + NodesData + "]");
            Response.End();
        }
        private void testpostdata()
        {
            //List<string> treenodes = new List<string>();
            //    //查看此节点下面是否有子节点
            //    string str = "'isParent':true";
            //    if (table.Rows.Count == 0)
            //    {
            //        str = "'isParent':false";
            //    }
            //    string node =
            //        string.Format("{{ 'Id':{0}, 'PId':{1}, 'Name':'{2}','url':'http://www.baidu.com',{3}}}",
            //                      reader["c_ID"], reader["C_ParentID"], reader["C_Name"], str);
            //    treenodes.Add(node);
            //string strs = string.Join(",", treenodes.ToArray());
            //NodesData.Append(strs);
            //htm = htm&("[" + NodesData + "]");
            //Response.End();
        }
        /// <summary>
        /// 初始化表数据
        /// </summary>
        /// <returns></returns>
        private List<TBCity> GetTBCity()
        {
            List<TBCity> infos = new List<TBCity>();
            infos.Add(new TBCity
            {
                C_ID = 5,
                C_Name = "海淀区",
                C_ParentID = 2
            });
            infos.Add(new TBCity
            {
                C_ID = 6,
                C_Name = "朝阳区",
                C_ParentID = 2
            });
            infos.Add(new TBCity
            {
                C_ID = 7,
                C_Name = "蒲东新区",
                C_ParentID = 3
            });
            infos.Add(new TBCity
            {
                C_ID = 8,
                C_Name = "外滩区",
                C_ParentID = 3
            });
            infos.Add(new TBCity
            {
                C_ID = 9,
                C_Name = "洛阳",
                C_ParentID = 4
            });
            infos.Add(new TBCity
            {
                C_ID = 10,
                C_Name = "咸阳",
                C_ParentID = 4
            });
            return infos;
        }
    }
}


点击阅读本文所属分类的更多文章: 项目实战 。和高手一起交流:346717337

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询