|
锁定老帖子 主题：zTree 正式搬家到 iteye
该帖已经被评为精华帖
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2011-11-14
我就是用的你的demo我把edit_super.html的数据改成异步获取就有问题了
<!DOCTYPE html>
<HTML>
<HEAD>
<TITLE> ZTREE DEMO - beforeRemove / onRemove / beforeRename / onRename</TITLE>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="../../css/demo.css" type="text/css">
<link rel="stylesheet" href="../../css/zTreeStyle/zTreeStyle.css" type="text/css">
<script type="text/javascript" src="../../js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="../../js/jquery.ztree.core-3.0.js"></script>
<script type="text/javascript" src="../../js/jquery.ztree.excheck-3.0.js"></script>
<script type="text/javascript" src="../../js/jquery.ztree.exedit-3.0.js"></script>
<SCRIPT LANGUAGE="JavaScript">
<!--
var setting = {
view: {
addHoverDom: addHoverDom,
removeHoverDom: removeHoverDom,
selectedMulti: false
},
async: {
enable: true,
url:"../asyncData/getNodes.php",
autoParam:["id", "name=n"],
otherParam:{"otherParam":"zTreeAsyncTest"},
dataFilter: filter
},
edit: {
enable: true
},
data: {
simpleData: {
enable: true
}
},
callback: {
beforeDrag: beforeDrag,
beforeRemove: beforeRemove,
beforeRename: beforeRename,
onRemove: onRemove,
onRename: onRename
}
};
var zNodes =[
{ id:1, pId:0, name:"父节点1", open:true},
{ id:11, pId:1, name:"叶子节点11"},
{ id:12, pId:1, name:"叶子节点12"},
{ id:13, pId:1, name:"叶子节点13"},
{ id:2, pId:0, name:"父节点2", open:true},
{ id:21, pId:2, name:"叶子节点21"},
{ id:22, pId:2, name:"叶子节点22"},
{ id:23, pId:2, name:"叶子节点23"},
{ id:3, pId:0, name:"父节点3", open:true },
{ id:31, pId:3, name:"叶子节点31"},
{ id:32, pId:3, name:"叶子节点32"},
{ id:33, pId:3, name:"叶子节点33"}
];
function filter(treeId, parentNode, childNodes) {
if (!childNodes) return null;
for (var i=0, l=childNodes.length; i<l; i++) {
childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
}
return childNodes;
}
var log, className = "dark";
function beforeDrag(treeId, treeNodes) {
return false;
}
function beforeRemove(treeId, treeNode) {
className = (className === "dark" ? "":"dark");
showLog("[ "+getTime()+" beforeRemove ] " + treeNode.name);
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.selectNode(treeNode);
return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
}
function onRemove(e, treeId, treeNode) {
showLog("[ "+getTime()+" onRemove ] " + treeNode.name);
}
function beforeRename(treeId, treeNode, newName) {
className = (className === "dark" ? "":"dark");
showLog("[ "+getTime()+" beforeRename ] " + treeNode.name);
if (newName.length == 0) {
alert("节点名称不能为空.");
return false;
}
return true;
}
function onRename(e, treeId, treeNode) {
showLog("[ "+getTime()+" onRename ] " + treeNode.name);
}
function showLog(str) {
if (!log) log = $("#log");
log.append("<li class='"+className+"'>"+str+"</li>");
if(log.children("li").length > 8) {
log.get(0).removeChild(log.children("li")[0]);
}
}
function getTime() {
var now= new Date(),
h=now.getHours(),
m=now.getMinutes(),
s=now.getSeconds(),
ms=now.getMilliseconds();
return (h+":"+m+":"+s+ " " +ms);
}
var newCount = 1;
function addHoverDom(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span");
if ($("#addBtn_"+treeNode.id).length>0) return;
var addStr = "<button type='button' class='add' id='addBtn_" + treeNode.id
+ "' title='add node' onfocus='this.blur();'></button>";
sObj.append(addStr);
var btn = $("#addBtn_"+treeNode.id);
if (btn) btn.bind("click", function(){
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
zTree.addNodes(treeNode, {id:(100 + newCount), pId:treeNode.id, name:"new node" + (newCount++)});
});
};
function removeHoverDom(treeId, treeNode) {
$("#addBtn_"+treeNode.id).unbind().remove();
};
$(document).ready(function(){
$.fn.zTree.init($("#treeDemo"), setting);
});
//-->
</SCRIPT>
<style type="text/css">
.ztree li button.add {margin-left:2px; margin-right: -1px; background-position:-112px 0; vertical-align:top; *vertical-align:middle}
</style>
</HEAD>
<BODY>
<h1>高级 增 / 删 / 改 节点</h1>
<h6>[ 文件路径：demo/exedit/edit_super.html ]</h6>
<div class="content_wrap">
<div class="zTreeDemoBackground left">
<ul id="treeDemo" class="ztree"></ul>
</div>
<div class="right">
<ul class="info">
<li class="title"><h2>1、beforeRemove / onRemove<br/> beforeRename / onRename 事件回调函数控制</h2>
<ul class="list">
<li>此 Demo 演示合理利用自定义控件、事件回调函数配合以增强用户体验，操作时可以对比"基本 增 / 删 / 改 节点"的 Demo</li>
<li>此 Demo 实现增加节点按钮</li>
<li>此 Demo 实现删除节点时进行确认</li>
<li><p><span class="highlight_red">在对这些灵活的配置熟悉以后，相信你能够做出更加合理的编辑界面！</span><br/>
remove / rename log:<br/>
<ul id="log" class="log"></ul></p></li>
</ul>
</li>
<li class="title"><h2>2、setting 配置信息说明</h2>
<ul class="list">
<li>同 "基本 增 / 删 / 改 节点"</li>
</ul>
</li>
<li class="title"><h2>3、treeNode 节点数据说明</h2>
<ul class="list">
<li>同 "基本 增 / 删 / 改 节点"</li>
</ul>
</li>
</ul>
</div>
</div>
</BODY>
</HTML>
如果先打开父节点再添加就没问题。如果父节点还没有打开直接点击添加按钮就IE6就报错了。 火狐不会。 |
| 返回顶楼 | |
|
发表时间：2011-11-16
tw198611 写道 Hello，内容太多，我就删节了，请见谅
我用了一下你的代码，并且我自己也修改了Demo测试了一下，发现一切正常。 所以我考虑是不是因为我目前已经修正了类似的Bug。 请你参考 http://ztreeapi.iteye.com/blog/1169368 帖子中 已修正的Bug 说明，尤其是【修改】1 |
| 返回顶楼 | |
|
发表时间：2011-11-17
最后修改：2011-11-17
非常之郁闷啊。。。我找你说的那个修改1修改之后是不报错了。
但是新问题又来了。 如果我没有展开节点，就点击添加节点，添加过后就多了两个节点。 这个BUG你的那个DEMO不能模拟的，因为我添加节点后数据库也多了一个节点。 你那个异步获取的数据没变所以只有一个。 ====================================== 初步推断是，添加的时候先去异步获取数据，然后再加了一个节点，但是这条数据已经在数据库添加过了。 异步获取过来已经有了，再加一个就多了啊。如果先异步获取过数据再添加就不会这样子。。 看了半天源码，能力有限看不太明白。。。 
|
| 返回顶楼 | |
|
发表时间：2011-11-17
最后修改：2011-11-17
tw198611 写道 非常之郁闷啊。。。我找你说的那个修改1修改之后是不报错了。
但是新问题又来了。 如果我没有展开节点，就点击添加节点，添加过后就多了两个节点。 这个BUG你的那个DEMO不能模拟的，因为我添加节点后数据库也多了一个节点。 你那个异步获取的数据没变所以只有一个。 ====================================== 初步推断是，添加的时候先去异步获取数据，然后再加了一个节点，但是这条数据已经在数据库添加过了。 异步获取过来已经有了，再加一个就多了啊。如果先异步获取过数据再添加就不会这样子。。 看了半天源码，能力有限看不太明白。。。 呵呵，这就是你是使用逻辑有问题导致的了。 当你添加节点时，会通知给后台服务器，同时也通知了zTree，但zTree 会先去服务器获取节点数据，这时得到的子节点中已经多了那个要新增的节点，等异步加载完毕后，zTree又把一开始你用js添加的节点加了进来，当然就变成两个节点了。 如果你用ajax先通知服务器添加节点的话，那么你可以这么修改你的业务逻辑： 1、ajax 通知服务器新增节点； 此ajax可以同时获取新节点的id属性 2、ajax 操作 onload捕获后，可以得到最新节点的id属性，同时可以利用 reAsyncChildNodes 方法让父节点刷新子节点，这时候父节点会自动异步加载子节点（请设置异步加载的参数） 3、捕获 onAsyncSuccess 回调函数，利用第2步得到的id，可以使用 getNodeByParam方法获取到新增节点，这样就可以进行自己的操作，例如 selectNode 等 注意：这么修改后，你就不要使用任何 addNodes 的方法给 zTree 添加节点了。 |
| 返回顶楼 | |
|
发表时间：2011-11-18
非常感谢你的帮助，问题基本解决了。
我按照你说的去做。现在就还一个小问题了。
function addHoverDom(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span");
if ($("#addBtn_"+treeNode.id).length>0) return;
var addStr = "<button type='button' class='add' id='addBtn_" + treeNode.id
+ "' title='add node' onfocus='this.blur();'></button>";
sObj.append(addStr);
var btn = $("#addBtn_"+treeNode.id);
if (btn) btn.bind("click", function(){
var newname="新增节点"+ (newCount++);
var pid=treeNode.id;
var dataarr={'pid':pid,'name':newname};
var type='add';
$.ajax({
type:'POST',
url:'getinfo.php?ac='+type,
data:dataarr,
success:function(msg){
if(msg!=0){
msg=parseInt(msg);
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
//zTree.addNodes(treeNode, {id:msg, pId:pid, name:newname});
zTree.reAsyncChildNodes(treeNode, "refresh");
//alert("ttt");如果这里弹出提示就能选中，否则不能选中。。估计是节点没有生成完成。
var node=zTree.getNodesByParam("id",msg,treeNode);
zTree.selectNode(node[0]);
}
}
});
});
};
你说捕捉OnAsyncSuccess事件我不是很懂，麻烦指点一下怎么捕捉啊、 |
| 返回顶楼 | |
|
发表时间：2011-11-21
tw198611 写道 非常感谢你的帮助，问题基本解决了。
我按照你说的去做。现在就还一个小问题了。
function addHoverDom(treeId, treeNode) {
var sObj = $("#" + treeNode.tId + "_span");
if ($("#addBtn_"+treeNode.id).length>0) return;
var addStr = "<button type='button' class='add' id='addBtn_" + treeNode.id
+ "' title='add node' onfocus='this.blur();'></button>";
sObj.append(addStr);
var btn = $("#addBtn_"+treeNode.id);
if (btn) btn.bind("click", function(){
var newname="新增节点"+ (newCount++);
var pid=treeNode.id;
var dataarr={'pid':pid,'name':newname};
var type='add';
$.ajax({
type:'POST',
url:'getinfo.php?ac='+type,
data:dataarr,
success:function(msg){
if(msg!=0){
msg=parseInt(msg);
var zTree = $.fn.zTree.getZTreeObj("treeDemo");
//zTree.addNodes(treeNode, {id:msg, pId:pid, name:newname});
zTree.reAsyncChildNodes(treeNode, "refresh");
//alert("ttt");如果这里弹出提示就能选中，否则不能选中。。估计是节点没有生成完成。
var node=zTree.getNodesByParam("id",msg,treeNode);
zTree.selectNode(node[0]);
}
}
});
});
};
你说捕捉OnAsyncSuccess事件我不是很懂，麻烦指点一下怎么捕捉啊、 去看看如何配置 callback.onAsyncSuccess 回调函数 |
| 返回顶楼 | |
|
发表时间：2011-11-23
zTreeAPI 写道 lovegaolingli 写道 楼主，想了解下，如何给已经动态绑定好的zTree控件上标记需要选中的那些项？
比如：我现在动态加载了数据，a->a1,a2,a3;b->b1,b2,b3,b4;我想在页面一加载的时候先把这些项加载上去，然后在把a1,b2前面的check设置为true.就跟我修改数据的时候，我得先把数据项加载进来一个道理样。 我之前的想法是直接找到页面上的指定的控件，然后通过ID找到控件遍历并赋值。但是我查看源码时，不能定位到我要找的控件的ID，所以无法加载值。 各位看客，谁解决过类似的问题，能否共享下思路。 hello，不好意思，工作过于繁忙，无法及时回复了。 我不太明白你的意思， 你到底是想通过DOM找到节点数据 还是想通过节点数据找到DOM？ 请你看看 zTree 内的命名规则，基本上是 treeNode.tId 当做 节点 li 的id； li里面的a 就是 treeNode.tId + '_a' 首先感谢楼主百忙之中抽出时间看我的问题。再次抱歉我最近也比较忙没时间弄这个东西，所以没来看这个问题。 楼主，我明白你说的找到控件的ID，但是我看过了源码，你说的这个ID对应的是A标签。我的意思是想让这个A标签对应的这个节点前面的复选框选中。而且我仔细看过源码，里面都没有checkbox的控件，对应的都是button.所以我不知道怎么去给这个A标签加载他的选中项。不知道我这么说在结合我之前提的问题，楼主能不能理解我的意思？ |
| 返回顶楼 | |
|
发表时间：2011-11-23
lovegaolingli 写道 zTreeAPI 写道 lovegaolingli 写道 楼主，想了解下，如何给已经动态绑定好的zTree控件上标记需要选中的那些项？
比如：我现在动态加载了数据，a->a1,a2,a3;b->b1,b2,b3,b4;我想在页面一加载的时候先把这些项加载上去，然后在把a1,b2前面的check设置为true.就跟我修改数据的时候，我得先把数据项加载进来一个道理样。 我之前的想法是直接找到页面上的指定的控件，然后通过ID找到控件遍历并赋值。但是我查看源码时，不能定位到我要找的控件的ID，所以无法加载值。 各位看客，谁解决过类似的问题，能否共享下思路。 hello，不好意思，工作过于繁忙，无法及时回复了。 我不太明白你的意思， 你到底是想通过DOM找到节点数据 还是想通过节点数据找到DOM？ 请你看看 zTree 内的命名规则，基本上是 treeNode.tId 当做 节点 li 的id； li里面的a 就是 treeNode.tId + '_a' 首先感谢楼主百忙之中抽出时间看我的问题。再次抱歉我最近也比较忙没时间弄这个东西，所以没来看这个问题。 楼主，我明白你说的找到控件的ID，但是我看过了源码，你说的这个ID对应的是A标签。我的意思是想让这个A标签对应的这个节点前面的复选框选中。而且我仔细看过源码，里面都没有checkbox的控件，对应的都是button.所以我不知道怎么去给这个A标签加载他的选中项。不知道我这么说在结合我之前提的问题，楼主能不能理解我的意思？ 你好，标准的 checkbox 控件是没有半选状态的，所以没有使用。 勾选节点，完全可以使用 checkNode 方法进行。如果是初始化时就默认勾选，请设置节点数据的checked 属性为 true 即可！ |
| 返回顶楼 | |
|
发表时间：2011-11-30
3.0什么时候出正式版啊？还有离线的API文档。
|
| 返回顶楼 | |
|
发表时间：2011-12-01
osacar 写道 3.0什么时候出正式版啊？还有离线的API文档。
1、肯定先出 v3.0 正式版，争取圣诞节之前发布 2、离线API文档肯定要等 正式版发布以后再做了。。时间太紧，请原谅。 对于 v3.0 发布前的Bug修改，新功能制作的进度，可以关注：http://ztreeapi.iteye.com/blog/1169368 |
| 返回顶楼 | |
