前言：在之前的博客中写了一个不在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' ο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});
});
第五步：就可以在页面上进行使用了
<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);
进行检索功能了
