當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

ztree树

發布時間：2023/12/2 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 ztree树小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

常規的ztree樹

后臺數據封裝成list對象

public PageModel getTreeBuildingRegData(Map<String, String> params) {PageModel pageModel=new PageModel();String status=params.get("status");String orgId=params.get("org_id");List<OmsBuildingReg> regList = new ArrayList<OmsBuildingReg>();StringBuffer hql = new StringBuffer(" from OmsBuildingReg t where 1=1 ");//分狀態查詢if(StringUtils.isNotBlank(status)){hql.append(" and t.status='"+status+"'");}//分機構查詢if(StringUtils.isNotBlank(orgId)){orgId = orgId.replace(",", "','");hql.append(" and t.orgId in('"+orgId+"')");}regList = this.omsBuildingRegDao.findHql(hql.toString());List<Map<String,Object>> dataList = new ArrayList<Map<String,Object>>();Map<String,Object> map = null;for (OmsBuildingReg reg : regList) {map = new HashMap<String,Object>();map.put("chkDisabled",false);map.put("click", true);map.put("id", reg.getId());map.put("name", reg.getChName());map.put("nocheck", false);map.put("struct","TREE");map.put("title",reg.getChName());//有性別時，添加性別屬性map.put("otherParam", reg.getBuildingSex() + "@@" + reg.getBuildingType());if (StringUtils.isNotBlank(reg.getParentBuildingId())) {map.put("parentId",reg.getParentBuildingId());}else {map.put("parentId","0");}dataList.add(map);}pageModel.setData(dataList);return pageModel;}

前臺js 樹展示

var ztreeCreator = new ZtreeCreator('regTree',path +"/sys/sysCall?bs_code=S_00117",zNodes).setCallback({onClick:zTreeOnLeftClick,onRightClick:zTreeOnRightClick}).initZtree({},function(treeObj){regTree = treeObj});

ztreeCreator.js

/*** 構造Ztree 說明。* * 快速構造默認配置的ztree* new ZtreeCreator('treeId',url).initZtree(param); * treeId:樹的Id，url：請求的url ， * initZtree(param,level,call); * parma 異步請求提供參數，* level展開層級（可略，默認展開全部），* call 回調提供Ztree初始化對象 ***　完整例子* var ztreeCreator = new ZtreeCreator('groupTree',url)* .setCallback({beforeClick:beforeClick,onClick:zTreeOnLeftClick,onRightClick:zTreeOnRightClick})* .initZtree(params,function(treeObj){groupTree=treeObj}); *****/var ZtreeCreator = function(treeId,url,initJson){if(!treeId) alert("構造Ztree必須提供 treeId");this.treeId = treeId;var _treeObj;var outLookStyle =false;/**初始化樹**/ this.initZtree = function(param,level,callBack){if(!url && !_setting.async.url) alert("構造Ztree必須提供請求地址！");if (jQuery.isFunction(param)) {callBack = param;param = {}; }if (jQuery.isFunction(level)) {callBack = level; level = false;}if(!param) param = {};// 通過json初始化樹if(initJson){pushJsonToBuildTree(initJson,level,callBack);return this;}//傳入自定義設置參數if(param.setting){this.setSetingParam(param.setting);}//如果異步加載if(_setting.async.url){_treeObj=jQuery.fn.zTree.init(jQuery("#"+treeId), _setting);return this;}//一次性加載 jQuery.post(url,param,function(result){if(Object.prototype.toString.call(result) === "[object String]") result =eval('(' + result + ')');pushJsonToBuildTree(result,level,callBack);});return this;}function pushJsonToBuildTree(json,level,callBack){_treeObj = jQuery.fn.zTree.init(jQuery("#"+treeId),_setting,json);//展開層級if(level){_treeObj.expandAll(false);expandTree(_treeObj,_treeObj.getNodes(),level);}else{ _treeObj.expandAll(true); }if(jQuery.isFunction(callBack)) callBack(_treeObj,treeId); if(outLookStyle){try{var curMenu = _treeObj.getNodes()[0].children[0].children[0];}catch(e){}_treeObj.selectNode(curMenu);}}this.getTreeObj = function(){if(!_treeObj) alert(treeId+"尚未初始化");return _treeObj;};/**設置樹展示的標識key {idKey:"idKEY名稱",pIdKey:"",name:"顯示名稱",title,rootPid}* idKey 默認 id* pIdKey 默認 parentId* name 默認 name* title 默認 name* */this.setDataKey = function(keys){if(!keys) return this;if(keys.idKey) _setting.data.simpleData.idKey = keys.idKey;if(keys.pIdKey) _setting.data.simpleData.pIdKey = keys.pIdKey;if(keys.name) _setting.data.key.name = keys.name;if(keys.title) _setting.data.key.title = keys.title;if(keys.rootPId) _setting.data.simpleData.rootPId=keys.rootPId;return this;}this.setChildKey = function(key){if(!key)key = "children";_setting.data.simpleData.enable = false;_setting.data.key.children =key;return this;}/** 設置選擇框的方式默認沒有選擇框* 如果需要選擇框，不需要級聯則傳 true* param true or { "Y": "p", "N": "s" }*/this.setCheckboxType = function(type){_setting.check.enable = trueif(type instanceof Object){_setting.check.chkboxType = type;}return this;}/**這里支持Ztree 所有的回調方法，請查API* eg:傳入參數{beforeClick：beforeClick,onClick:onClick,beforeCheck:beforeCheck}**/this.setCallback = function(callBack){if(callBack instanceof Object) for(call in callBack){if(!jQuery.isFunction(callBack[call])) alert(call+" :is not a function");_setting.callback[call] = callBack[call];}return this; }/** 異步加載 */this.setAsync = function(conf){_setting.async = conf;return this; }/**是否顯示圖標配置項**/this.setShowIcon = function(call){_setting.view.showIcon = call;return this; }/**設置一些特殊的值請參照 Ztree _setting 格式 ***/this.setSetingParam = function(param){if(param instanceof Object) for(p in param){_setting[p] = param[p];}return this; }this.setOutLookStyle =function(){//設置一些參數 this.setSetingParam({view :{showLine: false, showIcon: true,selectedMulti: false, dblClickExpand: false,addDiyDom: function(treeId, treeNode){var spaceWidth = 15;var switchObj = jQuery("#" + treeNode.tId + "_switch"),icoObj = jQuery("#" + treeNode.tId + "_ico");switchObj.remove();if(!treeNode.children ||treeNode.children.length==0){switchObj.removeClass("switch");}icoObj.before(switchObj);if (treeNode.level > 0){var spaceStr = "<span style='display: inline-block;width:" + (spaceWidth * treeNode.level)+ "px'></span>";switchObj.before(spaceStr);}}}});jQuery("#"+treeId).addClass("showIcon"); outLookStyle =true;return this;}/**** 注意。isShowIn!= treeId，當前情況treeId可以隨意寫。只要唯一即可* isShowIn,被顯示在某個元素下面，比如 input框，做成累似comboTree的樣子* width,height 設置出現那個 combox的寬高* TODO 如果是input 設置 autoSetValue = true ，擴展回顯和自動填值功能。*/var _isShowIn,_menuContent;this.makeCombTree = function(isShowIn,width,height){height = height? height:300;width =width ? width:163;_menuContent = treeId+"MenuContent";_isShowIn = isShowIn; var menuContent ='<div id="'+_menuContent+'" style="width:'+width+'px; height:'+height+'px;overflow-y:scroll; position:absolute;z-index: 9999;display:none;background-color:#F5F5F5">'+'<ul id="'+treeId+'" class="ztree" ></ul></div>';jQuery("#"+isShowIn).after(menuContent); jQuery("#"+isShowIn).bind("click",this.showMenu); return this;}// 可以添加一個目標對象，如果是添加了點擊事件的，則默認this.showMenu = function(target){if(!target || target.currentTarget) {target = jQuery(this);}var btnOffset = target.offset();jQuery("#"+_menuContent).css({left:btnOffset.left + "px", top:btnOffset.top + target.outerHeight() + "px"}).slideDown("fast");jQuery("body").bind("mousedown",onBodyDown);}this.hideMenu =function(){hideMenu(); }var onBodyDown = function (event){if (!(event.target.id == _isShowIn || event.target.id == _menuContent || jQuery(event.target).parents("#"+_menuContent).length>0)){hideMenu();}}var hideMenu = function(){jQuery("#"+_menuContent).fadeOut("fast");jQuery("body").unbind("mousedown", onBodyDown);}/**_setting 私有配置項**/ var _setting = {data: {key:{name: "name",title: "name"},simpleData: {enable: true,idKey: "id",pIdKey: "parentId",rootPId:0}},async: {enable: false},edit: {drag: {isCopy:true},enable: true,showRemoveBtn: false,showRenameBtn: false},view:{nameIsHTML: true,selectedMulti: true,showIconFont:true,showIcon: null},check: {enable: false,chkboxType: { "Y": "", "N": "" }},callback:{beforeClick: null,onClick: null,onRightClick: null,beforeDrop: null,onDrop: null,onAsyncSuccess: null}}/***設置展開層級*/function expandTree(treeObj,nodes,level){var thelevel=level-1; for(var i=0;i<nodes.length;i++){var node =nodes[i];treeObj.expandNode(node, true, false, false); if(thelevel>0 && node.children && node.children.length>0){expandTree(treeObj, node.children,thelevel); } } }};

左擊、右擊事件

//左擊 function zTreeOnLeftClick(event, treeId, treeNode) {curSelectNode = treeNode;var parentId = treeNode.id;var url = "departController.do?update&id=" + curSelectNode.id;if(curSelectNode.parentId=="0"){$.topCall.warn('該節點為根節點，請點擊具體的組織');return false;}$("#listFrame").attr("src", url); }; /*** 樹右擊事件*/ function zTreeOnRightClick(e, treeId, treeNode) { if (treeNode) {orgTree.selectNode(treeNode);curSelectNode=treeNode;var isfolder = treeNode.isFolder;var h = $(window).height();var w = $(window).width();var menuWidth = 120;var menuHeight = 75;var menu = null;if (treeNode != null) {menu = $('#orgMenu');}var x = e.pageX, y = e.pageY;if (e.pageY + menuHeight > h) {y = e.pageY - menuHeight;}if (e.pageX + menuWidth > w) {x = e.pageX - menuWidth;}menu.menu('show', {left : x,top : y});}

? ? ? ? //不是根節點時把添加根節點置灰
? ? ? ?if(buildingType!=1){
? ? ? ? $('#regMenu').menu('disableItem', $('#addTopMenu'));
? ? ? }else{
? ? ? $('#regMenu').menu('enableItem', $('#addTopMenu'));
? ? ? }
? ? ? ?//最后一個子節點時不讓添加
? ? ? if(buildingType==5){
? ? ? $('#regMenu').menu('disableItem', $('#addMenu'));
? ? ?}else{
? ? ? ?$('#regMenu').menu('enableItem', $('#addMenu'));
? ? }

}; //菜單對應項 function menuHandler(item) {if ('add' == item.name) {addNode();} else if ('remove' == item.name) {delNode();} else if ('sort' == item.name) {sortNode();} else if ('edit' == item.name) {editNode(1);} else if ('fresh' == item.name) {refreshNode();} }; function refreshNode() {loadTree(); };//添加節點 function addNode() {var selectNode = getSelectNode();if (!selectNode) return;var url = "departController.do?add&id=" + selectNode.id;$("#listFrame").attr("src", url);};//編輯節點 function editNode(type) {var selectNode = getSelectNode();if (!selectNode) return;//根節點不能編輯if(selectNode.id=="0" && type==1 ){$.topCall.warn('該節點為根節點，不可編輯');return;}var url = "departController.do?update&id=" + selectNode.id;$("#listFrame").attr("src", url);};//刪除 function delNode() {var selectNode = getSelectNode();var nodeId = selectNode.id;if (nodeId == "0") {$.topCall.warn('該節點為根節點，不可刪除');return;} var url = "jeecgFormDemoController.do?del&id="+nodeId;if(!confirm('溫馨提示', '確定刪除該組織以及該組織下的所有子組織？')){return;}jQuery.ajax({ async : false, cache:false, type: 'GET', dataType : "json", url: url,//請求的action路徑 error: function () {//請求失敗處理函數 alert('請求失敗'); }, success:function(data){ //請求成功后處理函數。if(data.success){orgTree.removeNode(selectNode);$("#listFrame").attr("src", "about:blank");}else{alert(data.msg);}} }); }; //選擇資源節點。 function getSelectNode() {orgTree = $.fn.zTree.getZTreeObj("orgTree");var nodes = orgTree.getSelectedNodes();var node = nodes[0];return node; };

帶 radio 的單選下拉菜單

將官網上的demo拷貝一份出來

定義input框、div,div先隱藏掉，設置樣式

后臺填充數據。

public PageModel getSelectTreeBuildingRegData(Map<String, String> params){PageModel pageModel=new PageModel();String status=params.get("status");String orgId=params.get("org_id");String buildingType=params.get("buildingType");try{List<OmsBuildingReg> regList = new ArrayList<OmsBuildingReg>();StringBuffer hql = new StringBuffer(" from OmsBuildingReg t where 1=1 ");//分狀態查詢if(StringUtils.isNotBlank(status)){hql.append(" and t.status='"+status+"'");}//分機構查詢if(StringUtils.isNotBlank(orgId)){orgId = orgId.replace(",", "','");hql.append(" and t.orgId in('"+orgId+"')");}if(StringUtils.isNotBlank(buildingType)){buildingType = buildingType.replace(",", "','");hql.append(" and t.buildingType in('"+buildingType+"')");}regList = this.findHql(hql.toString());List<Map<String,Object>> dataList = new ArrayList<Map<String,Object>>();Map<String,Object> map = null;for (OmsBuildingReg reg : regList) { // StringBuilder sqls = new StringBuilder();; // Object[] paramss = null;map = new HashMap<String,Object>();map.put("id", reg.getId());map.put("name", reg.getChName());if (StringUtils.isNotBlank(reg.getParentBuildingId())) {map.put("pId",reg.getParentBuildingId());map.put("open",false);}else {map.put("pId","1");map.put("open",false);} // sqls.append(" from OmsBuildingReg t where t.parentBuildingId=? ") ; // //分機構查詢 // if(StringUtils.isNotBlank(orgId)){ // orgId = orgId.replace(",", "','"); // sqls.append(" and t.orgId in('"+orgId+"')"); // } // paramss = new Object[]{reg.getId()}; // List<OmsBuildingReg> omsBuildingRegList= this.findHql(sqls.toString(), paramss); // if(omsBuildingRegList!=null&&omsBuildingRegList.size()>0){ // dataList.add(map); // }else{ // OmsBuildingReg de = this.getEntity(OmsBuildingReg.class, reg.getId()); // if (de != null) { // map.put("id", de.getId()); // map.put("name", de.getChName()); // if(StringUtils.isNotBlank(de.getParentBuildingId())){ // map.put("pId", reg.getParentBuildingId()); // map.put("open",false); // }else{ // map.put("pId", "1"); // map.put("open",false); // } // dataList.add(map); // }else{ // map.put("open",false); // dataList.add(map); // } // } dataList.add(map);pageModel.setMsg("查詢成功");}pageModel.setData(dataList);}catch(Exception e){e.printStackTrace();}return pageModel;} }

效果圖：

轉載于:https://www.cnblogs.com/magic101/p/8795311.html

總結

以上是生活随笔為你收集整理的ztree树的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

ztree