继续对dwz封装树形下拉框

前言：之前写了一篇dwz的树形下拉框组件，只能满足单页面的使用，但是面对实际应用时，以上应用暂时不能满足，于是乎又重新对树形菜单进行改造。

 

然后先说一下思路，本思路有很大弊端，也希望有看到的大牛有好的办法时，请多多指教。

思路：页面上通过一个input标签进行value值和title值的动态设定

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

 value向controller传递值，以便通过以下值进行获取

String proxyserial = request.getParameter("proxyserial");
			condition.setProxyserial(proxyserial);

 title值为方便页面显示，eg.title为交易所总代理，value为""字符串，通过controller的以下方法对前台显示内容进行控制

model.addAttribute("proxyName", this.proxysMapper.selectByProxyserial(currentProxyserial).getUsername());

 然后，需要在combotree.js中对该input标签进行定制，见如下代码

/**
 * @author maweiqing
 * @version 1.0
 */
(function($) {

	$.extend($.fn, {
		combotree : function() {
			// 获取树形菜单内容
			loadProxysInfo(false, null);
			
			return this.each(function(i) {
				// 输入文本框
				var $this = $(this);

				// 文本框的ID值
				var cid = $this.attr("id") || Math.round(Math.random() * 10000000);
				
				// 定制的title值
				var name = $this.attr("title");
				// 定制下拉框
				var combo = '<span class="combo-text" id="comboText_' + cid
						+ '" style="float:left;display:block;width:' + $this.width() + 'px">' + name + '</span>'
						+ '<span onclick="showMenu($(this).prev());" class="combo-arrow" style="float:left" title="显示"></span>'
						+ '<span onclick="loadProxysInfo(true, ' + cid
						+ ');" class="combo-reload" style="float:left" title="重新加载"></span>';

				$this.before(combo);
				$this.hide();
			});
		}
	});
})(jQuery);

// 树形下拉框的节点数组
var proxyTreeData = [];

/**
 * 隐藏菜单
 */
function hideMenu($menuContent) {
	$menuContent.fadeOut("fast");
	$("body").unbind("mousedown", {
		cid : $menuContent.attr("id")
	}, onBodyDown);
	$menuContent.remove();
}

/**
 * 为当前节点添加下级节点
 * 
 * @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);
				}
			});
}

/**
 * 打开树形结构
 */
function showMenu($ctrl) {
	var cid = $ctrl.attr("id").substring($ctrl.attr("id").indexOf("_") + 1);

	var $tree = $('<ul class="ztree" id="menuTree_' + cid + '"></ul>');
	
	// 对tree进行赋值
	$.fn.zTree.init($tree, setting, proxyTreeData);
	
	// 定制树形菜单
	var $menuContent = $('<div id="menuContent_' + cid
			+ '" style="position: absolute;display: none;"></div>');
	$menuContent.append($tree);

	// 添加到body中
	$("body").append($menuContent);
	
	// 获取当前文本框的值，对树形菜单进行选中状态的赋值
	var treeObj = $.fn.zTree.getZTreeObj($tree.attr("id"));
	treeObj.selectNode(treeObj.getNodeByParam("id", $("#" + cid).val(), null));
	
	var offset1 = $ctrl.offset();
	// 计算树形菜单位置
	$menuContent.css({
		width : $ctrl.width() + $ctrl.next().width() * 2,
		left : offset1.left + "px",
		top : offset1.top + $ctrl.outerHeight() + "px"
	}).slideDown("fast");
	
	// 绑定鼠标左键点击事件
	$("body").bind("mousedown", {
		cid : $menuContent.attr("id")
	}, onBodyDown);
}

/**
 * 点击树形结构以外时，关闭树形下拉框
 * 
 * @param event
 */
function onBodyDown(event) {
	if (!(event.target.id == "menuBtn" || event.target.id == event.data.cid || $(event.target).parents("#" + event.data.cid).length > 0)) {
		hideMenu($('#' + event.data.cid));
	}
}

/**
 * 取得代理列表.
 */
function loadProxysInfo(flag, cid) {
	// 手动加载
	if (flag) {
		// 重新获取数据
		proxyTreeData = [];
		ajaxProxys();
		// 显示内容
		$("#comboText_" + $(cid).attr("id")).html(proxyTreeData[0].name);

		// 输入框赋值
		$(cid).attr({
			value : proxyTreeData[0].id,
			title : proxyTreeData[0].name
		});

		// 树形菜单重新赋值
		var $menuTree = $("#menuTree_" + $(cid).attr("id"));
		// 对tree进行赋值
		$.fn.zTree.init($menuTree, setting, proxyTreeData);
	} else {
		// 如果数据没有初始化，那么需要重新获取代理树形结构
		if (proxyTreeData.length == 0) {
			ajaxProxys();
		}
	}
};

/**
 * 请求后台，获取当前登录用户的树形结构菜单内容
 */
function ajaxProxys() {
	$.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];

				// 根节点
				var rootNode = {};
				// 从根节点开始
				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);
			}
		}
	});
};

// 设置ztree属性
var setting = {
	view : {
		dblClickExpand : false
	},
	data : {
		simpleData : {
			enable : true
		}
	},
	callback : {
		onClick : nodeClick
	},
	view : {
		selectedMulti : false,
		// showLine : false,
		showIcon : false
	}
};

/**
 * 点击菜单，对当前输入框的前span进行name的赋值，对当前输入框进行代理序列号的赋值
 * 
 * @param e
 * @param treeId
 * @param treeNode
 */
function nodeClick(e, treeId, treeNode) {
	// 传递唯一标识
	var serial = treeId.substring(treeId.indexOf("_") + 1);
	// 通过treeId找到对应的文本框和显示名称
	$("#comboText_" + serial).html(treeNode.name);

	$("#" + serial).attr({
		value : treeNode.id,
		title : treeNode.name
	});

	// 隐藏当前树形菜单
	hideMenu($('#menuContent_' + serial));
};

 以上，主要有几点进行控制，首先为每个input标签定制显示的span，点击的向下箭头，重新加载的span，还有ztree组件，当页面中有需要加载树形下拉框的时候，会进入到combotree : function()，该方法需要获取树形菜单数据，然后指定显示的文本，当打开树形菜单的时候，通过id之间的协定进行获取对应的jquery对象，该处需要进行优化，然后设置树形菜单的当前选中项，并且指定显示位置。

 

通过以上办法，虽然解决了当前所需，但是总觉得不是很好。