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 相关文章推荐
精通Javascript系列之数据类型 字符串
Jun 08 Javascript
javascript之querySelector和querySelectorAll使用说明
Oct 09 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
Mar 16 Javascript
js实现卡片式项目管理界面UI设计效果
Dec 08 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
Apr 18 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
关于TypeScript模块导入的那些事
Jun 12 Javascript
Vue-cli3项目配置Vue.config.js实战记录
Jul 29 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
Apr 24 Javascript
vue 路由守卫(导航守卫)及其具体使用
Feb 25 Javascript
Vue3不支持Filters过滤器的问题
Sep 24 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中函数内引用全局变量的方法
2008/10/20 PHP
php 获取页面中指定内容的实现类
2014/01/23 PHP
wamp安装后自定义配置的方法
2014/08/23 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
PHP抽象类与接口的区别实例详解
2019/05/09 PHP
通过Unicode转义序列来加密,按你说的可以算是混淆吧
2007/05/06 Javascript
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
一个支付页面DEMO附截图
2014/07/22 Javascript
jQuery中odd选择器的定义和用法
2014/12/23 Javascript
基于JQuery制作可编辑的表格特效
2014/12/23 Javascript
javascript操作符&quot;!~&quot;详解
2015/02/10 Javascript
Knockoutjs 学习系列(二)花式捆绑
2016/06/07 Javascript
AngularJS 输入验证详解及实例代码
2016/07/28 Javascript
解析NodeJS异步I/O的实现
2017/04/13 NodeJs
js+audio实现音乐播放器
2020/09/13 Javascript
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
python网络编程学习笔记(五):socket的一些补充
2014/06/09 Python
图文详解WinPE下安装Python
2016/05/17 Python
python 类详解及简单实例
2017/03/24 Python
Python爬虫实现爬取京东手机页面的图片(实例代码)
2017/11/30 Python
Django中redis的使用方法(包括安装、配置、启动)
2018/02/21 Python
python版本的仿windows计划任务工具
2018/04/30 Python
利用Anaconda简单安装scrapy框架的方法
2018/06/13 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
tensorflow使用神经网络实现mnist分类
2018/09/08 Python
软件测试笔试题
2012/10/25 面试题
幼儿园教师培训方案
2014/02/04 职场文书
电子商务专业应届生求职信
2014/05/28 职场文书
公司股东合作协议书
2014/09/14 职场文书
2014年机关后勤工作总结
2014/12/16 职场文书
思想政治表现评语
2015/01/04 职场文书
军训新闻稿范文
2015/07/17 职场文书
如何书写读后感?(附范文)
2019/07/26 职场文书
python中的class_static的@classmethod的巧妙用法
2021/06/22 Python
Windows server 2016服务器基本设置
2022/08/14 Servers