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

时间  2019-11-16
标签 ztree 下拉菜单 多级 菜单 实现 繁體版
原文   原文链接

惯例，先上图：javascript

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

在实际的开发过程当中，原本zTree也是能够知足需求的，可是zTree多选的话须要checkbox选择框，这样致使样式风格和项目整体不一致。下面是根据ztree所修改的内容。html

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

咱们只须要简单的右键，查看代码，就能够把源码拿下来看看。jquery

咱们须要的源码以下：ajax

<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代码以下：async

                                                <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传递到方法内部。ide

如此，咱们就能够经过点击文本框显示下拉列表     当文本框失去焦点以后隐藏下拉列表。url

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

咱们在使用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群：

无论你遇到了什么问题，咱们毫不会让你独自去面对！

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程