js树插件zTree获取所有选中节点数据的方法

本文实例讲述了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程序设计有所帮助。

赞 (0)

相关推荐

  • jQuery使用zTree插件实现树形菜单和异步加载

    jQuery使用zTree插件实现树形菜单和异步加载

    本文实例讲解了jQuery使用zTree插件实现树形菜单和异步加载,并且可以进行编辑,分享给大家供大家参考,具体内容如下 效果图: 一.HTML代码 <html> <head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> <l

  • Jquery zTree 树控件异步加载操作

    Jquery zTree 树控件异步加载操作

    zTree 是利用 JQuery 的核心代码,实现一套能完成大部分常用功能的 Tree 插件 兼容 IE.FireFox.Chrome 等浏览器 在一个页面内可同时生成多个 Tree 实例 支持 JSON 数据 支持一次性静态生成 和 Ajax 异步加载 两种方式 支持多种事件响应及反馈 支持 Tree 的节点移动.编辑.删除 支持任意更换皮肤 / 个性化图标(依靠css) 支持极其灵活的 checkbox 或 radio 选择功能 简单的参数配置实现 灵活多变的功能 异步加载的意思就是: 当点

  • JQuery ztree带筛选、异步加载实例讲解

    JQuery ztree带筛选、异步加载实例讲解

    本文实例分享了JQuery ztree带筛选.异步加载实例,供大家参考,具体内容如下 <html> < head> < base href="<%=basePath%>"> <title>My JSP 'ztree.jsp' starting page</title> <link rel="stylesheet" href="zTrees/css/zTreeStyle/zTree

  • JQuery ztree 异步加载实例讲解

    JQuery ztree 异步加载实例讲解

    本来要做一个文件目录浏览界面,需要遍历所有的文件和目录,很显然一次性读取时很费时费力的一件事情. 因此就需要做异步加载.... 准备工作: 1下载 JQuery ZTree 复制其中的JS和CSS即可,其实没必要引那么多,用什么引什么就可以. 2 需要fastJSON,用来转换JSON对象 我下载JAR包后,引入到Eclipse中总是报找不到class错误. 解决办法:把jar包放在WEB-INF/lib下即可. 代码实例: index.jsp <%@ page language="jav

  • jquery zTree异步加载简单实例分享

    首先提供Ztree官方网站http://www.ztree.me. Ztree是一个使用jQuery实现的JSP页面的各种功能树,本文介绍一个异步获取数据到下拉树的实现方式. 当前版本Ztree 3.5.01 simple.html 复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>simple.html</title> <meta http-equiv="keywords"

  • 后台获取ZTREE选中节点的方法

    本文实例讲述了后台获取ZTREE选中节点的方法.分享给大家供大家参考.具体实现方法如下: function count() { var zTree = $.fn.zTree.getZTreeObj("classpurview"); checkCount = zTree.getCheckedNodes(true); var classpurview = ""; for(var i=0;i<checkCount.length;i++) { classpurview

  • zTree异步加载展开第一级节点的实现方法

    在 setting 中的 callback 中加上 onAsyncSuccess:onAsyncSuccess 回调函数 , 然后实现回调函数 var isFirst = true; function onAsyncSuccess(event, treeId) { if (isFirst) { //获得树形图对象 var zTree = $.fn.zTree.getZTreeObj("treeDemo"); //获取根节点个数,getNodes获取的是根节点的集合 var nodeLi

  • jquery zTree异步加载、模糊搜索简单实例分享

    本文实例为大家讲解了jquery zTree树插件的基本使用方法,具体内容如下 一.节点模糊搜索功能:搜索成功后,自动高亮显示并定位.展开搜索到的节点. 二.节点异步加载:1.点击展开时加载数据:2.选中节点时加载数据. 前台代码如下: <script type="text/javascript"> //ztree设置 var setting = { view: { fontCss: getFontCss }, check: { enable: true }, data:

  • ztree获取当前选中节点子节点id集合的方法

    本文实例讲述了ztree获取当前选中节点子节点id集合的方法.分享给大家供大家参考.具体分析如下: 要求:获取当前选中节点的子节点id集合. 步骤: 1.获取当前节点 2.用ztree的方法transformToArray()获取当前选中节点(含选中节点)的子节点对象集合. 3.遍历集合,取出需要的值. treeNode:当前选中节点对象 function getChildNodes(treeNode) { var childNodes = ztree.transformToArray(tree

  • js树插件zTree获取所有选中节点数据的方法

    本文实例讲述了js树插件zTree获取所有选中节点数据的方法.分享给大家供大家参考.具体分析如下: 由于刚接触Tree方面的东西.在网上看到了zTree,是中国人写的.所以API肯定是中文的.而且评论也很好.所以尝试用zTree在项目中.这个获取所有选中节点数据很简单.看一下API就能看懂了.所以我就直接上代码了. 复制代码 代码如下: <!DOCTYPE html> <HTML> <HEAD>     <TITLE> ZTREE DEMO - Standa

  • jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法

    jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法

    本文实例讲述了jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法.分享给大家供大家参考,具体如下: 1.实现代码: <!DOCTYPE html> <html> <head> <title>zTree实现基本树</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link

  • jQuery插件zTree实现清空选中第一个节点所有子节点的方法

    jQuery插件zTree实现清空选中第一个节点所有子节点的方法

    本文实例讲述了jQuery插件zTree实现清空选中第一个节点所有子节点的方法.分享给大家供大家参考,具体如下: 1.实现代码: <!DOCTYPE html> <html> <head> <title>zTree实现基本树</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link r

  • jQuery插件zTree实现单独选中根节点中第一个节点示例

    jQuery插件zTree实现单独选中根节点中第一个节点示例

    本文实例讲述了jQuery插件zTree实现单独选中根节点中第一个节点的方法.分享给大家供大家参考,具体如下: 1.实现代码: <!DOCTYPE html> <html> <head> <title>zTree实现基本树</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link re

  • jQuery插件zTree实现获取一级节点数据的方法

    jQuery插件zTree实现获取一级节点数据的方法

    本文实例讲述了jQuery插件zTree实现获取一级节点数据的方法.分享给大家供大家参考,具体如下: 1.实现代码: <!DOCTYPE html> <html> <head> <title>zTree实现基本树</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link rel=&qu

  • jQuery插件zTree实现更新根节点中第i个节点名称的方法示例

    jQuery插件zTree实现更新根节点中第i个节点名称的方法示例

    本文实例讲述了jQuery插件zTree实现更新根节点中第i个节点名称的方法.分享给大家供大家参考,具体如下: 1.实现代码: <!DOCTYPE html> <html> <head> <title>zTree实现基本树</title> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <link re

  • Jquery树插件zTree用法入门教程

    Jquery树插件zTree用法入门教程

    本文实例分析了Jquery树插件zTree用法.分享给大家供大家参考.具体分析如下: 关于zTree的介绍就搜吧. 这个例子的最终效果如下: 鼠标移动到一级目录时出现全选链接,点击全选链接该目录下的所有子项都被添加到收件人的文本框中,当然点击单个子项则添加一个.至于要添加些什么信息由自己决定. 1. 下载zTee,页面引入jquery.js,根据功能需求添加zTree相应的js和css 复制代码 代码如下: <script type="text/javascript" src=&

  • JS+CSS实现可以凹陷显示选中单元格的方法

    本文实例讲述了JS+CSS实现可以凹陷显示选中单元格的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>JS+CSS实现可以凹陷显示选中的单元格</title> <style> td{cursor:hand;font-size:12px} .click{border-top:1px solid #0033CC;border-bottom:1px solid #DDEEFF;border

  • Python获取任意xml节点值的方法

    本文实例讲述了Python获取任意xml节点值的方法.分享给大家供大家参考.具体实现方法如下: # -*- coding: utf-8 -*- import xml.dom.minidom ELEMENT_NODE = xml.dom.Node.ELEMENT_NODE class SimpleXmlGetter(object): def __init__(self, data): if type(data) == str: self.root = xml.dom.minidom.parse(d

随机推荐