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教程