zTree插件之多选下拉菜单实例代码


Posted in Javascript onNovember 06, 2013

zTree插件之多选下拉菜单实例代码
css和js

<!--ztree树结构-->
<link rel="stylesheet" type="text/css" href="assets/ztree/css/zTreeStyle.css">
<link rel="stylesheet" type="text/css" href="assets/ztree/css/zTreeIcons.css">
<script src="assets/js/jquery.js"></script>
<!--ztree树-->
<script src="assets/ztree/js/jquery.ztree-2.6.js"></script>

html
<div class="input-append">
    <input class="input-medium" id="citySel" readonly type="text" value="">
    <a id="menuBtn" class="btn" type="button"><i class="icon-search"></i></a>
</div>
<div id="DropdownMenuBackground" style="display:none; position:absolute;z-index:999;height:250px; min-width:163px; background-color:white;border:1px solid;">
    <div style="height:220px; min-width:163px; background-color:white;border:1px solid;border-bottom:0px;overflow-y:auto;overflow-x:auto;">
        <ul id="dropdownMenu" class="tree"></ul>    
    </div>
    <div style="height:26px;border:1px #D4D4D4 solid;box-shadow:0 -1px 10px rgba(0,0,0,0.1);background-color:#FAFAFA;background-image:-webkit-linear-gradient(top,#FFF,#F2F2F2);background-repeat: repeat-x;">
        <div align="center"><a href="javascript:void(0)" onclick="enter();hideMenu();" id="enter" class="btn btn-mini btn-inverse" style="margin-top:3px;">确定</a></div>
    </div>
</div>

自定义的js代码
<script type="text/javascript">
    var zTree1;
    var setting = {
        checkable:true,
        checkType : { "Y": "s", "N": "s" },
        isSimpleData: true,
        treeNodeKey: "id",
        treeNodeParentKey: "pId",
        fontCss: setFont,
        callback: {
            beforeClick: zTreeOnBeforeClick,
        }            
    };
    var zNodes = [
        {id:1, pId:0, name:"北京"},
        {id:2, pId:0, name:"天津"},
        {id:3, pId:0, name:"上海"},
        {id:6, pId:0, name:"重庆"},
        {id:4, pId:0, name:"河北省", open:false},
        {id:41, pId:4, name:"石家庄"},
        {id:42, pId:4, name:"保定"},
        {id:43, pId:4, name:"邯郸"},
        {id:44, pId:4, name:"承德"},
        {id:5, pId:0, name:"广东省", open:false},
        {id:51, pId:5, name:"广州"},
        {id:52, pId:5, name:"深圳"},
        {id:53, pId:5, name:"东莞"},
        {id:54, pId:5, name:"佛山"},
        {id:6, pId:0, name:"福建省", open:false},
        {id:61, pId:6, name:"福州"},
        {id:62, pId:6, name:"厦门"},
        {id:63, pId:6, name:"泉州"},
        {id:64, pId:6, name:"三明"}
    ];
    
    function setFont(treeId, treeNode) {
        if (treeNode && treeNode.isParent) {
            return {color: "blue"};
        } else {
            return null;
        }
    }
    function showMenu(){
        var cityObj = $("#citySel");
        var cityOffset = $("#citySel").offset();
        $("#DropdownMenuBackground").css({left:cityOffset.left+"px",top:cityOffset.top+cityObj.outerHeight()+"px"}).slideDown("fast");    
    }    
    function reloadTree(){
        hideMenu();
        zTree1 = $("#dropdownMenu").zTree(setting, zNodes);
    }
    function hideMenu() {
        $("#DropdownMenuBackground").slideUp("fast");
    }
    function zTreeOnBeforeClick(treeId, treeNode) {
        return false;
    }
    function enter(){
        var str = "";
        var nodes = zTree1.getCheckedNodes();
        var i = 0;
        do{
            str = str+nodes[i].name+",";
            if(nodes[i].isParent&&nodes[i].checked){
                i = i+nodes[i].nodes.length;
            }
            else{
                i++;
            }
        }while(i<nodes.length)
        str = str.slice(0,-1);
        $("#citySel").val(str);
    }
    $(document).ready(function(e) {
        reloadTree();
        $("#menuBtn").bind("click",
            function(){
                if($("#DropdownMenuBackground").css("display") == "none"){
                    showMenu();
                }
                else{
                    hideMenu();
                }
            }
        );
        $("body").bind("mousedown", 
            function(event){
                if (!(event.target.id == "DropdownMenuBackground" || $(event.target).parents("#DropdownMenuBackground").length>0)) {
                    hideMenu();
                }
            });
    });
