zTree下拉菜单多级菜单多选实现

惯例,先上图:

这是在一个项目中,为了满足样式美观、多级菜单以及多选而将zTree插件更改过后的效果。

在实际的开发过程中,本来zTree也是可以满足需求的,但是zTree多选的话需要checkbox选择框,这样导致样式风格和项目总体不一致。下面是根据ztree所修改的内容。

如上图 这是个outlook样式的菜单。

我们只需要简单的右键,查看代码,就可以把源码拿下来看看。

我们需要的源码如下:

<SCRIPT type="text/javascript">
        <!--
        var curMenu = null, zTree_Menu = null;
        var setting = {
            view: {
                showLine: false,
                showIcon: false,
                selectedMulti: false,
                dblClickExpand: false,
                addDiyDom: addDiyDom
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                beforeClick: beforeClick
            }
        };
       //这里就是下拉列表的格式,通过id和pid控制所属的节点和级别
        var zNodes =[
            { id:1, pId:0, name:"文件夹", open:true},
            { id:11, pId:1, name:"收件箱"},
            { id:111, pId:11, name:"收件箱1"},
            { id:112, pId:111, name:"收件箱2"},
            { id:113, pId:112, name:"收件箱3"},
            { id:114, pId:113, name:"收件箱4"},
            { id:12, pId:1, name:"垃圾邮件"},
            { id:13, pId:1, name:"草稿"},
            { id:14, pId:1, name:"已发送邮件"},
            { id:15, pId:1, name:"已删除邮件"},
            { id:3, pId:0, name:"快速视图"},
            { id:31, pId:3, name:"文档"},
            { id:32, pId:3, name:"照片"}
        ];

        function addDiyDom(treeId, treeNode) {
            var spaceWidth = 5;
            var switchObj = $("#" + treeNode.tId + "_switch"),
            icoObj = $("#" + treeNode.tId + "_ico");
            switchObj.remove();
            icoObj.before(switchObj);

            if (treeNode.level > 1) {
                var spaceStr = "<span style=‘display: inline-block;width:" + (spaceWidth * treeNode.level)+ "px‘></span>";
                switchObj.before(spaceStr);
            }
        }

        function beforeClick(treeId, treeNode) {
            if (treeNode.level == 0 ) {
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                zTree.expandNode(treeNode);
                return false;
            }
            return true;
        }

        $(document).ready(function(){
            var treeObj = $("#treeDemo");
            $.fn.zTree.init(treeObj, setting, zNodes);
            zTree_Menu = $.fn.zTree.getZTreeObj("treeDemo");
            curMenu = zTree_Menu.getNodes()[0].children[0].children[0];
            zTree_Menu.selectNode(curMenu);

            treeObj.hover(function () {
                if (!treeObj.hasClass("showIcon")) {
                    treeObj.addClass("showIcon");
                }
            }, function() {
                treeObj.removeClass("showIcon");
            });
        });
        //-->
    </SCRIPT>

如上  这是我们需要的源码    但是有些并不需要,经过修改后如下:

var zNodes = [];   //数据的格式已经在上一段代码中表示了   这里我就去掉了
            //人员列表
              $.ajax({
                    url:"searchPeopleJson",
                    async:false,
                    success: function(resultData){
                        var result= eval("("+resultData+")");
                        zNodes=result;   //这是获取下拉列表的数据   因为我的是在数据库中获取的
                    }
              });

    function listShow(divid,btnId,btnIndex) {
        var ulId="";
        value="";
        pIndex="";
        selectCount=false;
        $("#"+btnId).attr("value", "");
        $("#"+btnIndex).attr("value", "");
        if(divid=="div1personTree1"){
            ulId="personTree1";
        }else if(divid=="div2personTree2"){
            ulId="personTree2";
        }
        var curMenu = null, zTree_Menu = null;
        var setting = {
            view: {
                showLine: false,
                showIcon: false,
                selectedMulti: true,
                dblClickExpand: true,
                addDiyDom: addDiyDom
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                beforeClick: beforeClick
            }
        };
        function addDiyDom(treeId, treeNode) {
            var spaceWidth = 5;
            var switchObj = $("#" + treeNode.tId + "_switch"),
            icoObj = $("#" + treeNode.tId + "_ico");
            switchObj.remove();
            icoObj.before(switchObj);

            if (treeNode.level > 1) {
                var spaceStr = "<span style=‘display: inline-block;width:" + (spaceWidth * treeNode.level) + "px‘></span>";
                switchObj.before(spaceStr);
            }
        }

        function beforeClick(treeId, treeNode) {
            if (treeNode.isParent) {
                var zTree = $.fn.zTree.getZTreeObj(ulId);
                zTree.expandNode(treeNode);
                return false;
            }
            return true;
        }

        $(document).ready(function () {
            var treeObj = $("#"+ulId);
            $.fn.zTree.init(treeObj, setting, zNodes);
            zTree_Menu = $.fn.zTree.getZTreeObj(ulId);
            //curMenu = zTree_Menu.getNodes()[0].children[0].children[0];
           // zTree_Menu.selectNode(curMenu);

            treeObj.addClass("showIcon");

        });
        /* if($("#"+btnId).attr("readonly")=="readonly"){
            return false;
        } */
        //$("#"+divid).css("display", "block");
        showMenu(divid,btnId);
        return false;
    }
    function showMenu(divid,btnId) {
        var cityObj = $("#"+btnId);
        var cityOffset = $("#"+btnId).offset();
        $("#"+divid).css("display", "block").slideDown("fast");
        $("body").bind("mousedown",{btnId:btnId,divid:divid}, onBodyDown);
    }
    function hideMenu(divid,btnId) {
        $("#"+divid).fadeOut("fast");
        $("body").unbind("mousedown", onBodyDown);
    }
    function onBodyDown(event) {
        if (!(event.target.id == event.data.btnId || event.target.id == event.data.divid || $(event.target).parents("#"+event.data.divid).length>0)) {
            hideMenu(event.data.divid,event.data.btnId);
        }
    }

