js树插件zTree获取所有选中节点数据的方法


Posted in Javascript onJanuary 28, 2015

本文实例讲述了js树插件zTree获取所有选中节点数据的方法。分享给大家供大家参考。具体分析如下:

由于刚接触Tree方面的东西。在网上看到了zTree,是中国人写的。所以API肯定是中文的。而且评论也很好。所以尝试用zTree在项目中。这个获取所有选中节点数据很简单。看一下API就能看懂了。所以我就直接上代码了。

<!DOCTYPE html>

<HTML>

<HEAD>

    <TITLE> ZTREE DEMO - Standard Data </TITLE>

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <link rel="stylesheet" href="css/zTreeStyle/zTreeStyle.css" type="text/css">

    <link rel="stylesheet" href="css/demo.css" type="text/css">

    <script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>

    <script type="text/javascript" src="js/jquery.ztree.core-3.4.js"></script>

    <script type="text/javascript" src="js/jquery.ztree.excheck-3.4.js"></script>

    <!--

      <script type="text/javascript" src="js/jquery.ztree.exedit-3.4.js"></script>-->

    <SCRIPT type="text/javascript">

        <!--

        var setting = {    

            check:{

                enable:true

            },

            /*data: {

                simpleData: {

                    enable: true

                }

            }*/

            data:    {

                simpleData:{

                    enable:true

                }

            },

            callback:{

                onCheck:onCheck

            }

        };
        var zNodes =[

            { id:1, pId:0, name:"随意勾选 1", open:false},

            { id:11, pId:1, name:"随意勾选 1-1", open:true},

            { id:111, pId:11, name:"随意勾选 1-1-1"},

            { id:112, pId:11, name:"随意勾选 1-1-2"},

            { id:12, pId:1, name:"随意勾选 1-2", open:true},

            { id:121, pId:12, name:"随意勾选 1-2-1"},

            { id:122, pId:12, name:"随意勾选 1-2-2"},

            { id:2, pId:0, name:"随意勾选 2",  open:false},

            { id:21, pId:2, name:"随意勾选 2-1"},

            { id:22, pId:2, name:"随意勾选 2-2", open:true},

            { id:221, pId:22, name:"随意勾选 2-2-1"},

            { id:222, pId:22, name:"随意勾选 2-2-2"},

            { id:23, pId:2, name:"随意勾选 2-13"}

        ];
        $(document).ready(function(){

            $.fn.zTree.init($("#treeDemo"), setting, zNodes);

        });

            function onCheck(e,treeId,treeNode){

            var treeObj=$.fn.zTree.getZTreeObj("treeDemo"),

            nodes=treeObj.getCheckedNodes(true),

            v="";

            for(var i=0;i<nodes.length;i++){

            v+=nodes[i].name + ",";

            alert(nodes[i].id); //获取选中节点的值

            }

            }

        //-->

    </SCRIPT>

</HEAD>

<BODY>

<div class="zTreeDemoBackground left">

        <ul id="treeDemo" class="ztree"></ul>

    </div>

</BODY>

</HTML>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
用Greasemonkey 脚本收藏网站会员信息到本地
Oct 26 Javascript
javascript sudoku 数独智力游戏生成代码
Mar 27 Javascript
javascript插入样式实现代码
Feb 22 Javascript
JavaScript判断undefined类型的正确方法
Jun 30 Javascript
微信小程序 省市区选择器实例详解(附源码下载)
Jan 05 Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
Apr 25 Javascript
详解从买域名到使用pm2部署node.js项目全过程
Mar 07 Javascript
vue elementui el-form rules动态验证的实例代码详解
May 23 Javascript
vue router 跳转时打开新页面的示例方法
Jul 28 Javascript
使用 webpack 插件自动生成 vue 路由文件的方法
Aug 20 Javascript
浅谈javascript的调试
Jan 28 #Javascript
js的for in循环和java里foreach循环的区别分析
Jan 28 #Javascript
js鼠标悬浮出现遮罩层的方法
Jan 28 #Javascript
Jquery 实现grid绑定模板
Jan 28 #Javascript
Javascript控制input输入时间格式的方法
Jan 28 #Javascript
js使用Array.prototype.sort()对数组对象排序的方法
Jan 28 #Javascript
js封装可使用的构造函数继承用法分析
Jan 28 #Javascript
You might like
php&amp;mysql 日期操作小记
2012/02/27 PHP
PHP引用符&amp;的用法详细解析
2013/08/22 PHP
PHP 文件锁与进程锁的使用示例
2017/08/07 PHP
JavaScript中的对象化编程
2008/01/16 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
2011/10/23 Javascript
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
2013/12/11 Javascript
jQuery中:eq()选择器用法实例
2014/12/29 Javascript
概述jQuery的元素筛选
2016/11/23 Javascript
jquery实现轮播图效果
2017/02/13 Javascript
jquery与js实现全选功能的区别
2017/06/11 jQuery
微信小程序组件 marquee实例详解
2017/06/23 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
swiper4实现移动端导航切换
2020/10/16 Javascript
JavaScript async/await原理及实例解析
2020/12/02 Javascript
前端如何实现动画过渡效果
2021/02/05 Javascript
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
Python中的探索性数据分析(功能式)
2017/12/22 Python
Django项目实战之用户头像上传与访问的示例
2018/04/21 Python
PyQt5实现拖放功能
2018/04/25 Python
Django框架实现逆向解析url的方法
2018/07/04 Python
对python 数据处理中的LabelEncoder 和 OneHotEncoder详解
2018/07/11 Python
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
Stio官网:男女、儿童户外服装
2019/12/13 全球购物
外贸实习生自荐信范文
2013/11/24 职场文书
酒店总经理工作职责
2013/12/13 职场文书
写给学生的新学期寄语
2014/01/18 职场文书
最新离婚协议书范本
2014/08/19 职场文书
综合素质评价自我评价
2015/03/06 职场文书
2015年团队工作总结范文
2015/05/04 职场文书
贷款收入证明范本
2015/06/12 职场文书
《半截蜡烛》教学反思
2016/02/19 职场文书
资深HR教你写好简历中的自我评价
2019/05/07 职场文书
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript