ztree框架使用问题汇总
1.如何让用户只能点击页子节点
var setting = { callback: { beforeClick: zTreeBeforeClick } }; function zTreeBeforeClick(treeId, treeNode, clickFlag) { return !treeNode.isParent;//当是父节点 返回false 不让选取 };
2.用户在点击之前只能点击三项
function zTreeBeforClick(treeId,treeNode,clickFlag){ if(treeNode.checked)return true;//如果是点击取消就不执行下面 var zTree=$.fn.zTree.getZTreeObj(treeId); var nodes=zTree.getCheckedNodes(true); var num=0; for(var i=0;i<nodes.length;i++){ if(!nodes[i].isParent)num++; } if(num>2){ alert("选择超出"); return false; } }
3.页面记载的时候默认选择第一个子项的最后一个子节点,并且点击
单选:
var el=zTreeObj.getNodes()[0]; while(el.isParent){ el=el.children[0]; } zTreeObj.selectNode(el); setting.callback.onClick(null, zTreeObj.setting.treeId, el);//设置第一个节点被点击
多选
var el=zTreeObj.getNodes()[0]; while(el.isParent){ zTreeObj.expandNode(el,true,false,false);//展开当前节点 el=el.children[0]; } zTreeObj.checkNode(el);
4.将勾选的节点,组成字符串,用“\”隔开,最后一个不需要;
思路:不同于往常的写法点
1.用数组的reduce方法代替了for循环
2.原本是在字符串的最后部分加上“\”变成了在字符串前面添加“\”(除去第一个)
var nodes=treeObj.getCheckedNodes(true); data.groupTreeCode=nodes.reduce(function(o,v,i){ if(!!o){o+"\\"} o+=v.original_id; return o; })
5.只获取选中的叶子节点的id,用“;”隔开
var nodes=treeObj.getCheckedNodes(true); data.groupTreeCode=nodes.reduce(function(o,v,i){ if(!v.isParent){ if(o==undefined){ o=""; } if(!!o){o+=";"} o+=v.id; } return o; })
7.ztree不能跨级勾选(两个父节点)
思路:
在勾选之前的事件里,
获取之前勾选的节点最前一级的id,
再得到本次点击节点的最上一级的id,用while循环得到
两者进行对比,不一样就return false
代码:
function zTreebeforeCheck(treeId, treeNode){ var treeObj=$.fn.zTree.getZTreeObj(treeId); var selnode=treeObj.getCheckedNodes(); var lastCheckPid="";//上一次选中的父id var thisCheckPid=""//本次选中的父id if(selnode.length>0){ lastCheckPid=selnode[0].id; }else{ return true//如果之前一个都没有勾选 } var el=treeNode; while(!!el.getParentNode()){//如果有父级找父级的id el=el.getParentNode(); } thisCheckPid=el.id; if(thisCheckPid===lastCheckPid){ return true }else{ //window.wxc.xcConfirm("不能跨节点勾选,请重新选择!", window.wxc.xcConfirm.typeEnum.warning); window.wxc.xcConfirm("不能跨节点勾选,请重新选择!", window.wxc.xcConfirm.typeEnum.error); return false } }
为了更好的用户体验,可以在else中将页面中所有的节点取消勾选,然后return true 这样一来就可以实现跨级勾选就去掉原来的勾选
thisCheckPid=el.id; if(thisCheckPid===lastCheckPid){ return true }else{ //window.wxc.xcConfirm("不能跨节点勾选,请重新选择!", window.wxc.xcConfirm.typeEnum.error); //return false //清除掉页面选中的节点 treeObj.checkAllNodes(false); return true }