这是我根据项目实际情况而更改的    我们将原来的鼠标浮动到上面之后显示图标给改成一直显示   然后将除第一级以外的菜单需要点击图标才能展开和关闭改成点击标题就可以展开和关闭了     方便用户的操作。   下面的三个方法是用来显示和隐藏下拉列表的,当文本框失去焦点的时候触发。
我们的html代码如下:

                                                <label for="txtChargePersonS" class="col-sm-2 control-label">第二负责人</label>
                                                <div id="cyPersonDiv" class="col-sm-4">
                                                    <input type="hidden" id="txtHiddenSPerson" name="tpj.cyLeader" />
                                                    <input id="txtChargePersonS" readonly personIndex="0" onfocus="listShow(‘div2personTree2‘,‘txtChargePersonS‘,‘txtHiddenSPerson‘);" type="text" class="form-control zTreeDemoBackground" placeholder="第二负责人">
                                                    <div id="div2personTree2" style="display:none;z-index:1000; position:absolute; " name="province" type="selectbox" class="zTreeDemoBackground">
                                                      <ul id="personTree2" style=" height:175px;" class="ztree"></ul>
                                                    </div>
                                                </div>

因为我的项目里面多处用到这个下拉菜单,因此我通过参数传递的方式将id传递到方法内部。

如此,我们就可以通过点击文本框显示下拉列表     当文本框失去焦点之后隐藏下拉列表。

那么数据有了  显示没问题了    怎么才能让下拉列表在点击的时候将点击的值放到文本框中呢?

我们在使用zTree的时候需要下载ztree的几个js文件,我们可以在jquery.ztree.core-3.5.js中去实现。

在jquery.ztree.core-3.5.js中有个_setting的初始化代码,显示属性的初始化还有事件的初始化等等,如下图:

这是下拉列表的点击事件,我们写上自己的事件。

请看下面的代码:

var value="";    //文本框中显示的值    例:张三,李四,王五
var pIndex="";    //选择值得id    例:1,2,3
var selectCount=false;   //表示是否为第一次选择     用于清除拼接的逗号
function OnListClick(event, treeId, treeNode, clickFlag) {
    if (treeNode.isParent) {
        return;
    }
    value+=","+treeNode.name;
    pIndex+=","+treeNode.id;
    if(selectCount==false){     //这里清除第一个逗号
        value=value.substr(1,value.length);
        pIndex=pIndex.substr(1,pIndex.length);
        selectCount=true;
    }
    var valueObj="";
    var pIndexObj="";
    if(treeId=="personTree1"){
        $("#div1personTree1").css("display","none");
        $("#txtChargePerson").attr("value", treeNode.name);
        $("#txtHiddenPerson").attr("value", treeNode.id);
    }else if(treeId=="personTree2"){

        valueObj=$("#txtChargePersonS");
        pIndexObj=$("#txtHiddenSPerson");
        valueObj.attr("value", value);    //选择多项的时候拼接的值
        pIndexObj.attr("value",pIndex);//选择多项的时候拼接的id
    }else if(treeId=="personTree3"){
        $("#div3personTree3").css("display","none");
        $("#txtChargePersonItem").attr("value", treeNode.name);
        $("#txtHiddenCPerson").attr("value", treeNode.id);
    }else if(treeId=="personTree4"){
        valueObj=$("#txtExaminePerson");
        pIndexObj=$("#txtHiddenEPerson");
        valueObj.attr("value", value);
        pIndexObj.attr("value",pIndex);
    }else if(treeId=="personTree5"){

        valueObj=$("#txtDesignPerson");
        pIndexObj=$("#txtHiddenDPerson");
        valueObj.attr("value", value);
        pIndexObj.attr("value",pIndex);
    }

}

