为dwz扩展树形下拉框

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

 

改造步骤见如下：

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

 

第二步：在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' onclick=\"showMenu($(this));\" >" + $this.attr("title") + "</span>");
							} else {
								$this.before("<span class='combo-text' style='float:left;display:block;width:"
										+ $this.width() + "px' onclick=\"showMenu($(this));\" >" + rootNode["name"] + "</span>");
							}
							
							$this.before("<span onclick=\"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});
	});

 

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

<span class="combo">
						<input type="text" id="proxyserial" name="proxyserial" class="combotree" value="${vo.mo.proxyserial}" title="${proxyName}">
					</span>

 

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

initMembersList(BaseConditionVO vo, Model model, HttpServletRequest request) 

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

 进行检索功能了

 

评论

1 楼 jacking124 2014-11-03  

mark!