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 ...
随机推荐
- html5基础知识
html5+css3 html5定义很多简便东西和宽松语法: 文档头: <!doctype html> 文档编码: <meta cha ...
- EF6 在原有数据库中使用 CodeFirst 总复习（五、生成发帖页面）
有点与在原有数据库中使用 CodeFirst 远了,不过是总复习吗,总得全面点. 一.在用户表(Users)中插入两个用户 二.生成发帖界面 MVC生成的界面很多,也没使用Ajax,实际开发中很少会使 ...
- MVC如何配置才能访问静态页面
默认在Views文件外的静态页面可以访问,若要访问Views里的静态页面则需要修改View文件夹中的web.config: <system.webServer> <handlers& ...
- InternetOpenA
[ilink32 Error] Error: Unresolved external 'InternetOpenA' referenced from ..\WIN32\DEBUG\NATIVEXML ...
- ntpd和ntpdate
以无GUI 的Ubuntu 为例 1. ntpdate ntpdate是Ubuntu发行版的标配.按Ubuntu14.04的官方文档(这里),Ubuntu在启动时,会调用ntpdate,根据Ubunt ...
- STM32中的位带(bit-band)操作
转:http://blog.csdn.net/gaojinshan/article/details/11479929 //位带操作,实现51类似的GPIO控制功能 //具体实现思想,参考<< ...
- TQImport3XLS.Map
property Map: TStrings; 设置数据集字段和Excel单元格之间定义映射属性以下列方式: FieldName=CellRange 导入单独的单元格 Field1=A1 Field1 ...
- C++学习之const整理总结
1什么是const? (const类型)常类型是指使用类型修饰符const说明的类型,常类型的变量或对象的值是不能被更新的.(但可以偷梁换柱进行更新) 2为什么引入const? const 推出的初始 ...
- C++ Vector 使用心得 [转]
标准库Vector类型 使用需要的头文件:#include <vector>Vector:Vector 是一个类模板.不是一种数据类型. Vector<int>是一种数据类型. ...
- Ext.grid.Panel 数据动态改变后刷新grid
gridPanel中加载的数据分为两种:一种是本地数据加载,那另一种就是后台数据加载. 在表格中增.删.改.查 是必不可少的. 那么数据动态改变后怎样刷新表格中的数据呢. 一.后台取数据 var gr ...