资讯频道 → Web前端
阅读更多

37顶
1踩

Web前端

原创新闻 JQuery Tree插件——zTree v3.0 beta 发布

2011-09-09 11:29 by 正式记者 zTreeAPI 评论(91) 有25337人浏览
ztree js jQuery tree

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

      终于可以将 zTree v3.0 beta 发布出来了，在这里首先感谢大家对 zTree 的支持。

    这次 zTree v3.0 改动相当的大，包括 js 的代码架构、 css 调整；当然还有采用了延迟加载技术后，对性能的优化。赶快去下载吧：http://code.google.com/p/jquerytree/downloads/list

    顺便网站也进行了全面改版：http://www.baby666.cn
   


    当然这次 v3.0 的升级还是有一个比较大的遗憾，就是为了性能、结构等性能的提升，此次升级无法做到向下兼容。但我专门制作了 v2.6 - v3.0 的升级必读，请升级的朋友仔细阅读：http://www.baby666.cn/v3/faq.php#_101

    zTree v3.0 API 文档暂时也只提供在线版本的：http://www.baby666.cn/v3/api.php

   这次升级修改的内容太多了，这里不一一描述，需要的朋友可以去看升级必读，下面简要介绍一下 v3.0 改进的关键部分：

   * 【修改】zTree 的 js 代码架构全面修改，并且拆分

   * 【修改】zTree 的 css 样式全面修改，对浏览器可以更好地兼容，同时解决了以前1个像素差的问题

   * 【优化】采用延迟加载技术，一次性加载大数据量的节点性能飞速提升

   * 【增加】支持多节点同时选中、拖拽

   * 【增加】checkNode、checkAllNodes 等多种方法

   * 【增加】IE6 自动取消动画展开、折叠的功能

   * 【修正】异步加载 & 编辑模式 能够更完美的共存

   * 【修正】setting 配置更加合理，并且增加了若干项配置参数

   * 【修正】treeNode 节点数据的属性更加合理，并且增加了一些方法

   * 【修正】拖拽操作更加灵活方便，更容易制定自己的规则

37
顶
1
踩
评论 共 91 条 请登录后发表评论
71 楼 tianxiawuren 2011-10-17 11:02
请问一下，怎么得到某个节点下面所有的节点？（包括所有的子节点及子子节点...）
70 楼 zTreeAPI 2011-10-12 10:09
tianxiawuren 写道
同级节点不能存在两个或多个一样的节点名称,怎么判断？

自己for循环，或者 利用 getNodesByParam方法搜索一遍，看你自己怎么用起来方便了。
69 楼 tianxiawuren 2011-10-12 09:45
同级节点不能存在两个或多个一样的节点名称,怎么判断？
67 楼 tianxiawuren 2011-09-30 13:11
http://www.iteye.com/topic/1116095
66 楼 zTreeAPI 2011-09-30 09:39
yu505656166 写道
楼主啊 各种求帮我去百度吧 把哪个树节点的问题解决了嘛 [color=orange][/color]

呵呵，没看我在这里发的帖子呀，现在非常忙，不可能很及时的回答问题。
65 楼 yu505656166 2011-09-29 11:08
楼主啊 各种求帮我去百度吧 把哪个树节点的问题解决了嘛 [color=orange][/color]
64 楼 tianxiawuren 2011-09-19 18:26
[object Object],[object Object]---这种形式怎么解析？都不懂什么意思。。。这是两个数组对吧？每个数组里的前面那个object代表什么意思？怎么得到它？后面那个Object代表什么意思？怎么得到它？
63 楼 zTreeAPI 2011-09-19 18:02
tianxiawuren 写道
transformToArray()这个方法转换成这样了---[object Object],[object Object],可还是不能变成[{id:'1',pId:'2',name='add1'...},{id:'2',pId:'1',name='add2'...}]
这个样子？

