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_12_执行模型浅析
Oct 18 Javascript
改写一个简单的菜单 弹性大小
Dec 02 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
Javascript实现简单的富文本编辑器附演示
Jun 16 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
Oct 14 Javascript
javascript上下方向键控制表格行选中并高亮显示的方法
Feb 13 Javascript
javascript中call和apply的用法示例分析
Apr 02 Javascript
jquery仿ps颜色拾取功能
Mar 08 Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
js实现经典贪吃蛇小游戏
Mar 19 Javascript
Vue ​v-model相关知识总结
Jan 28 Vue.js
浅谈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 ADODB实现分页功能简单示例
2018/05/25 PHP
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
关于JavaScript的with 语句的使用方法
2011/05/09 Javascript
图片onload事件触发问题解决方法
2011/07/31 Javascript
javascript中判断json的方法总结
2015/08/27 Javascript
简单掌握JavaScript中const声明常量与变量的用法
2016/05/21 Javascript
第三篇Bootstrap网格基础
2016/06/21 Javascript
JS实现的多张图片轮流播放幻灯片效果
2016/07/22 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
JavaScript实现的XML与JSON互转功能详解
2017/02/16 Javascript
angular2系列之路由转场动画的示例代码
2017/11/09 Javascript
javascript二维数组和对象的深拷贝与浅拷贝实例分析
2019/10/26 Javascript
javascrpt密码强度校验函数详解
2020/03/18 Javascript
[01:22:10]Ti4 循环赛第二日 DK vs Empire
2014/07/11 DOTA
[02:05]DOTA2完美大师赛趣味视频之看我表演
2017/11/18 DOTA
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
Python实现图片添加文字
2019/11/26 Python
Python 使用 prettytable 库打印表格美化输出功能
2019/12/26 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
python实现UDP协议下的文件传输
2020/03/20 Python
Python模拟伯努利试验和二项分布代码实例
2020/05/27 Python
Django返回HTML文件的实现方法
2020/09/17 Python
iPhoneX安全区域(Safe Area)底部小黑条在微信小程序和H5的屏幕适配
2020/04/08 HTML / CSS
Hoka One One法国官网:美国专业跑鞋品牌
2018/12/29 全球购物
Made in Design意大利:现代家具、名家灯具和装饰
2020/10/27 全球购物
培训班主持词
2014/03/28 职场文书
优秀大学生求职自荐信范文
2014/04/19 职场文书
爱护花草树木的标语
2014/06/11 职场文书
禁止高声喧哗的标语
2014/06/11 职场文书
金融保险专业求职信
2014/09/03 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
党员个人剖析材料2014
2014/10/08 职场文书
滴水洞导游词
2015/02/10 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书