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 相关文章推荐
asp.net下使用jquery 的ajax+WebService+json 实现无刷新取后台值的实现代码
Sep 19 Javascript
初学js插入节点appendChild insertBefore使用方法
Jul 04 Javascript
图片在浏览器中底部对齐 解决方法之一
Nov 30 Javascript
javascript封装 Cookie 应用接口
Aug 07 Javascript
JavaScript中的boolean布尔值使用学习及相关技巧讲解
May 26 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 Javascript
Angular实现可删除并计算总金额的购物车功能示例
Dec 26 Javascript
浅谈手写node可读流之流动模式
Jun 01 Javascript
从零开始学习搭建React脚手架项目
Aug 23 Javascript
vue中格式化时间过滤器代码实例
Apr 17 Javascript
jQuery 常用特效实例小结【显示与隐藏、淡入淡出、滑动、动画等】
May 19 jQuery
浅谈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中使用全局变量的几种方法
2013/06/24 PHP
PHP数组排序之sort、asort与ksort用法实例
2014/09/08 PHP
php检测url是否存在的方法
2015/04/14 PHP
PHP编写简单的App接口
2016/08/28 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
JS左右无缝滚动(一般方法+面向对象方法)
2012/08/17 Javascript
JavaScript中string对象
2015/06/12 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
JS实现的简洁二级导航菜单雏形效果
2015/10/13 Javascript
jquery获取url参数及url加参数的方法
2015/10/26 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
JavaScript的Ext JS框架中的GridPanel组件使用指南
2016/05/21 Javascript
手机端js和html5刮刮卡效果
2020/09/29 Javascript
基于JavaScript实现焦点图轮播效果
2017/03/27 Javascript
Vue中计算属性computed的示例解读
2017/07/26 Javascript
jQuery Position方法使用和兼容性
2017/08/23 jQuery
最新Javascript程序员面试试题和解题方法
2017/11/23 Javascript
Vuex 入门教程
2018/01/10 Javascript
vue的.vue文件是怎么run起来的(vue-loader)
2018/12/10 Javascript
VUE+node(express)实现前后端分离
2019/10/13 Javascript
小程序自定义模板实现吸顶功能
2020/01/08 Javascript
python线程池threadpool实现篇
2018/04/27 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
Numpy 理解ndarray对象的示例代码
2020/04/03 Python
python构造IP报文实例
2020/05/05 Python
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
Zavvi美国:英国娱乐之家
2017/03/19 全球购物
Veronica Beard官网:在酷、经典和别致之间找到了平衡
2018/01/11 全球购物
电子商务专业实习生自我鉴定
2013/09/24 职场文书
住房公积金接收函
2014/01/09 职场文书
校运会入场式解说词
2014/02/10 职场文书
求职面试个人自我评价
2014/02/28 职场文书
超强台风观后感
2015/06/09 职场文书
2016年大学光棍节活动总结
2016/04/05 职场文书
MySQL中utf8mb4排序规则示例
2021/08/02 MySQL