jQuery和zTree实现的下拉树

在jsp（页面）中：

<input id="selectDevType" class="device_select" onfocus="showDevTypeTree()" onclick="showDevTypeTree()" readonly="readonly">
<input type="hidden" class="selectDevTypeid">
<div id="devTreeContent" class="menuContent" style="display: none; position: absolute; border: 1px #CCC solid; background-color: #F0F6E4;">
    <ul id="deviceTypeTree" class="ztree" style="margin-top:0;"></ul>
</div>  

记得引入jQuery和zTree的相关文件：

<link rel="stylesheet" type="text/css" href="<%= path %>/zTree/css/zTreeStyle/zTreeStyle.css"> 
<script type="text/javascript" src="<%= path %>/jQuery/jquery-1.6.js"></script>
<script type="text/javascript" src="<%= path %>/zTree/jquery.ztree.all-3.5.js"></script> 

在js中（以设备类型为例）：

/*
 * 设备类型下拉树的设置
 */
var deviceTypeSetting = {
    view: {
        dblClickExpand: false
    },
    data: {
        simpleData: {
            enable: true
        }
    },
    callback: {
        onClick: deviceTypeOnClick
    }
};
/*
 * 设备类型下拉树的点击事件
 */
function deviceTypeOnClick(e, treeId, treeNode) {
    var zTree = $.fn.zTree.getZTreeObj("deviceTypeTree");
    nodes = zTree.getSelectedNodes();
    $(".selectDevTypeid").val(nodes[0].id);
    $("#selectDevType").val(nodes[0].name);
}
/*
 * 初始化设备类型
 * 
 */
function initDeviceType(){
    $.ajax({
        url:urlDomain+'/Dvice-queryDeviceTypeTree',
        type:'POST',
        data:{
            idevicetypeid:-1,
            scompanycode:companyCode
        },
        async:false,
        success:function(msg){
            var obj = eval("("+msg+")");
            var deviceTypeNodes = [];
            getDevTypeObj(obj,deviceTypeNodes);
            $.fn.zTree.init($("#deviceTypeTree"), deviceTypeSetting, deviceTypeNodes);
        }
    });
}
/*
 * 展示设备类型SelectTree
 */
function showDevTypeTree(){
    $.ajax({
        url:urlDomain+'/Dvice-queryDeviceTypeTree',
        type:'POST',
        data:{
            idevicetypeid:-1,
            scompanycode:companyCode
        },
        async:false,
        success:function(msg){
            var obj = eval("("+msg+")");
            var deviceTypeNodes = [];
            getDevTypeObj(obj,deviceTypeNodes);
            $.fn.zTree.init($("#deviceTypeTree"), deviceTypeSetting, deviceTypeNodes);
            var deptObj = $("#selectDevType");
            var deptOffset = $("#selectDevType").offset();
            $("#devTreeContent").css({left:deptOffset.left + "px", top:deptOffset.top + deptObj.outerHeight() + "px"}).slideDown("fast");
            $('#deviceTypeTree').css({width:deptObj.outerWidth() - 12 + "px"});
            var zTree = $.fn.zTree.getZTreeObj("deviceTypeTree");
            var node = zTree.getNodeByParam("id", $('.selectDevTypeid').val(), null)
            zTree.selectNode(node);
            $("body").bind("mousedown", onBodyDownByDevType);
        }
    });
}
/**
 * 设备类型
 * 
 * @param {} dataObj
 * @param {} treeNodes
 */
function getDevTypeObj(dataObj,treeNodes){
    for (var i = 0; i < dataObj.length; i++) {
        treeNodes.push({id:dataObj[i].index,pId:dataObj[i].parentId,name:dataObj[i].text});
        loadChildDevTypeObj(dataObj[i],treeNodes);
    }
}
/**
 * 查找子节点
 * 
 * @param {} dataObj
 * @param {} treeNodes
 */
function loadChildDevTypeObj(dataObj,treeNodes){
    var childObj = dataObj.children;
    for(var j = 0; j < childObj.length; j++){
        treeNodes.push({id:childObj[j].index,pId:childObj[j].parentId,name:childObj[j].text});
        loadChildDevTypeObj(childObj[j],treeNodes);
    }
}
/*
 * Body鼠标按下事件回调函数
 */
function onBodyDownByDevType(event) {
    if(event.target.id.indexOf('switch') == -1){
        hideDeviceTypeMenu();
    }
}
/*
 * 隐藏设备类型Tree
 */
function hideDeviceTypeMenu() {
    $("#devTreeContent").fadeOut("fast");
    $("body").unbind("mousedown", onBodyDownByDevType);
}

 

经本人测试，兼容性好，IE6+、firefox和Google等主流浏览器兼容性测试均通过！至于jquery和zTree的下载，网上一搜就O了！