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 相关文章推荐
Aptana调试javascript图解教程
Nov 30 Javascript
js控制CSS样式属性语法对照表
Dec 11 Javascript
Javascript玩转继承(三)
May 08 Javascript
laytpl 精致巧妙的JavaScript模板引擎
Aug 29 Javascript
使用 TypeScript 重新编写的 JavaScript 坦克大战游戏代码
Apr 07 Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 Javascript
jQuery获取table行数并输出单元格内容的实现方法
Jun 30 Javascript
Avalonjs 实现简单购物车功能(实例代码)
Feb 07 Javascript
使用pkg打包Node.js应用的方法步骤
Oct 19 Javascript
爬虫利器Puppeteer实战
Jan 09 Javascript
JavaScript JMap类定义与使用方法示例
Jan 22 Javascript
JS控制下拉列表左右选择实例代码
May 08 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
PHP入门速成教程
2007/03/19 PHP
PHP代码审核的详细介绍
2013/06/13 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
详解php命令注入攻击
2019/04/06 PHP
php面向对象基础详解【星际争霸游戏案例】
2020/01/23 PHP
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
Jquery中给animation加更多的运作效果实例
2013/09/05 Javascript
JS简单实现城市二级联动选择插件的方法
2015/08/19 Javascript
javascript将中国数字格式转换成欧式数字格式的简单实例
2016/08/02 Javascript
结合mint-ui移动端下拉加载实践方法总结
2017/11/08 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
js实现登录时记住密码的方法分析
2020/04/05 Javascript
Python算法之栈(stack)的实现
2014/08/18 Python
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
详细讲解Python中的文件I/O操作
2015/05/24 Python
Python实现自动登录百度空间的方法
2017/06/10 Python
对python numpy数组中冒号的使用方法详解
2018/04/17 Python
Python Pillow Image Invert
2019/01/22 Python
python 使用matplotlib 实现从文件中读取x,y坐标的可视化方法
2019/07/04 Python
Python3内置模块random随机方法小结
2019/07/13 Python
python Django 创建应用过程图示详解
2019/07/29 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
Pycharm自动添加文件头注释和函数注释参数的方法
2020/10/23 Python
中国汽车租赁行业头部企业:一嗨租车
2019/05/16 全球购物
清洁工表扬信
2014/01/08 职场文书
社区护士演讲稿
2014/08/27 职场文书
行政司机岗位职责
2015/04/10 职场文书
2015年节能减排工作总结
2015/05/14 职场文书
2015年银行信贷员工作总结
2015/05/19 职场文书
小学教师教学反思
2016/02/24 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
MySQL数据库压缩版本安装与配置详细教程
2021/05/21 MySQL
Java使用JMeter进行高并发测试
2021/11/23 Java/Android