为dwz扩展树形下拉框

红太狼 2021-05-10 11:18 487阅读 0赞

**前言**：在之前的博客中写了一个不在dwz环境下制作的树形下拉框，但是使用dwz后，发现需要为dwz扩展一个自己的组件，通过value属性为服务端传递请求参数，通过title属性显示树形下拉框当前选中项目，效果图见如下：

![2dc530a0-dbf9-3f2b-b58d-c1398444642a.png][]

改造步骤见如下：

第一步：准备材料，可在附件中下载[combotree.7z][] ，目录如下

![c4ed16d9-3e65-39d2-a9b3-230c3bafd14d.png][]

第二步：在dwz的index.jsp页面中准备菜单

<div id="menuContent" style="display: none; position: absolute;">
    		<ul id="combotree" class="ztree"></ul>
    	</div>

第三步：在combotree.js中封装组件内容

/**
     * @author maweiqing
     * @version 1.0
     */
    (function($) {
    	$.extend(
    					$.fn,
    					{
    						combotree : function(options) {
    							var $this = $(this);
    							loadProxysInfo();
    							
    							if ($this.val() != null && $this.val() != '') {
    								$this.before("<span class='combo-text' style='float:left;display:block;width:"
    										+ $this.width() + "px' οnclick=\"showMenu($(this));\" >" + $this.attr("title") + "</span>");
    							} else {
    								$this.before("<span class='combo-text' style='float:left;display:block;width:"
    										+ $this.width() + "px' οnclick=\"showMenu($(this));\" >" + rootNode["name"] + "</span>");
    							}
    							
    							$this.before("<span οnclick=\"showMenu($(this).prev());\" class=\"combo-arrow\" style=\"float:left\"></span>");
    							$this.hide();
    						}
    					});
    })(jQuery);
    
    var setting = {
    	view : {
    		dblClickExpand : false
    	},
    	data : {
    		simpleData : {
    			enable : true
    		}
    	},
    	callback : {
    		onClick : onClick
    	},
    	view : {
    		selectedMulti : false,
    		// showLine : false,
    		showIcon : false
    	}
    };
    
    /**
     * 隐藏菜单
     */
    function hideMenu() {
    	$("#menuContent").fadeOut("fast");
    	$("body").unbind("mousedown", onBodyDown);
    }
    
    /**
     * 点击菜单，对当前输入框的前span进行name的赋值，对当前输入框进行代理序列号的赋值
     * 
     * @param e
     * @param treeId
     * @param treeNode
     */
    function onClick(e, treeId, treeNode) {
    	$("#proxyserial").prev().prev().html(treeNode.name);
    	$("#proxyserial").attr({
    		value : treeNode.id,
    		title : treeNode.name
    	});
    	hideMenu();
    }
    
    /**
     * 为当前节点添加下级节点
     * 
     * @param records
     * @param cnode
     */
    function addNextNode(records, cnode) {
    	cnode["children"] = new Array();
    	cnode["open"] = true;
    	$(records).each(
    			function(index, value) {
    				// 如果当前代理的级别=len，且以pre开头的，则添加到上一级
    				if ((value.proxyserial.length / 4 == cnode.id.length / 4 + 1)
    						&& (value.proxyserial.substring(0, cnode.id.length) == cnode.id)) {
    					var subNode = {};
    					subNode["name"] = value.proxysName;
    					subNode["id"] = value.proxyserial;
    					cnode["children"].push(subNode);
    					addNextNode(records, subNode);
    				}
    			});
    }
    
    // 树形下拉框的节点数组
    var proxyTreeData = [];
    
    // 根节点
    var rootNode = {};
    
    /**
     * 取得代理列表.
     */
    function loadProxysInfo() {
    	// 当前树形结构没有获取代理节点时
    	if (proxyTreeData.length == 0) {
    		$.ajax({
    			url : common.ctx + "/member/loadProxysInfo.do",// 请求的URL
    			async : false,
    			dataType : 'json',
    			success : function(records) {
    				// 代理表中有代理
    				if (records != null && records.length > 0) {
    					// 取出root节点
    					var nodes = records.slice(1);
    					var root = records[0];
    
    					// 从根节点开始
    					rootNode["name"] = root.proxysName;
    					rootNode["id"] = root.proxyserial;
    					rootNode["open"] = true;
    					rootNode["children"] = new Array();
    					
    					// 根节点有子节点
    					if (nodes != null && nodes.length > 0) {
    						// 设定当前代理的下级代理级别，假如当前代理为2级，那么2级的下级为3级
    						var start = 1;
    						if (root.proxyserial != null) {
    							start = root.proxyserial.length / 4 + 1;
    						}
    						
    						// 遍历子节点
    						$.each(nodes, function(index, value) {
    							if (value.proxyserial.length / 4 == start) {
    								var subNode = {};
    								subNode["name"] = value.proxysName;
    								subNode["id"] = value.proxyserial;
    								rootNode["children"].push(subNode);
    								addNextNode(records, subNode);
    							}
    						});
    					}
    					proxyTreeData.push(rootNode);
    					// 对tree进行赋值
    					$.fn.zTree.init($("#combotree"), setting, proxyTreeData);
    				}
    			}
    		});
    	}
    }
    
    /**
     * 打开树形结构
     */
    function showMenu($ctrl) {
    	var cityOffset1 = $ctrl.offset();
    	$("#menuContent").css({
    		width : $ctrl.width() + $ctrl.next().width(),
    		left : cityOffset1.left + "px",
    		top : cityOffset1.top + $ctrl.outerHeight() + "px"
    	}).slideDown("fast");
    	$("body").bind("mousedown", onBodyDown);
    }
    
    /**
     * 点击树形结构以外时，关闭树形下拉框
     * 
     * @param event
     */
    function onBodyDown(event) {
    	if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
    		hideMenu();
    	}
    }

代码中对关键点进行说明，该组件内容主要是为了定制代理的多层级关系，如有需要，你需要变更的就是loadProxysInfo()方法

第四步：为dwz增加该组件的初始化，在dwz.ui.js文件中

$("ul.tree", $p).jTree();
    	$("input.combotree", $p).combotree();
    	$('div.accordion', $p).each(function(){
    		var $this = $(this);
    		$this.accordion({fillSpace:$this.attr("fillSpace"),alwaysOpen:true,active:0});
    	});

第五步：就可以在页面上进行使用了

总结：通过以上方式，就可以使用dwz的检索功能，通过服务端

initMembersList(BaseConditionVO vo, Model model, HttpServletRequest request) 
    
    // 获取对应代理名称
    			if (proxyserial != null) {
    				model.addAttribute("proxyName", this.proxysMapper.selectByProxyserial(proxyserial).getUsername());
    			}
    			condition.setProxyserial(proxyserial);

进行检索功能了

[2dc530a0-dbf9-3f2b-b58d-c1398444642a.png]: /images/20210506/4ae9419819c943908057135823cb074e.png
[combotree.7z]: http://dl.iteye.com/topics/download/3faa2b52-4c91-3dfe-85ad-c4cd270f8f8a
[c4ed16d9-3e65-39d2-a9b3-230c3bafd14d.png]: /images/20210506/267fe1c20a57412198c9a611e882cc7a.png