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 相关文章推荐
兼容ie和firefox js关闭代码
Dec 11 Javascript
javascript Array.sort() 跨浏览器下需要考虑的问题
Dec 07 Javascript
jQuery之ajax技术的详细介绍
Jun 19 Javascript
SWFObject基本用法实例分析
Jul 20 Javascript
逻辑表达式中与或非的用法详解
Jun 06 Javascript
JavaScript中校验银行卡号的实现代码
Dec 19 Javascript
H5上传本地图片并预览功能
May 08 Javascript
js图片加载效果实例代码(延迟加载+瀑布流加载)
May 12 Javascript
bootstrap table插件的分页与checkbox使用详解
Jul 23 Javascript
js登录滑动验证的实现(不滑动无法登陆)
Jan 03 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 Javascript
微信小程序实现多选框功能的实例代码
Jun 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
用文本作数据处理
2006/10/09 PHP
最新的php 文件上传模型,支持多文件上传
2009/08/13 PHP
php支持中文字符串分割的函数
2015/05/28 PHP
简单谈谈PHP vs Node.js
2015/07/17 PHP
Javascript 各浏览器的 Javascript 效率对比
2008/01/23 Javascript
JS去除字符串两端空格的简单实例
2013/12/27 Javascript
JS在IE下缺少标识符的错误
2014/07/23 Javascript
显示今天的日期js代码(阳历和农历)
2014/09/30 Javascript
jquery实现页面关键词高亮显示的方法
2015/03/12 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
基于jQuery实现多层次的手风琴效果附源码
2015/09/21 Javascript
详解js实现线段交点的三种算法
2016/08/09 Javascript
AngularJS实现根据变量改变动态加载模板的方法
2016/11/04 Javascript
8 行 Node.js 代码实现代理服务器
2016/12/05 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
javascript 面向对象实战思想分享
2017/09/07 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
[01:13:46]iG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[00:14]PWL:老朋友Mushi拍VLOG与中国玩家问好
2020/11/04 DOTA
python读取html中指定元素生成excle文件示例
2014/04/03 Python
python利用OpenCV2实现人脸检测
2020/04/16 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
解决Django的request.POST获取不到内容的问题
2018/05/28 Python
python切片的步进、添加、连接简单操作示例
2019/07/11 Python
tensorflow 实现数据类型转换
2020/02/17 Python
python实现滑雪游戏
2020/02/22 Python
python批量修改文件名的示例
2020/09/27 Python
Python模拟键盘输入自动登录TGP
2020/11/27 Python
python FTP编程基础入门
2021/02/27 Python
台湾百利市购物中心:e-Payless
2017/08/16 全球购物
介绍一下ICMP(Internet Control Message Protocol)Internet控制信息协议
2016/11/26 面试题
销售顾问的岗位职责
2013/11/13 职场文书
企业演讲稿范文大全
2014/05/20 职场文书
个人房屋转让协议书范本
2014/10/26 职场文书
医院病假条怎么写
2015/08/17 职场文书
python实现简单的井字棋
2021/05/26 Python