zTree插件使用.docxVIP

zTree的学习使用引进三个头文件link href=~/Scripts/zTree/css/zTreeStyle/metro.css rel=stylesheet / script src=~/Scripts/zTree/js/jquery-1.4.4.min.js/scriptscript src=~/Scripts/zTree/js/jquery.ztree.all-3.5.min.js/script[注]第一个是css样式，主要用于显示特效，第二个是jquery，因为zTree也是由jquery写成的，所以jquery必须在zTree的前面引用！第三个是zTree的js，包含其里面一些特殊的效果!2.在页面中放置容器和ul，用于显示zTree的内容和效果body div class=container ul class=ztree id=tree style=width:560px;overflow:auto;/ul/divscript type=text/javascript//zTree js代码部分/script/body3．zTree树部分script type=text/javascript var zTree; var demoIframe; //添加功能 function addHoverDom(treeId, treeNode) { var sObj = $(# + treeNode.tId + _span); if (treeNode.editNameFlag || $(#addBtn_ + treeNode.tId).length 0) return; //在树节点的后面增加添加和编辑按钮 var addStr = span class=button remove id=removeBtn_ +treeNode.tId+ title=add node onfocus=this.blur();/span; addStr += span class=button add id=addBtn_+treeNode.tId+/span; addStr += span class=button edit id=editBtn_ + treeNode.tId + /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: (1000 + newCount), pId: treeNode.id, name: new node + (newCount++) }); return false; }); } //删除功能 function removeHoverDom(treeId, treeNode) { $(#addBtn_ + treeNode.tId).unbind().remove(); $(#editBtn_ + treeNode.tId).unbind().remove(); $(#removeBtn_+treeNode.tId).unbind().remove(); } //树节点的设置 var setting = { //添加checkbox，true为有，false为没有 check: { enable: true }, //添加特殊的控件 view: { addHoverDom: addHoverDom,//添加按钮 removeHoverDom: removeHoverDom,//移除按钮 dbClickExpand: false,//双击不可用 selectedMulti: false,//多选不可用 }, //数据格式 data: { //简单数据类型 simpleData: { enable: true, idKey: id,//节点 pIdKey: pId,//父节点 rootPId: //根节点 } }, //回发操作 callback: { //点击之前 beforeClick: function (treeId, treeNode) { var zTree = $.fn.zTree.getZTreeObj(tree); //判断是否是父节点 if (treeNode.isParent) { zTree.expandNode(treeNode); return false; } else { demoIframe.attr(src, treeNode.file +