现在位置首页 / 前端开发 /正文

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

作者: IT小兵 | 2016年6月27日| 热度:℃ | 评论: |参与:

本站专注与前端开发设计,其中ztree教程受到了很多网友的喜欢。我们会继续努力的。

今天给大家分享一个asp.net+jquery+ztree实现动态绑定数据的demo。

先看效果图:

ztree的下载和教程就不在这里写了,大家可以去:[asp.net+jquery+ztree实现树形选择]   [Ztree教程-asp.net下代码部署及服务端获取数据的例子]看看。


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数据

点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

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

给您更多信息和帮助

在这里您可以找到更多:

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

投稿:suchso@vip.qq.com

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

echarts教程系列
本月最热文章

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

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

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