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 相关文章推荐
原型方法的不同写法居然会影响调试的解决方法
Mar 08 Javascript
javascript 页面划词搜索JS
Sep 28 Javascript
js event事件的传递与冒泡处理
Dec 06 Javascript
JavaScript关于select的相关操作说明
Jan 13 Javascript
js函数参数设置默认值的一种变通实现方法
May 26 Javascript
Javascript 拖拽雏形中的一些问题(逐行分析代码,让你轻松了拖拽的原理)
Jan 23 Javascript
jquery事件的ready()方法使用详解
Nov 11 Javascript
Vue.js使用v-show和v-if的注意事项
Dec 13 Javascript
jquery使用EasyUI Tree异步加载JSON数据(生成树)
Feb 11 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
Oct 11 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
Nov 15 Javascript
HTML+VUE分页实现炫酷物联网大屏功能
May 27 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二维数组排序的3种方法和自定义函数分享
2014/04/09 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
JavaScript聚焦于第一个字段的代码
2010/10/15 Javascript
JavaScript传递变量: 值传递?引用传递?
2011/02/22 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
2014/08/15 Javascript
AngularJS基础学习笔记之表达式
2015/05/10 Javascript
深入理解JavaScript函数参数(推荐)
2016/07/26 Javascript
JS简单实现禁止访问某个页面的方法
2016/09/13 Javascript
Nodejs 搭建简单的Web服务器详解及实例
2016/11/30 NodeJs
浅谈javascript中执行环境(作用域)与作用域链
2016/12/08 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
vue-cli webpack 开发环境跨域详解
2017/05/18 Javascript
使用node打造自己的命令行工具方法教程
2018/03/26 Javascript
微信小程序实现人脸识别
2018/05/25 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
uni-app如何实现增量更新功能
2020/01/03 Javascript
[02:29]DOTA2英雄基础教程 陈
2013/12/17 DOTA
Python利用正则表达式匹配并截取指定子串及去重的方法
2015/07/30 Python
关于python的bottle框架跨域请求报错问题的处理方法
2017/03/19 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
Python udp网络程序实现发送、接收数据功能示例
2019/12/09 Python
Python3读取和写入excel表格数据的示例代码
2020/06/09 Python
Python常用外部指令执行代码实例
2020/11/05 Python
html5 标签
2009/07/16 HTML / CSS
10个最常见的HTML5面试题 附答案
2016/06/06 HTML / CSS
名词解释WEB SERVICE,SOAP,UDDI,WSDL,JAXP,JAXM;JSWDL开发包的介绍。
2012/10/27 面试题
职业教育毕业生求职信
2013/11/09 职场文书
企业消防安全制度
2014/02/02 职场文书
见习期自我鉴定范文
2014/03/19 职场文书
大学生就业策划书范文
2014/04/04 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
web前端之css水平居中代码解析
2021/05/20 HTML / CSS