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 相关文章推荐
一些常用的JS功能函数代码
Jun 23 Javascript
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
js实现幻灯片效果(基于jquery插件)
Nov 05 Javascript
jQuery easyui的validatebox校验规则扩展及easyui校验框validatebox用法
Jan 18 Javascript
网页前端登录js按Enter回车键实现登陆的两种方法
May 10 Javascript
纯js实现图片匀速淡入淡出效果
Aug 22 Javascript
Vue2.0基于vue-cli+webpack父子组件通信(实例讲解)
Sep 14 Javascript
JS实现table表格固定表头且表头随横向滚动而滚动
Oct 26 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
Oct 27 Javascript
JavaScript实现三级级联特效
Nov 05 Javascript
如何使用Jquery动态生成二级选项列表
Feb 06 jQuery
JQuery获得内容和属性方法解析
May 30 jQuery
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+mysql留言本源码
2009/11/11 PHP
推荐25款php中非常有用的类库
2014/09/29 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
thinkPHP使用pclzip打包备份mysql数据库的方法
2016/04/30 PHP
PHP微信开发之模板消息回复
2016/06/24 PHP
总结的一些PHP开发中的tips(必看篇)
2017/03/24 PHP
PHP实现redis限制单ip、单用户的访问次数功能示例
2018/06/16 PHP
laravel5.6 框架操作数据 Eloquent ORM用法示例
2020/01/26 PHP
用于自动添加Digg This!按钮的JavaScript
2006/12/23 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
javascript中几个容易混淆的概念总结
2015/04/14 Javascript
javascript实现实时输出当前的时间
2015/04/27 Javascript
js获取页面description的方法
2015/05/21 Javascript
JavaScript 网页中实现一个计算当年还剩多少时间的倒数计时程序
2017/01/25 Javascript
基于rollup的组件库打包体积优化小结
2018/06/18 Javascript
[40:27]完美世界DOTA2联赛PWL S3 PXG vs GXR 第一场 12.19
2020/12/24 DOTA
在Python中操作文件之truncate()方法的使用教程
2015/05/25 Python
Python新手入门最容易犯的错误总结
2017/04/24 Python
python实现在图片上画特定大小角度矩形框
2018/10/24 Python
Python Django 页面上展示固定的页码数实现代码
2019/08/21 Python
PyTorch中的Variable变量详解
2020/01/07 Python
python3.6环境下安装freetype库和基本使用方法(推荐)
2020/05/10 Python
django创建css文件夹的具体方法
2020/07/31 Python
localStorage 设置过期时间的方法实现
2018/12/21 HTML / CSS
HTML5全屏(Fullscreen)API详细介绍
2015/04/24 HTML / CSS
介绍一下gcc特性
2015/10/31 面试题
公司会计岗位职责
2014/02/13 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
《大作家的小老师》教学反思
2014/04/16 职场文书
班级联欢会主持词
2015/07/03 职场文书
大队委员竞选演讲稿
2015/11/20 职场文书
家访教师心得体会
2016/01/23 职场文书
用CSS3画一个爱心
2021/04/27 HTML / CSS
详解SpringBoot异常处理流程及原理
2021/06/21 Java/Android
SpringBoot整合JWT的入门指南
2021/06/29 Java/Android
Pyqt5将多个类组合在一个界面显示的完整示例
2021/09/04 Python