zTree结合Asp.net实现异步加载数据 实现简单操作
zTree 下载 api 访问 ：http://www.ztree.me/v3/main.php
例子中用到json数据转化 newtonsoft 地址 ： http://json.codeplex.com/
不多说，代码如下 :
aspx 页面 ：
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm2.aspx.cs" Inherits="CFBuilder.WebForm2" %> <!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>
<link href="Styles/zTreeStyle/zTreeStyle.css" rel="stylesheet" type="text/css" />
<link href="Styles/demo.css" rel="stylesheet" type="text/css" />
<script src="Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="Scripts/jquery.ztree.core-3.5.min.js" type="text/javascript"></script>
<script type="text/javascript">
var zNodes;
var zTree;
//setting异步加载的设置
var setting = {
async: {
enable:true, //表示异步加载生效
url: "/AjaxService/WebData.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 () {
Inint();
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
});
//初始化加载节点
function Inint(){
$.ajax({
url: '/AjaxService/WebData.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;
//alert(treeNode.id + "," + treeNode.name);
};
function zTreeOnAsyncSuccess(event, treeId, treeNode, msg) {
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="content_wrap" >
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
</div>
</form>
</body>
</html>
WebData.aspx页面代码 异步提交 交互页面 ：
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using Newtonsoft.Json;
using System.Data.SqlClient;
using System.Data; namespace CFBuilder
{
public partial class WebData : System.Web.UI.Page
{
string strConn = @"Data Source=ANDY-PC\SQLEXPRESS;Initial Catalog=Test;Integrated Security=True";
protected void Page_Load(object sender, EventArgs e)
{
#region
try
{
string ajaxMethod = Request["ajaxMethod"].ToString();//取得前台ajax请求的方法名称
System.Reflection.MethodInfo method = this.GetType().GetMethod(ajaxMethod);
if (method != null)
{
method.Invoke(this, new object[] { });//通过方法名称指向对应的方法
}
}
catch (Exception)
{ throw;
}
finally
{
Response.End();
}
#endregion }
/// <summary>
/// 异步加载当前节点的子节点
/// </summary>
public void AnsyData()
{
List<object> lsNode = new List<object>();
try
{
int id = int.Parse(Request.Params["id"]);
using (SqlConnection conn = new SqlConnection(strConn))
{
string sql = "select * from OrginTree where OrgParent=" + id + "";
DataTable table = new DataTable();
SqlDataAdapter dt = new SqlDataAdapter(sql, conn);
dt.Fill(table);
lsNode = getList(table);
Response.Write(JsonConvert.SerializeObject(lsNode));
}
}
catch (Exception)
{ throw;
}
}
/// <summary>
/// 判断当前节点是否还有子节点
/// </summary>
/// <param name="ParentId">父节点Id</param>
/// <returns>bool类型</returns>
public bool isParentTrue(int ParentId)
{
try
{
using (SqlConnection conn = new SqlConnection(strConn))
{
conn.Open();
string sql = "select * from OrginTree where OrgParent ="+ParentId+"";
DataTable table = new DataTable();
SqlDataAdapter dt = new SqlDataAdapter(sql, conn);
dt.Fill(table);
return table.Rows.Count >= ? true :false;
}
}
catch (Exception)
{ throw;
}
}
/// <summary>
/// 初始化第一次节点加载
/// </summary>
public void FirstAnsyData()
{
try
{
TableEnjson tbEnjson = new TableEnjson();
List<object> lsNode = new List<object>();
using (SqlConnection conn = new SqlConnection(strConn))
{
conn.Open();
string sql = "select * from OrginTree where OrgParent is null";
DataTable table = new DataTable();
SqlDataAdapter dt = new SqlDataAdapter(sql, conn);
dt.Fill(table);
lsNode = getList(table);
Response.Write(JsonConvert.SerializeObject(lsNode));//用到了Newtonsoft.dll 转化成Json格式
}
}
catch (Exception)
{ throw;
} }
/// <summary>
/// 把数据形式转换成zTree的json数据格式
/// </summary>
/// <param name="table"></param>
/// <returns></returns>
public List<object> getList(DataTable table)
{
try
{
List<object> lsNode = new List<object>();
bool isParent = true;
foreach (DataRow row in table.Rows)
{
var ParentId = string.IsNullOrEmpty(row["OrgParent"].ToString()) ? : row["OrgParent"];
if (isParentTrue(int.Parse(row["OrgId"].ToString())))
isParent = true;
else
isParent = false;
var zTreeData = new
{
id = row["OrgId"],
pId = ParentId,
name = row["OrgName"],
isParent = isParent
};
lsNode.Add(zTreeData);
}
return lsNode;
}
catch (Exception)
{ throw;
}
}
}
数据库的格式
CREATE TABLE OrginTree
(
OrgId INT PRIMARY KEY IDENTITY(1,1),
OrgName NVARCHAR(30), //节点的名称
ORgParent INT //父节点的Id
)
Jquery zTree结合Asp.net实现异步加载数据的更多相关文章
-
jquery easyui easyui-treegrid 使用异步加载数据
jquery easyui easyui-treegrid 使用异步加载数据 jquery easyui easyui-treegrid 异步请求 >>>>>>&g ...
-
淘宝购物车页面 智能搜索框Ajax异步加载数据
如果有朋友对本篇文章的一些知识点不了解的话,可以先阅读此篇文章.在这篇文章中,我大概介绍了一下构建淘宝购物车页面需要的基础知识. 这篇文章主要探讨的是智能搜索框Ajax异步加载数据.jQuery的社区 ...
-
Highcharts 异步加载数据曲线图表
导入 data.js 文件 异步加载数据需要引入以下js 文件: <script src="http://code.highcharts.com/modules/data.js&quo ...
-
新手教程：不写JS，在MIP页中实现异步加载数据
从需求谈起:在 MIP 页中异步加载数据 MIP(移动网页加速器) 的 加速原理 除了靠谱的 MIP-Cache CDN 加速外,最值得一提的就是组件系统.所有 JS 交互都需要使用 MIP 组件实现 ...
-
ASP.NET MVC动态加载数据
ASP.NET MVC动态加载数据,一般的做法是使用$.each方法来循环产生tabel: 你可以在html时先写下非动态的部分: Source Code 上图中,有一行代码: <tbody ...
-
关于使用Iscroll.js异步加载数据后不能滑动到最底端的问题解决方案
关于使用Iscroll.js异步加载数据后不能滑动到最底端,拉到最下边又弹回去的问题困扰了我老半天,相信很多朋友都遇到了.我刚好不小心解决了,和大家分享一下.由于各种忙,下边就直接上代码吧. (前提是 ...
-
Highcharts 基本曲线图；Highcharts 带有数据标签曲线图表；Highcharts 异步加载数据曲线图表
Highcharts 基本曲线图 实例 文件名:highcharts_line_basic.htm <html> <head> <meta charset="U ...
-
winform异步加载数据到界面
做一个学习记录. 有两个需求: 1.点击按钮,异步加载数据,不卡顿UI. 2.把获取的数据加载到gridview上面. 对于需求1,2,代码如下: public delegate void ShowD ...
-
向上滚动或者向下滚动分页异步加载数据(Ajax + lazyload)[上拉加载组件]
/**** desc : 分页异步获取列表数据,页面向上滚动时候加载前面页码,向下滚动时加载后面页码 ajaxdata_url ajax异步的URL 如data.php page_val_name a ...
随机推荐
-
mysql中int、bigint、smallint 和 tinyint的区别与长度的含义
最近使用mysql数据库的时候遇到了多种数字的类型,主要有int,bigint,smallint和tinyint.其中比较迷惑的是int和smallint的差别.今天就在网上仔细找了找,找到如下内容, ...
-
（Google面试题）有四个线程1、2、3、4。线程1的功能就是输出1，线程2的功能就是输出2，以此类推.........现在有四个文件ABCD。初始都为空。
现要让四个文件呈如下格式: A:1 2 3 4 1 2.... B:2 3 4 1 2 3.... C:3 4 1 2 3 4.... D:4 1 2 3 4 1.... 请设计程序. 下面举例A,对 ...
-
如何让服务端同时支持WebSocket和SSL加密的WebSocket（即同时支持ws和wss）？
自从HTML5出来以后,使用WebSocket通信就变得火热起来,基于WebSocket开发的手机APP和手机游戏也越来越多.我的一些开发APP的朋友,开始使用WebSocket通信,后来觉得通信不够 ...
-
Python从零搭建Conf_Web配置管理平台
环境 CentOS 6/7 x64 Python:2 .7.6 Etcd: 3.2.18 Confd:0 .16.0 Nginx: 1.12.1 效果演示 一,拓扑图: 二.涉及软件 ETD: .分布 ...
-
关于datagrid中控件利用js调用后台方法事件的问题
前台调用后台方法除了用button的click事件,还可以用js调用 一.前台页面如图 需求点击这个按钮触发后台事件,从而能够调用存储过程 <epoint:HyperLinkColumn He ...
-
CHENGDU3-Restful API 接口规范、django-rest-framework框架
Restful API 接口规范.django-rest-framework框架 问题:什么是API? 答:API是接口,提供url. 接口有两个用途: 为别人提供服务,前后端分离. 为什么使用前后端 ...
-
js map()与forEach()的用法与区别
forEach 和map 都是用来遍历数组,二者的区别为: forEach() 会修改原来的数组,而map() 方法会得到一个新的数组并返回,不会修改原来的数组 二者的执行速度方面,经过jsPerf( ...
-
linux shell 指令搜索顺序
在linux shell 中输入一个命令,如果有多个同名指令,shell需要按照一定规则去取优先级高的一个执行,shell命令的搜索顺序为: 1.别名,使用alias创建的命令. 2.关键字,如if, ...
-
xcode工程编译错误:error: Couldn’t materialize
错误信息: error: Couldn't materialize: couldn't get the value of variable amount: variable not available ...
-
TAC队--团队选题报告
The Art of Code--团队选题报告 一个APP项目能否被大众所接受,能否拥有受众,the most important是它的idea. 一个好的idea可以为项目带来巨大的改变 一个 独特 ...