jQuery和zTree实现的下拉树

来源：互联网发布：80后和90后的区别知乎编辑：程序博客网时间：2024/04/30 23:53

在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了！

0 0