我晕， {..} 这就是一个 Object， 你是不是想还原成 json格式的字符串呀，那就自己去拼接或者找一些工具包
62 楼 tianxiawuren 2011-09-19 17:37
transformToArray()这个方法转换成这样了---[object Object],[object Object],可还是不能变成[{id:'1',pId:'2',name='add1'...},{id:'2',pId:'1',name='add2'...}]
这个样子？
61 楼 tianxiawuren 2011-09-19 17:26
zTreeAPI 写道
tianxiawuren 写道
高人，现在我后台从数据库查询节点数据并显示在前台，前台增加节点保存到数据库，修改节点保存到数据库都已经可以了，可是删除节点的时候，var nodes = zTree.getSelectedNodes();这个nodes为什么是"[object Object]"?因为我设置了data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId"
}
},
这个的原因吗？怎么让var nodes = zTree.getSelectedNodes();变成"[{...},{...}]"这种格式呢？

看API 中，transformToArray 方法

这个方法好像没用啊。。。
60 楼 zTreeAPI 2011-09-19 17:14
tianxiawuren 写道
高人，现在我后台从数据库查询节点数据并显示在前台，前台增加节点保存到数据库，修改节点保存到数据库都已经可以了，可是删除节点的时候，var nodes = zTree.getSelectedNodes();这个nodes为什么是"[object Object]"?因为我设置了data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId"
}
},
这个的原因吗？怎么让var nodes = zTree.getSelectedNodes();变成"[{...},{...}]"这种格式呢？

看API 中，transformToArray 方法
59 楼 tianxiawuren 2011-09-19 15:05
高人，现在我后台从数据库查询节点数据并显示在前台，前台增加节点保存到数据库，修改节点保存到数据库都已经可以了，可是删除节点的时候，var nodes = zTree.getSelectedNodes();这个nodes为什么是"[object Object]"?因为我设置了data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId"
}
},
这个的原因吗？怎么让var nodes = zTree.getSelectedNodes();变成"[{...},{...}]"这种格式呢？
58 楼 zTreeAPI 2011-09-17 21:27
tianxiawuren 写道
var setting = {
check: {
enable: true, //是否显示复选框(true:显示,false:不显示)
chkboxType: { "Y": "ps", "N": "ps" }
},
view: {
showIcon: false,
dblClickExpand: false
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId"
}
},
async: {
enable: true,
type: "post",
url:"catalogue!getTree.action"
},
callback: {
onRightClick: OnRightClick
}
};

var addCount = 1;
//添加节点
function addTreeNode() {
hideRMenu();
zTree.addNodes(zTree.getSelectedNodes()[0], [{ name:"增加" + (addCount++)}]);
}

为什么我点击添加节点方法时，节点第一次没有添加上去，点击第二次的时候，他把根节点一起添加上去了？


答：异步加载 与 编辑模式 共存时，对于未加载子节点的父节点进行添加子节点操作时，会先去异步加载其子节点后，再添加子节点。 估计你的问题就是出现在这里，后台重新生成子节点数据时，没有考虑到其父节点已经不是 zTree 的根，你需要配置 autoParam 或者 otherParam 参数，让后台每次生成数据时，知道当前是给哪个父节点生成子节点，从而生成不同的数据即可。
57 楼 zTreeAPI 2011-09-17 21:22
tianxiawuren 写道
function callBack(){
//判断是否是完成状态
if(xmlHttp.readyState==4){
  //判断是否执行成功
  if(xmlHttp.status==200){
  var resXML = xmlHttp.responseText;
  var zNodes = eval(resXML);
 
  var setting = {
  check: {
enable: true //是否显示复选框(true:显示,false:不显示)
},
view: {
showIcon: false,
dblClickExpand: false
}
};

$(document).ready(function(){
    zTree = $("#treeDemo").zTree(setting, zNodes);
    });
  }
}
}
这段代码：$(document).ready(function(){
    zTree = $("#treeDemo").zTree(setting, zNodes);
    });
为什么有问题？应该怎么设置？


最大的问题貌似是 var zNodes = eval(resXML); 请你监控一下是否能够得到正常的 节点数据；

