超级详细的Ztree详解

超级详细的Ztree详解 1、添加样式、js 如果想要hideNodes、showNodes等方法，必须加入 如果不需SEO靠我要那些hideNodes、showNodes等方法以只添加一个js，代替上面的三个js 2、html设置一个div、ul，注意ul的class是固定的ztree

3、写js操作数SEO靠我据1、setting配置详情 var setting = {//显示view: {selectedMulti: false, //在复制的时候，是否允许选中多个节点。true为支持，按SEO靠我下ctrl键生效，false不支持。dblClickExpand: false, //双击的时候是否切换展开状态。true为切换，false不切换fontCss: setFontCss_ztree /SEO靠我/设置节点的颜色},//增删改，移动复制edit: {enable: true, //如果enable为flase，那么树就不能移动了showRemoveBtn: true, //是否显示树的删除按钮SEO靠我showRenameBtn: true, //是否显示数的重命名按钮isSimpleData : true, //数据是否采用简单 Array 格式，默认falsetreeNodeKey : "id"SEO靠我, //在isSimpleData格式下，当前节点id属性treeNodeParentKey : "parentId",//在isSimpleData格式下，当前节点的父节点id属性showLine SEO靠我: true, //是否显示节点间的连线removeTitle: "删除节点",//删除Logo的提示renameTitle: "编辑节点",//修改Logo的提示//拖拽drag: {isCopy:SEO靠我 true,//能够复制isMove: true,//能够移动prev: false,//不能拖拽到节点前next: false,//不能拖拽到节点后inner: true//只能拖拽到节点中}},/SEO靠我/异步async: {enable: true, //开启异步加载type:"get",url:holly.getPath() + "/rest/treeCode/showZtreeSyncRest"SEO靠我,contentType:"application/json",autoParam: ["id"], //异步加载数据，自动添加id参数，会自动获取当前节点的id值dataFilter:filter,SEO靠我 //过滤，跟easy-ui中的loadFilter方法一样。otherParam: { "id":"1", "code_name":"固网测试"}//提交的时候就会提交参数id=1&code_namSEO靠我e=固网测试},data:{key:{name:"codeName" //节点显示的值},//simpleData:{enable:true,//如果为true，可以直接把从数据库中得到的List集合SEO靠我自动转换为Array格式。而不必转换为json传递idKey:"id",//节点的idpIdKey:"parentId",//节点的父节点idrootPId:null}},//回调函数callbackSEO靠我: {beforeDrag: beforeDrag,//拖拽之前beforeDrop: beforeDrop,//拖拽结束onDrop: zTreeOnDrop,//拖拽结束后//onDrag: zTSEO靠我reeOnDrag,//拖拽的时候beforeRemove: zTreeBeforeRemove,//删除节点前onRemove: zTreeOnRemove,//节点删除之后beforeEditNaSEO靠我me: zTreeBeforeEditName,//进行编辑之前//beforeRename: zTreeBeforeRename,//重命名节点之前//onRename: zTreeOnRenameSEO靠我,//重命名之后onClick: zTreeOnClick,//点击onRightClick: zTreeOnRightClick,//右键onAsyncSuccess: zTreeOnAsyncSuSEO靠我ccess//异步加载//beforeExpand: beforeExpand,//展开节点前//onAsyncSuccess: onAsyncSuccess,//异步数据加载成功的回调//onAsySEO靠我ncError: onAsyncError //异步数据加载错误后回调}}; 2、zTree回调方法//对得到的json数据进行过滤，加载树的时候执行function filter(tSEO靠我reeId, parentNode, responseData) {var contents = (responseData.content)?responseData.content:responsSEO靠我eData;//当第一次加载的时候只显示一级节点，但是要让别人知道对应一级节点下是否有数据，那么就需要设置isParent,为true可以展开，下面有数据。//我这里是由于异步加载数据，只加载根节点以SEO靠我及一级节点。那么一级节点下还有子节点，所以设置isParent显示还有子节点的效果if(contents.length >0){for(var i= 0 ; iSEO靠我tion = $(# + searchConditionId).val();//<2>.得到模糊匹配搜索条件的节点数组集合var highlightNodes = new Array();if (seSEO靠我archCondition != "") {var treeObj = $.fn.zTree.getZTreeObj(treeId);//模糊查询highlightNodes = treeObj.geSEO靠我tNodesByParamFuzzy("CODE_NAME", searchCondition, null);}//<3>.高亮显示并展示【指定节点】highlightAndExpand_ztree(SEO靠我treeId, highlightNodes);}//展开，并显示不同颜色function highlightAndExpand_ztree(treeId, highlightNodes){var tSEO靠我reeObj = $.fn.zTree.getZTreeObj(treeId);//<1>. 先把全部节点更新为普通样式var treeNodes = treeObj.transformToArraySEO靠我(treeObj.getNodes());var nodes = treeObj.transformToArray(treeObj.getNodes()[0].children);for (var iSEO靠我 = 0; i < treeNodes.length; i++) {treeNodes[i].highlight = false;treeObj.updateNode(treeNodes[i]);}/SEO靠我/<2>.收起树, 只展开根节点下的一级节点close_ztree(treeId);//<3>.把指定节点的样式更新为高亮显示，并展开if (highlightNodes != null) {for SEO靠我(var i = 0; i < highlightNodes.length; i++) {//高亮显示节点，并展开highlightNodes[i].highlight = true;treeObj.SEO靠我updateNode(highlightNodes[i]);//高亮显示节点的父节点的父节点....直到根节点，并展示var parentNode = highlightNodes[i].getParSEO靠我entNode();var parentNodes = getParentNodes_ztree(treeId, parentNode);//展开treeObj.expandNode(parentNoSEO靠我des, true, false, true);treeObj.expandNode(parentNode, true, false, true);//设置颜色setFontCss_ztree("",SEO靠我highlightNodes[i]);}}}//递归查找父节点function getParentNodes_ztree(treeId, node){if (node != null) {var trSEO靠我eeObj = $.fn.zTree.getZTreeObj(treeId);var parentNode = node.getParentNode();return getParentNodes_zSEO靠我tree(treeId, parentNode);} else {return node;}}//设置颜色function setFontCss_ztree(treeId, treeNode) {ifSEO靠我 (treeNode.PARENT_ID == null) {//根节点return {color:"#333", "font-weight":"bold"};} else if (treeNode.SEO靠我isParent == false){//叶子节点return (!!treeNode.highlight) ? {color:"#ff0000", "font-weight":"bold"} : {SEO靠我color:"#660099", "font-weight":"normal"};} else {//父节点return (!!treeNode.highlight) ? {color:"#ff000SEO靠我0", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};}}//点击的时候判断节点有没有数据，以便于datadrid是否请SEO靠我求后台刷新if(treeNodes.isParent){datagrid刷新}else{提示}//获取过滤之外的所有数据var filterNodes = treeObj.getNodesByFiltSEO靠我er(filters);function filters(node) {return (node.highlight == true);}//获取过滤的所有数据treeObj.getNodesByPaSEO靠我ramFuzzy("CODE_NAME", searchCondition, null);//当焦点放在节点上显示新增Logofunction addHoverDom(treeId, treeNodeSEO靠我) {var sObj = $("#" + treeNode.tId + "_span");if (treeNode.editNameFlag || $("#addBtn_"+treeNode.tIdSEO靠我).length>0) return;var addStr = "";sObj.after(addStr);var btn = $("#addBtn_"+treeNode.tId);if (btn) SEO靠我btn.bind("click", function(){//弹出easy-ui新增对话框treeBusinessManager.newTreeDialog();return false;});};/SEO靠我/当鼠标不在节点的时候，自动隐藏新增按钮function removeHoverDom(treeId, treeNode) {$("#addBtn_"+treeNode.tId).unbind().rSEO靠我emove();};//获取某个节点下的所有节点//需求：当只能在叶子节点上添加数据的时候，但是展现的时候，需要如果点击叶子节点显示叶子节点的数据，点击节点显示该节点下的所有叶子节点的信息。//注意：SEO靠我这里数据用，区分id，是为了去后台进行in查询function getAllChildNodes(treeNode) {var treeObj = $.fn.zTree.getZTreeObj("shSEO靠我eetTree");//获取ztreevar childNodes = treeObj.transformToArray(treeNode);//把该节点的下的所有数据转换为数组var nodes =SEO靠我 new Array();var j = 0;for(i = 0; i < childNodes.length; i++) {//只有保存叶子节点的数据if(!childNodes[i].isPareSEO靠我nt){nodes[j] = childNodes[i].id;//nodes.join(",");j++;}}return nodes;}//获取该节点下的所有子节点getChildNodes:fuSEO靠我nction(treeNode,result){if (treeNode.isParent) {var childrenNodes = treeNode.children;if (childrenNoSEO靠我des) {for (var i = 0; i < childrenNodes.length; i++) {result += , + childrenNodes[i].id;result = sheSEO靠我etShareManager.getChildNodes(childrenNodes[i], result);}}}return result;}//刷新节点function refreshNode(SEO靠我id) {var treeObj = $.fn.zTree.getZTreeObj("busTree");var node = treeObj.getNodeByParam("id", id, nulSEO靠我l);if (node) {treeObj.reAsyncChildNodes(node, "refresh");} else {setTimeout(function() {refreshNode(SEO靠我id);}, 10);}}//刷新父节点function refreshParentNode(id) {var treeObj = $.fn.zTree.getZTreeObj("busTree");SEO靠我var node = treeObj.getNodeByParam("id", id, null);var pNode = node.getParentNode();if (pNode) {refreSEO靠我shNode(pNode.id);} else {refreshNode("0");}} //删除根节点的时候，销毁整棵树 $.fn.zTree.desSEO靠我troy("busTree");//修改节点名，判断是否为空，或者超出限制 function zTreeBeforeRename(treeId, treeNode, newNaSEO靠我me, isCancel) {if (newName.length>10||newName.trim().length<=0) {toastr.error("填写信息不符合规则!");var treeSEO靠我Obj = $.fn.zTree.getZTreeObj("treeDemo");treeObj.cancelEditName();return false;}return true; SEO靠我 } function zTreeOnRename(event, treeId, treeNodes, isCancel) {//真正触发的时候为undefiend。触SEO靠我发不成功的时候，为trueif(isCancel == undefined){//修改操作} }//右键显示新增，修改，删除（与easy-ui整体类似）//右键，填出编辑框fuSEO靠我nction zTreeOnRightClick(event, treeId, treeNode) {var treeObj = $.fn.zTree.getZTreeObj("busTree");/SEO靠我/设置选中右键节点treeObj.selectNode(treeNode);//这里可以为为div添加click事件，进行新增，修改，删除操作。注意：设置选中节点，才能去对应的操作方法中获取选中的几点SEO靠我（var treeObj = $.fn.zTree.getZTreeObj("busTree");var nodes = treeObj.getSelectedNodes();）$(#configurSEO靠我e-tree-menu).menu(show,{left: event.pageX,top: event.pageY});};//删除节点的时候需要注意//由于数据是异步加载的，所以不仅需要进行数据删SEO靠我除，还需要进行逻辑删除。否则数据没有及时的回显，那么树的状态isParent还没改变。for (var i=0, l=nodes.length; i < l; i++) {treeObj.removeSEO靠我Node(nodes[i]);}//在onBeforeRemove中操作，异步的判断//在数据操作成功之后var treeObj = $.fn.zTree.getZTreeObj("busTree")SEO靠我;treeObj.selectNode(treeNode);var nodes = treeObj.getSelectedNodes();for (var i=0, l=nodes.length; iSEO靠我 < l; i++) {treeObj.removeNode(nodes[i]);//默认是false，如果设置为true,那么就会触发onRemove函数}//html中的menu

新增节点

编辑节点

删SEO靠我除节点