如上代码     因为我的是多个地方使用    所有if  else  弄了多个      需要的话 参照其中一个就可以了

修改就是这么简单,如果有更好的方案欢迎分享和讨论。

技术交流群:94234450

点击加入QQ群:

不管你遇到了什么问题,我们绝不会让你独自去面对!

时间: 2024-10-30 23:10:51

zTree下拉菜单多级菜单多选实现的相关文章

css+html+js实现下拉及多级弹出菜单

本文将使用css+html+js实现横向菜单,具有下拉的多级弹出菜单. 首先我们来看看效果图: 首先应该写html部分的代码,代码比较简单,代码如下: <body> <div id="menu"> <ul> <li><a href="#" id="current">首页</a></li> <li><a href="#">

Web标准:八、下拉及多级弹出菜单

Web标准:八.下拉及多级弹出菜单 知识点: 1.带下拉子菜单的导航菜单 2.绝对定位和浮动的区别和运用 3.CSS自适应宽度滑动门菜单 1)带下拉子菜单的导航菜单 带下拉子菜单的就是在一级导航下加一个二级菜单.这个在上一节第七节课上我已经做出来了,这里就不再写了.再重温一下注意点:如果要在一级菜单下增加二级菜单,二级菜单需要加一个float:none;来去掉浮动,否则二级菜单也会浮动到一行上去了. 2)绝对定位和浮动的区别和运用 绝对定位:它的位置将依据浏览器左上角开始计算或相对于父容器(在父

Android实现下拉导航选择菜单效果【转载地址:http://www.cnblogs.com/hanyonglu/archive/2012/07/31/2617488.html】

本文介绍在Android中如何实现下拉导航选择菜单效果.   关于下拉导航选择菜单效果在新闻客户端中用的比较多,当然也可以用在其他的项目中,这样可以很方便的选择更多的菜单.我们可以让我们的应用顶部有左右滑动或进行切换的导航菜单,也可以为了增强用户体验在应用中添加这样的下拉导航选择菜单效果. 关于它的实现原理,其实也是挺简单的,就是使用PopupWindow来进行展现,在显示时控制其高度并配置以相应的动画效果.在PopupWindow中我使用GridView来控制里面的菜单项,每个菜单项对应相应的

Android实现下拉导航选择菜单效果(转)

本文转载自互联网 关于下拉导航选择菜单效果在新闻客户端中用的比较多,当然也可以用在其他的项目中,这样可以很方便的选择更多的菜单.我们可以让我们的应用顶部有左右滑动或进行切换的导航菜单,也可以为了增强用户体验在应用中添加这样的下拉导航选择菜单效果. 关于它的实现原理,其实也是挺简单的,就是使用PopupWindow来进行展现,在显示时控制其高度并配置以相应的动画效果.在PopupWindow中我使用GridView来控制里面的菜单项,每个菜单项对应相应的图片和文字.当然了,也有其他的实现方式.为了

仿美团下拉的二级菜单

@interface JSIndexPath : NSObject @property (nonatomic, assign) NSInteger column; @property (nonatomic, assign) NSInteger leftOrRight; @property (nonatomic, assign) NSInteger leftRow; @property (nonatomic, assign) NSInteger row; - (instancetype)initW

android完成注册页面的下拉框及单复选框(1)

package com.example.dell.mylogin; import android.content.Intent;import android.support.v7.app.AppCompatActivity;import android.os.Bundle;import android.view.View;import android.widget.AdapterView;import android.widget.Button;import android.widget.Che

【Ztree】前台展示多级菜单,后台配置方法

第一步.前台HTML页面. 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="feeClassification.aspx.cs" Inherits="Webs.pages.Parameter.feeClassification" %> 2 3 <!DOCTYPE html> 4 <html lang="en-us&q

javascript笔记09:javascript的下拉式导航菜单

<!DOCTYPE html> <html> <body> <script> function hideAll() { for(i=0;i<odiv.length;i++) { odiv[i].style.display="none"; } } function showObj(num) { if (odiv[num].style.display=="none") { hideAll(); odiv[num].s

dxbarmanager生成传统下拉式样的菜单

传统菜单 //创建一个dxSubItem,相当于创建一个主菜单项 dxBarSubItem := TdxBarSubItem.Create(Self); dxBarSubItem.Caption := sCategory; dxBarSubItem.Category := 0; dxBarSubItem.Visible := ivAlways;//ivNever;// dxBarSubItem.Name := sName; //放置在dxBar上 dxBarItemLink := dxBarSu