请你测试一下   eval("{'a':1, 'b':2}");  和 eval("({'a':1, 'b':2})"); 的区别
56 楼 tianxiawuren 2011-09-17 17:08
var setting = {
check: {
enable: true, //是否显示复选框(true:显示,false:不显示)
chkboxType: { "Y": "ps", "N": "ps" }
},
view: {
showIcon: false,
dblClickExpand: false
},
data: {
simpleData: {
enable: true,
idKey: "id",
pIdKey: "pId"
}
},
async: {
enable: true,
type: "post",
url:"catalogue!getTree.action"
},
callback: {
onRightClick: OnRightClick
}
};

var addCount = 1;
//添加节点
function addTreeNode() {
hideRMenu();
zTree.addNodes(zTree.getSelectedNodes()[0], [{ name:"增加" + (addCount++)}]);
}

为什么我点击添加节点方法时，节点第一次没有添加上去，点击第二次的时候，他把根节点一起添加上去了？
55 楼 tianxiawuren 2011-09-17 16:13
function callBack(){
//判断是否是完成状态
if(xmlHttp.readyState==4){
  //判断是否执行成功
  if(xmlHttp.status==200){
  var resXML = xmlHttp.responseText;
  var zNodes = eval(resXML);
 
  var setting = {
  check: {
enable: true //是否显示复选框(true:显示,false:不显示)
},
view: {
showIcon: false,
dblClickExpand: false
}
};

$(document).ready(function(){
    zTree = $("#treeDemo").zTree(setting, zNodes);
    });
  }
}
}
这段代码：$(document).ready(function(){
    zTree = $("#treeDemo").zTree(setting, zNodes);
    });
为什么有问题？应该怎么设置？
54 楼 zTreeAPI 2011-09-17 13:04
tianxiawuren 写道
高手，现在主要是为了完成项目，所以还请你帮忙用JQUERY写一个将树节点JSON或Array(JSON)转换成String的方法，如果你也懂JAVA的话，请帮忙用JAVA写一个将String转换成Array或者List的方法，多谢了。。。

不好意思，真没这么多时间呀。还望你多加努力！
53 楼 tianxiawuren 2011-09-17 09:53
高手，现在主要是为了完成项目，所以还请你帮忙用JQUERY写一个将树节点JSON或Array(JSON)转换成String的方法，如果你也懂JAVA的话，请帮忙用JAVA写一个将String转换成Array或者List的方法，多谢了。。。
52 楼 zTreeAPI 2011-09-16 17:31
tianxiawuren 写道
...太长，我给省略了...