</script>
Javascript 相关文章推荐
javascript 特殊字符串
Feb 25 Javascript
js动态创建表格,删除行列的小例子
Jul 20 Javascript
jQuery实现的多选框多级联动插件
May 02 Javascript
jQuery中animate()方法用法实例
Dec 24 Javascript
asp.net+js实现金额格式化
Feb 27 Javascript
通过JS判断联网类型和连接状态的实现代码
Apr 01 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
jQuery获取剪贴板内容的方法
Jun 16 Javascript
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
vue-cli项目中使用公用的提示弹层tips或加载loading组件实例详解
May 28 Javascript
bootstrap 弹出框modal添加垂直方向滚轴效果
Jul 09 Javascript
JavaScript实现筛选数组
Mar 02 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 #Javascript
Js参数值中含有单引号或双引号问题的解决方法
Nov 06 #Javascript
浅析Js中的单引号与双引号问题
Nov 06 #Javascript
表单元素与非表单元素刷新区别详细解析
Nov 06 #Javascript
js onclick事件传参讲解
Nov 06 #Javascript
jquery validation验证身份证号,护照,电话号码,email(实例代码)
Nov 06 #Javascript
css样式标签和js语法属性区别
Nov 06 #Javascript
You might like
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
php mssql 数据库分页SQL语句
2008/12/16 PHP
解析php中获取系统信息的方法
2013/06/25 PHP
PHP开发微信支付的代码分享
2014/05/25 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
php变量与数组相互转换的方法(extract与compact)
2016/12/02 PHP
PHP解析url并得到url参数方法总结
2018/10/11 PHP
javascript基础第一章 JavaScript与用户端
2010/07/22 Javascript
js转义字符介绍
2013/11/05 Javascript
js判读浏览器是否支持html5的canvas的代码
2013/11/18 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
2014/09/25 Javascript
JQuery中使文本框获得焦点的方法实例分析
2015/02/28 Javascript
微信小程序使用modal组件弹出对话框功能示例
2017/11/29 Javascript
javascript与PHP动态往类中添加方法对比
2018/03/21 Javascript
vue组件实现弹出框点击显示隐藏效果
2020/10/26 Javascript
使用pkg打包ThinkJS项目的方法步骤
2019/12/30 Javascript
浅谈Vue3.0新版API之composition-api入坑指南
2020/04/30 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
2020/08/19 Javascript
vue $mount 和 el的区别说明
2020/09/11 Javascript
Python numpy实现数组合并实例(vstack,hstack)
2018/01/09 Python
设置python3为默认python的方法
2018/10/31 Python
使用Python中的reduce()函数求积的实例
2019/06/28 Python
Python configparser模块配置文件过程解析
2020/03/03 Python
解决Django中checkbox复选框的传值问题
2020/03/31 Python
python使用QQ邮箱实现自动发送邮件
2020/06/22 Python
利用python进行文件操作
2020/12/04 Python
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
世界上最大的网络主机公司:1&1
2016/10/12 全球购物
Gloeilampgoedkoop荷兰:在线购买灯泡
2019/02/16 全球购物
假日旅行社实习自我鉴定
2013/09/24 职场文书
建筑项目策划书
2014/01/13 职场文书
村干部培训班主持词
2014/03/28 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
2014年终个人总结报告
2015/03/09 职场文书
基于Nginx实现限制某IP短时间访问次数
2021/03/31 Servers
Java 数组的使用
2022/05/11 Java/Android