Jquery zTree结合Asp.net实现异步加载数据
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 ...
随机推荐
- 第三百五十八天 how can I 坚持
万事要有度,不要话唠,也不能不说,把握好分寸,今天貌似又说多了. 加了天班,理了个发,还有老爸明天来北京. 还有同学聚会没去,还有金龙让去吃鱼,没去. 还有.小米视频通话还行,能远程控制桌面, 还有, ...
- RAD XE10 Seattle
RAD Studio 10 Seattle RAD XE10 Seattle RAD 10 Seattle c++builder 10 Seattle Delphi 10 Seattle http:/ ...
- 异常处理与MiniDump详解(转)
一. 综述 总算讲到MiniDump了. Dump有多有用我都无法尽数,基本上属于定位错误修复BUG的倚天剑.(日志可以算是屠龙刀)这些都是对于那些不是必出的BUG,放在外面运行的时候出现的BUG ...
- 2.VS2010C++各种后缀说明
相关资料:"http://blog.csdn.net/kibaamor/article/details/18700607""http://blog.chinaunix.n ...
- Memcached 实例
建立Manager类 package com.alisoft.sme.memcached; import java.util.Date; import com.danga.MemCached.MemC ...
- UVa11997K Smallest Sums（优先队列）
K Smallest Sums You're given k arrays, each array has k integers. There are kk ways to pick exactly ...
- List操作之Select
本文是写给C#新手,老手就勿看了,讲的实际上就是LINQ,谢谢一楼的提醒. 很多时候,从一个关系表中挑出一个我们需要的元素列表采用SQL语句是再容易不过的了,其实C#的List中也可以采用类似的方法, ...
- center os 6.5 vsftpd 登陆出现 530 错误拒绝 解决方法
别管那么多 把 /etc/vsftpd/ftpusers 里面的用户名删掉就好了.
- ExtJs非Iframe框架加载页面实现
在用Ext开发App应用时,一般的框架都是左边为菜单栏,中间为tab页方式的显示区域.而tab页面大多采用的嵌入一个iframe来显示内容.但是采用iframe方式有一个很大的弊端就是每次在加载一个新 ...
- 上门洗车App 竟然是块大肥肉！
http://www.leiphone.com/k-xiche-app-idea.html 打车App.租车App.防违规App我们见得多,但洗车App你一定没听过,之前在一次创业路演上碰到一个做上门 ...