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 相关文章推荐
XRegExp 0.2: Now With Named Capture
Nov 30 Javascript
html页面显示年月日时分秒和星期几的两种方式
Aug 20 Javascript
jquery.validate的使用说明介绍
Nov 12 Javascript
jquery对象和javascript对象即DOM对象相互转换
Aug 07 Javascript
webpack中引用jquery的简单实现
Jun 08 Javascript
jQuery基于BootStrap样式实现无限极地区联动
Aug 26 Javascript
JS表格组件神器bootstrap table使用指南详解
Apr 12 Javascript
jQuery选择器之子元素过滤选择器
Sep 28 jQuery
vue实现倒计时获取验证码效果
Apr 17 Javascript
使用element-ui +Vue 解决 table 里包含表单验证的问题
Jul 17 Javascript
JS跨浏览器解析XML应用过程详解
Oct 16 Javascript
微信小程序实现首页弹出广告
Dec 03 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实现详细解析
2013/08/24 PHP
destoon利用Rewrite规则设置网站安全
2014/06/21 PHP
PHP+MYSQL实现用户的增删改查
2015/03/24 PHP
基于Laravel 5.2 regex验证的正确写法
2019/09/29 PHP
jQuery 入门讲解1
2009/04/15 Javascript
自己动手实现jQuery Callbacks完整功能代码详解
2013/11/25 Javascript
详解addEventListener的三个参数之useCapture
2015/03/16 Javascript
PhantomJS快速入门教程(服务器端的 JavaScript API 的 WebKit)
2015/08/06 Javascript
Bootstrap实现input控件失去焦点时验证
2016/08/04 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
用Angular实时获取本地Localstorage数据,实现一个模拟后台数据登入的效果
2016/11/09 Javascript
Vue开发中整合axios的文件整理
2017/04/29 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
Vue中的v-for指令不起效果的解决方法
2018/09/27 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
Vue实现多页签组件
2021/01/14 Vue.js
js面向对象方式实现拖拽效果
2021/03/03 Javascript
[01:03:27]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python正则表达式抓取成语网站
2013/11/20 Python
Python连接DB2数据库
2016/08/27 Python
python 实现对数据集的归一化的方法(0-1之间)
2018/07/17 Python
在Python dataframe中出生日期转化为年龄的实现方法
2018/10/20 Python
学生信息管理系统Python面向对象版
2019/01/30 Python
增大python字体的方法步骤
2020/07/05 Python
Python做图像处理及视频音频文件分离和合成功能
2020/11/24 Python
Python修改DBF文件指定列
2020/12/19 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
课改先进个人汇报材料
2014/01/26 职场文书
中英文求职信范文
2014/01/27 职场文书
教师师德承诺书
2014/03/26 职场文书
大学军训决心书
2015/02/05 职场文书
pytorch分类模型绘制混淆矩阵以及可视化详解
2022/04/07 Python