zoukankan      html  css  js  c++  java
  • 下拉树的公共插件(手写插件的方法)

    bootstrap 里面没有自带的下拉树插件,所以用了bootstrap加上ztree下拉树的形式

    但是这个过程代码量多,复杂,因为我的页面有多个下拉树,这样实现起来很不方便,所以在此写了一个jquery的扩展插件

    /**
     * 公共的部门的下拉
     */
    ;(function($){
        var me;//input输入框
        var selectId="";
        var treeId="";
        $.fn.buildButtomTree=function(data,_id){
            selectId=!!_id?_id:"";
            treeId="treeDemo"+(Math.random()*100).toFixed(0);
            if(_id){
                this.val(depObj[_id]);
                this.attr("departmentval",depObj[_id]);
            }
            // var data=[
            //     {id: "101001", name: "计划财务部", pId: "001", code: "101001"},
            //     {id: "105001", name: "港吉", pId: "001", code: "105001"},
            //     {id: "001", name: "整个公司", pId: "000", code: "001"}
            // ]
            //构建html
            var str=
                '<div class="menuContent" style="display:none;overflow:auto;    border: 1px solid #ddd; position: absolute;z-index: 999;background-color: #fff;">'+
                    '<ul id="'+treeId+'" class="ztree" style="margin-top:0;177px"></ul>'+
                '</div>';
            this.parent().append(str);
            this.click(function(){
                me=$(this);
                showMenu();
            })
            initTreeData(data,this);
        }
        var initTreeData=function(zNodes,el){
            me=el;
            var setting = {
                view: {
                    selectedMulti: false //是否允许多选
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                },
                callback: {
                    //zTree节点的点击事件
                    onClick: function(e, treeId, treeNode){
                        var zTree = $.fn.zTree.getZTreeObj(treeId),
                        nodes = zTree.getSelectedNodes();
                        var v = "",c="";
                        nodes.sort(function compare(a,b){return a.id-b.id;});
                        for (var i=0, l=nodes.length; i<l; i++) {
                            v += nodes[i].name + ",";
                            //v += nodes[i].name;
                            //c += nodes[i].code + ",";
                            c += nodes[i].code;
                        }
                        if (v.length > 0 ) v = v.substring(0, v.length-1);
                        var cityObj =me;
                        cityObj.val(v);
                        cityObj.attr("departmentval", c);
                        hideMenu();
                    }
                }
            };
            //var $tree=el.next().find(".ztree");
            $.fn.zTree.init($("#"+treeId), setting, zNodes);
            var zTree = $.fn.zTree.getZTreeObj(treeId);
            if(!!selectId){
                var node=zTree.getNodeByParam("id",selectId);
                console.log(node);
                //设置选中
                zTree.selectNode(node);
            }
            
            zTree.expandAll(true);
            
        }
        var hideMenu=function(){
            me.next().fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown);
        }
        var onBodyDown=function(){
            if (!(event.target.id == "menuBtn" || event.target.className == "menuContent" || $(event.target).parents(".menuContent").length>0)) {
                hideMenu();
            }
        }
        var showMenu=function(){
            me.next().slideDown("fast");
            $("body").bind("mousedown", onBodyDown);
        }
    })(jQuery);

    原理其实和ztree下拉树同样的原理,只不过是现在通用的

  • 相关阅读:
    virturalbox安装CentOS桥接网卡
    解决:Error:java: 无效的源发行版: 12
    maven下载失败,镜像配置,idea的maven下载配置
    linux压缩和解压缩命令
    Unable to allocate 130176KB bitmaps for parallel garbage collection for the requested 4165632KB heap.
    Docker,Linux,Kubernetes,postgres常用的命令行(持续更新)
    dropwizard问题记录1:如何进行mvn package打包,如何在项目目录下运行
    线程的并发工具类
    学信网改绑手机号码,但是忘记了老号码怎么办?利用node.js + puppeteer 跑脚本实现改绑手机号
    javascript事件循环与js执行机制
  • 原文地址:https://www.cnblogs.com/pengfei25/p/9275734.html
Copyright © 2011-2022 走看看