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'));
? ? }
帶 radio 的單選下拉菜單
將官網上的demo拷貝一份出來
var setting = {check: {enable: true,chkStyle: "radio",radioType: "all"},view: {dblClickExpand: false},data: {simpleData: {enable: true}},callback: {onClick: onClick,onCheck: onCheck}};function showMenu() {jQuery.ajax({async : false,type : 'POST',dataType : "json",data:{status:"1",buildingType:"1,2,3,4"},url : path + "/sys/sysCall?bs_code=S_00151",error : function() {//請求失敗處理函數 console.log("123");alert('請求失敗');},success : function(data) { //請求成功后處理函數。 console.log(data);zNodes=data.data;$.fn.zTree.init($("#treeDemo"), setting, zNodes);}});var cityObj = $("#parentBuildingId");var cityOffset = $("#parentBuildingId").offset();$("#menuContent").css({left:cityOffset.left + "px", top:cityOffset.top + cityObj.outerHeight() + "px"}).slideDown("fast");$("body").bind("mousedown", onBodyDown); }function onBodyDown(event) {if (!(event.target.id == "menuBtn" || event.target.id == "parentBuildingId" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length>0)) {hideMenu();} } function hideMenu() {$("#menuContent").fadeOut("fast");$("body").unbind("mousedown", onBodyDown); }function onClick(e, treeId, treeNode) {var zTree = $.fn.zTree.getZTreeObj("treeDemo");zTree.checkNode(treeNode, !treeNode.checked, null, true);return false; }function onCheck(e, treeId, treeNode) {var zTree = $.fn.zTree.getZTreeObj("treeDemo"),nodes = zTree.getCheckedNodes(true),v = "";for (var i=0, l=nodes.length; i<l; i++) {v += nodes[i].name + ",";}if (v.length > 0 ) v = v.substring(0, v.length-1);var cityObj = $("#parentBuildingId");cityObj.attr("value", v); }定義input框、div,div先隱藏掉，設置樣式
<input id="parentBuildingId" name="parentBuildingId" type="text" class="form-control" οnclick="showMenu();" /><div id="menuContent" class="menuContent" style="display:none; position: absolute;"><ul id="treeDemo" class="ztree" style="margin-top:0; width:100%;background-color:#f9f9f9"></ul></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
總結
- 上一篇： 每日算法之抽签
- 下一篇： 大班教案《春夏秋冬》反思