1、写代码如果是为了应付差事，那么不需要做太多检查，能正常运行即可，也完全不用考虑性能
2、如果想认真写代码，那么需要自己多琢磨，不是随便写段代码扔给别人求指点
3、程序是否正常运行，自己测试一下就可以得知，如果连自己都不知道自己的代码运行是否正常，那么是有问题的。
4、对于for循环中如果 设置了 flag = true 的时候，是可以break 跳出循环的，这个会提高性能，避免多余的循环。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • JQuery Tree插件——zTree v3.0 正式版 发布

     在大家的帮助 和 关注下，今天 zTree v3.0 正式版 可以发布了。 v3.0 正式版在功能、性能方便比 v2.x 版本都有了很多改善，尤其是性能方面。用过 v3.0 beta 版本的朋友应该已经体验到了。    但还要再提...

  • JQuery Tree插件——zTree v3.5.13 版 发布

     近期由于工作繁忙，所以一直没有发布 v3.5.13 的正式版，只是在 github 上不断更新每次修改后的 beta 版。 不过考虑到 2014年开始 google code 将不在支持创建新文件的下载功能，希望大家也都逐渐习惯使用 github ...

  • JQuery Tree插件——zTree v2.6正式版发布

    JQuery Tree插件——zTree v2.6正式版发布！ 发表于2011-06-01 10:48| 4748次阅读| 来源开源中国社区| 9 条评论| 作者dyhunter 浏览器jquery插件treejqueryztree 摘要：JQuery Tree插件——zTre

  • jQuery Tree插件-zTree v3.0 beta发布

    http://developer.51cto.com/art/201109/289294.htm zTree v3.0 beta(JQuery Tree 插件)发布了!该版本全面调整了js & css 架构，提供了更好的兼容性和易开发性，性能得到了极大提升。 AD

  • JQuery Tree插件——zTree v2.6 正式版发布(ITeye)

    zTree 是利用 JQuery 的核心代码，实现一套能完成大部分常用功能的 Tree 插件。兼容 IE、FireFox、Chrome 等浏览器（对于IE 6的兼容问题将不做特殊维护）在一个页面内可同时生成多个 Tree 实例支持 JSON 数据支持一...

  • zTree v3.0 beta Bug 汇总

    同时也在努力争取正式版时推出英文版的 Demo 和 API，所以专门开篇文章，用来发布 v3.0 beta 中已经发现的 bug 和解决方案，帮助这期间遇到 bug 的朋友解决问题。  在发布正式版之前，查看 v3.0 beta 的改动计划...

  • JQUERY树型插件ZTREE小例子

    一个做.NET WEB开发的朋友介绍了ZTREE，它是基于JQUERY库开发的树型控件。于是去官方下了一个开发包，看了看DEMO，觉得效果很不错，自己也做了个小例子，也许不太成形，效果倒是展现出来了，把使用方法记录下来，和...

  • JQuery Tree插件

    JQuery Tree插件——zTree v2.6正式版发布！zTree v2.6正式版对比v2.6.beta来说修改的地方不多，主要是修改了几个Bug。另外对于check功能做了一定完善，希望使用checkbox或radio，但部分节点不显示checkbox/radio的...

  • JQUERY树型插件ZTREE和插件tmpl()

    JQUERY树型插件ZTREE小例子 一个做.NET WEB开发的朋友介绍了ZTREE，它是基于jQuery库开发的树型控件。于是去官方下了一个开发包，看了看DEMO，觉得效果很不错，自己也做了个小例子，也许不太成形，效果倒是展现出来...

  • ztree树形根据最底层子节点往上遍历案例

    <!... ...<link rel="stylesheet" type="text/css" href="http://libs.cdnjs.net/zTree.v3/3.5.12-beta.2/css/zTreeStyle/zTreeStyle.css"/> ...

  • jquery插件编写和使用

    插件描述： 功能强大的Tree控件. 说明： 12320项目原本使用的jquery.treeview插件，此...一、 在ThinksKing的Plugins里面找到JQuery zTree v3.0 beta，将Js和Css添加到项目中。 二、 使用zTree: 1.1 添加...

  • 基于主从博弈的共享储能与综合能源微网优化运行研究：MATLAB与CPLEX实现

    内容概要：本文详细探讨了在主从博弈框架下，共享储能与综合能源微网的优化运行及其仿真复现。通过MATLAB和CPLEX的联合使用，展示了微网运营商和用户聚合商之间的动态博弈过程。上层模型关注微网运营商的定价策略，旨在最大化利润，考虑售电收益、储能运维成本等因素。下层模型则聚焦于用户聚合商的响应，根据电价调整电热负荷并参与共享储能调度。文中还介绍了电热耦合约束、充放电互斥约束等关键技术细节，并通过迭代博弈实现了策略更新。最终仿真结果显示，在引入电制热设备后，用户侧热负荷弹性提升，博弈收敛速度加快，达到双赢效果。 适合人群：从事能源系统优化、博弈论应用、MATLAB编程的研究人员和技术人员。 使用场景及目标：适用于希望深入了解主从博弈在综合能源系统中应用的学者和工程师。目标是掌握如何通过数学建模和编程实现复杂的能源系统优化，理解电热耦合机制和共享储能的作用。 其他说明：文章提供了详细的代码片段和仿真结果，帮助读者更好地理解和复现实验。此外，还讨论了一些常见的调试问题和解决方案，如约束冲突等。

  • 【基于矢量射线的衍射积分 （VRBDI）】基于矢量射线的衍射积分 （VRBDI） 和仿真工具附Matlab代码.rar

    1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

  • 【深度学习应用综述】多领域关键技术及应用场景汇总：从计算机视觉到金融风控的全面解析

    内容概要：深度学习在多个领域有着广泛应用。在计算机视觉方面，涵盖图像分类、目标检测、图像分割等任务，应用于自动驾驶、医疗影像分析等领域；在自然语言处理上，包括机器翻译、文本分类、文本生成等功能，服务于信息检索、内容创作等；语音识别与合成领域，实现了语音到文本的转换以及文本到语音的生成，推动了智能交互的发展；医疗领域，深度学习助力医学影像分析、疾病预测、个性化治疗及健康监测；金融领域，深度学习用于信用风险评估、欺诈检测、高频交易等，保障金融安全并优化投资策略；自动驾驶方面，环境感知与决策控制系统确保车辆安全行驶；娱乐与媒体领域，个性化推荐和内容生成提升了用户体验；工业与制造业中，质量检测和预测性维护提高了生产效率和产品质量。 适合人群：对深度学习及其应用感兴趣的初学者、研究人员以及相关领域的从业者。 使用场景及目标：帮助读者全面了解深度学习在不同行业的具体应用场景，明确各领域中深度学习解决的实际问题，为后续深入研究或项目实施提供方向指引。 其他说明：随着深度学习技术的持续进步，其应用范围也在不断扩大，文中提及的应用实例仅为当前主要成果展示，未来还有更多潜力待挖掘。

  • 【ARIMA-LSTM】合差分自回归移动平均方法-长短期记忆神经网络研究附Python代码.rar

    1.版本：matlab2014/2019a/2024a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。

  • 周梁伟-大模型在融合通信中的应用实践.pdf

    周梁伟-大模型在融合通信中的应用实践

  • 基于S7-200 PLC与组态王的花式喷泉控制系统设计及应用

    内容概要：本文详细介绍了利用西门子S7-200 PLC和组态王软件构建的一个花式喷泉控制系统的设计与实现。首先阐述了系统的硬件组成，包括三个环形喷泉组、七彩LED灯带以及功放喇叭等组件，并给出了详细的IO分配表。接着深入解析了关键的梯形图程序逻辑，如自动模式循环、灯光控制、喷泉舞步等部分的具体实现方法。此外，还分享了一些实际调试过程中遇到的问题及其解决方案，例如电源隔离、电磁干扰处理等。最后展示了组态王界面上生动有趣的动画效果设计思路。 适合人群：对PLC编程和工业自动化感兴趣的工程师和技术爱好者。 使用场景及目标：适用于需要设计类似互动娱乐设施的专业人士，旨在帮助他们掌握从硬件选型、程序编写到界面美化的完整流程，从而能够独立完成类似的工程项目。 其他说明：文中不仅提供了理论知识讲解，还包括了许多实践经验教训，对于初学者来说非常有价值。同时，作者还在系统中加入了一些趣味性的元素，如隐藏模式等，增加了项目的吸引力。

  • 基于COMSOL的电弧熔池多物理场耦合仿真技术详解

    内容概要：本文详细介绍了利用COMSOL进行电弧熔池多物理场耦合仿真的方法和技术要点。首先解释了电弧熔池的本质及其复杂性，然后依次讲解了几何建模、材料属性设置、求解器配置以及后处理等方面的具体步骤和注意事项。文中提供了大量实用的MATLAB、Java和Python代码片段，帮助用户更好地理解和应用相关技术。此外，作者分享了许多实践经验，如分阶段激活物理场、使用光滑过渡函数处理相变、优化网格划分等，强调了参数选择和边界条件设定的重要性。 适合人群：从事电弧熔池仿真研究的专业人士，尤其是有一定COMSOL使用经验的研究人员。 使用场景及目标：适用于需要精确模拟电弧熔池行为的研究项目，旨在提高仿真精度并减少计算时间。主要目标是掌握多物理场耦合仿真的关键技术，解决实际工程中遇到的问题。 其他说明：文章不仅提供了详细的理论指导，还包括许多实用的操作技巧和常见错误的解决方案，有助于读者快速上手并深入理解电弧熔池仿真的难点和重点。

Global site tag (gtag.js) - Google Analytics