ztree 异步加载实例能隐藏节点吗

ztree+struts2实现异步加载,但那是在ztree的async:{}代码块里的url后面的action进不去
[问题点数:50分]
ztree+struts2实现异步加载,但那是在ztree的async:{}代码块里的url后面的action进不去
[问题点数:50分]
不显示删除回复
显示所有回复
显示星级回复
显示得分回复
只显示楼主
2016年2月 总版技术专家分月排行榜第二2014年2月 总版技术专家分月排行榜第二2013年4月 总版技术专家分月排行榜第二
优秀小版主2015年7月优秀小版主2015年9月优秀小版主2015年5月优秀小版主2014年11月论坛优秀版主
2016年2月 总版技术专家分月排行榜第二2014年2月 总版技术专家分月排行榜第二2013年4月 总版技术专家分月排行榜第二
优秀小版主2015年7月优秀小版主2015年9月优秀小版主2015年5月优秀小版主2014年11月论坛优秀版主
匿名用户不能发表回复!|
每天回帖即可获得10分可用分!小技巧:
你还可以输入10000个字符
(Ctrl+Enter)
请遵守CSDN,不得违反国家法律法规。
转载文章请注明出自“CSDN(www.csdn.net)”。如是商业用途请联系原作者。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员,您的IP地址所在网段被ITeye拒绝服务,这可能是以下两种情况导致:
一、您所在的网段内有网络爬虫大量抓取ITeye网页,为保证其他人流畅的访问ITeye,该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站,该代理服务器被网络爬虫利用,大量抓取ITeye网页
请您点击按钮解除封锁&21:26 提问
ztree异步加载设置isParent:true后没有子节点的父节点循环加载整棵树
问下有没有什么解决方案?
按赞数排序
服务器点判断没有子节点设置isParent为false不就好了?
setting.async.otherParam = {"zTreeIsLoad":false};
function onAsyncSuccess(event, treeId, treeNode, msg){
var treeObj = $.fn.zTree.getZTreeObj(treeId);//树
//初始化后不再取新的数据
treeObj.setting.async.otherParam = {"zTreeIsLoad":true};
如果服务端收到zTreeIsLoad为true则返回"[]",即空数组。
103关注|495收录
29关注|288收录
657关注|316收录
其他相似问题
相关参考资料bootstrap jQuery Ztree异步载入数据,check选择&可加入、改动、删除节点
发布时间: 17:29:43
一、下载zTree插件 地址:
二、html代码
&link href=&../Scripts/zTree/css/zTreeStyle/zTreeStyle.css& rel=&stylesheet& /&
&script src=&../Scripts/zTree/js/jquery-1.4.4.min.js&&&/script&
&script src=&../Scripts/zTree/js/jquery.ztree.core-3.5.js&&&/script&
&script src=&../Scripts/zTree/js/jquery.ztree.excheck-3.5.js&&&/script&
&script src=&../Scripts/zTree/js/jquery.ztree.exedit-3.5.js&&&/script&
&script type=&text/javascript&&
var setting = {
enable: true,
url: &../AjaxPage/GetAjax.aspx?z=sdfww234edfsd&,
autoParam: [&ID&],
contentType: &application/json&,
type: &get&,
dataFilter: filter
expandSpeed: &&,
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
selectedMulti: false
enable: true
enable: true
simpleData: {
enable: true
callback: {
beforeRemove: beforeRemove,
beforeRename: beforeRename,
function filter(treeId, parentNode, childNodes) {
if (!childNodes)
for (var i = 0, l = childNodes. i & i++) {
childNodes[i].name = childNodes[i].name.replace(/\.n/g, &#39;.&#39;);
return childN
function beforeRemove(treeId, treeNode) {
var zTree = $.fn.zTree.getZTreeObj(&treeDemo&);
zTree.selectNode(treeNode);
alert(treeNode.Action);//哈哈 出来了
return confirm(&确认删除 节点 -- & + treeNode.name + & 吗?&);
function beforeRename(treeId, treeNode, newName) {
if (newName.length == 0) {
alert(&节点名称不能为空!&);
var newCount = 1;
function addHoverDom(treeId, treeNode) {
var sObj = $(&#& + treeNode.tId + &_span&);
if (treeNode.editNameFlag || $(&#addBtn_& + treeNode.tId).length & 0)
var addStr = &&span class=&#39;button add&#39; id=&#39;addBtn_& + treeNode.tId
+ &&#39; title=&#39;add node&#39; onfocus=&#39;this.blur();&#39; &&/span&&;
sObj.after(addStr);
var btn = $(&#addBtn_& + treeNode.tId);
if (btn) btn.bind(&click&, function () {
var zTree = $.fn.zTree.getZTreeObj(&treeDemo&);
zTree.addNodes(treeNode, { id: (treeNode.id + newCount), parentid: treeNode.id, name: &new node& + (newCount++) });
function removeHoverDom(treeId, treeNode) {
$(&#addBtn_& + treeNode.tId).unbind().remove();
$(document).ready(function () {
$.fn.zTree.init($(&#treeDemo&), setting);
&/script& &div class=&row&&
&div class=&col-lg-12 col-sm-12 col-xs-12 col-xxs-12&&
&div class=&panel panel-default&&
&div class=&panel-heading&&
&h2&权限菜单管理&/h2&
&div class=&panel-actions&&
&a href=&MenuManagement.aspx#& class=&btn-minimize&&&i class=&fa fa-chevron-up&&&/i&&/a&
&a href=&MenuManagement.aspx#& class=&btn-close&&&i class=&fa fa-times&&&/i&&/a&
&div class=&panel-body&&
&div class=&row&&
&div class=&col-md-12&&
&ul id=&treeDemo& class=&ztree&&&/ul&
三、zTreeStyle.css改动加入节点button的图片样式
.ztree li span.button.add {
margin-left: 2
margin-right: -1
background-position: -144px 0;
vertical-align:
四、后台代码:
protected void Page_Load(object sender, EventArgs e)
if (Request.QueryString[&z&] == &sdfww234edfsd&)
StringBuilder sb = new StringBuilder();
sb.Append(&[&);
sb.Append(&{\&id\&:\&1\&,\&name\&:\&销售单管理\&,\&pId\&:\&0\&,\&Action\&:\&list\&},&);
sb.Append(&{\&id\&:\&2\&,\&name\&:\&销售单列表\&,\&pId\&:\&1\&,\&Action\&:\&list\&},&);
sb.Append(&]&);
Response.Write(sb.ToString());
说明:据我測试看来,id、name、pId为三个必需的字段,pId可看做parentID,open=true 则会展开次节点。
******************************************别墅图纸推荐*************************************************
我想有一栋别墅,面朝大海,春暖花开
龙兴科技别墅图纸设计,这里有最新最全的别墅图纸,
这里有最给力的别墅图纸折扣活动,图纸包含建筑图、结构图、给排水图、电气图
我们致力于为广大客户提供别墅设计图纸,图纸均由专业、经验丰富的设计团队设计,可免费提供施工技术指导
来源:/bhlsheji/p/4345368.html理论部分:
MVC+ZTree:指在.net MVC环境下进行开发,ZTree是一个jquery的树插件
大数据:一般我们系统中,有一些表结构属于树型的,如分类,地域,菜单,网站导航等等,而像分类这种表,它的数据量是递增的,不同遇见的,可能几条,几万条,而随着站点的运营,也可能达到几十万条,如果这样的大数据,采用一次读数据到页面的方式,是不可取的,先不说给服务器的压力有多大,只是客户端的浏览器估计就要挂掉,谁愿意加载一个页面等上10多分钟呀,呵呵!
异步加载:这种方式已经成为主流,异步事实上是指与当前UI线程不冲突,浏览器不会假死,你的获取数据的动作会重新开启一个通道(线程)来与服务器进行通信,而且,这种方式一般是按需去取,ZTree很好的支持了这种方式。
实例部分:
首先是为ZTree提供的数据规范,定义一个标准的接口,这样对于前台调用是清楚的,简单的,因为它返回的JSON数据将与ZTree默认的数据元素保持一致
/// &summary&
/// ZTree数据结构
/// &/summary&
public interface IZTree
/// &summary&
/// 节点ID
/// &/summar
int id { }
/// &summary&
/// 节点名称
/// &/summary&
string name { get; set; }
/// &summary&
/// &/summary&
int pId { get; set; }
/// &summary&
/// 是否有子节点
/// &/summary&
bool isParent { get; set; }
public class Node : IZTree
#region IZTree 成员
/// &summary&
/// 节点ID
/// &/summary&
public int id { get; set; }
/// &summary&
/// 节点名称
/// &/summary&
public string name { get; set; }
/// &summary&
/// &/summary&
public int pId { get; set; }
/// &summary&
/// 是否有子节点
/// &/summary&
public bool isParent { get; set; }
#endregion
其次是MVC这边,会前台页面提供一个GET请求的方法,用来根据父ID,得到它的一级子节点列表
/// &summary&
/// 得到指定ID的子节点列表,并序列化为JSON串
/// &/summary&
/// &param name="id"&&/param&
/// &returns&&/returns&
public string AsyncGetNodes(int? id)
return nodearr.Where(i =& i.pId == (id ?? 0)).ToJson();
下面是JSON的功能类,网上有很多
public static class JsonHelper
/// &summary&
/// 返回对象序列化
/// &/summary&
/// &param name="obj"&源对象&/param&
/// &returns&json数据&/returns&
public static string ToJson(this object obj)
JavaScriptSerializer serialize = new JavaScriptSerializer();
return serialize.Serialize(obj);
/// &summary&
/// 控制深度
/// &/summary&
/// &param name="obj"&源对象&/param&
/// &param name="recursionDepth"&深度&/param&
/// &returns&json数据&/returns&
public static string ToJson(this object obj, int recursionDepth)
JavaScriptSerializer serialize = new JavaScriptSerializer();
serialize.RecursionLimit = recursionD
return serialize.Serialize(obj);
public static object ParseFromJson&T&(string szJson)
T obj = Activator.CreateInstance&T&();
using (MemoryStream ms = new MemoryStream(Encoding.UTF8.GetBytes(szJson)))
DataContractJsonSerializer serializer = new DataContractJsonSerializer(obj.GetType());
return (T)serializer.ReadObject(ms);
OK,现在我们回到前台,看一下前台页面是如何与后台方法进行通讯的
&link href="../../Scripts/JQuery-zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" /&
&script src="../../Scripts/JQuery-zTree/js/jquery-1.4.4.min.js"&&/script&
&script src="../../Scripts/JQuery-zTree/js/jquery.ztree.all-3.5.min.js"&&/script&
&script type="text/javascript"&
//异步加载节点
var setting4 = {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId",
rootPId: 0
//异步加载
enable: true,
url: "/category/AsyncGetNodes",
autoParam: ["id", "name", "pId"]
callback: {
beforeExpand: beforeExpand,
onAsyncSuccess: onAsyncSuccess,
onAsyncError: onAsyncError
function createTree() {
url: '/category/AsyncGetNodes', //url
action是方法的名称
data: { id: 0 },
type: 'Get',
dataType: "text", //可以是text,如果用text,返回的结果为字符串;如果需要json格式的,可是设置为json
success: function (data) {
$.fn.zTree.init($("#treeDemo4"), setting4, eval('(' + data + ')'));
error: function (msg) {
alert(" 数据加载失败!" + msg);
function beforeExpand(treeId, treeNode) {
if (!treeNode.isAjaxing) {
return true;
alert("zTree 正在下载数据中,请稍后展开节点。。。");
return false;
function onAsyncSuccess(event, treeId, treeNode, msg) {
function onAsyncError() {
alert(" 数据加载失败");
$(document).ready(function () {
createTree();
&下面是HTML代码
&ul id="treeDemo4" class="ztree"&&/ul&
好了,我们运行程序,效果就出来了,呵呵!
经读者提意,放了一个效果图:
阅读(...) 评论()}

我要回帖

更多关于 ztree同步和异步加载 的文章

更多推荐

版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。

点击添加站长微信