温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

jQuery插件zTree如何获取一级节点数据

发布时间:2021-07-06 13:46:30 阅读:147 作者:小新 栏目:web开发
前端开发者测试专用服务器限时活动,0元免费领,库存有限,领完即止! 点击查看>>

这篇文章主要介绍了jQuery插件zTree如何获取一级节点数据,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

具体如下:

1、实现代码:

<!DOCTYPE html>
<html>
<head>
  <title>zTree实现基本树</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <link rel="stylesheet" type="text/css" href="zTree_v3/css/demo.css" rel="external nofollow" >
  <link rel="stylesheet" type="text/css" href="zTree_v3/css/zTreeStyle/zTreeStyle.css" rel="external nofollow" >
  <script type="text/javascript" src="zTree_v3/js/jquery-1.4.4.min.js"></script>
  <script type="text/javascript" src="zTree_v3/js/jquery.ztree.core.min.js"></script>
  <script type="text/javascript">
    <!--
    var setting = {
      data: {
        simpleData: {
          enabletrue
        }
      }
    };
    var zNodes =[
      { id:1pId:0name:"湖北省"open:true},
      { id:11pId:1name:"武汉市"open:true},
      { id:111pId:11name:"汉口"},
      { id:112pId:11name:"汉阳"},
      { id:113pId:11name:"武昌"},
      { id:12pId:1name:"黄石市"},
      { id:121pId:12name:"黄石港区"},
      { id:122pId:12name:"西塞山区"},
      { id:123pId:12name:"下陆区"},
      { id:124pId:12name:"铁山区"},
      { id:13pId:1name:"黄冈市"},
      { id:131pId:13name:"黄州区"},
      { id:132pId:13name:"麻城市"},
      { id:133pId:13name:"武穴市"},
      { id:134pId:13name:"团风县"},
      { id:135pId:13name:"浠水县"},
      { id:136pId:13name:"罗田县"},
      { id:137pId:13name:"英山县"},
      { id:2pId:0name:"湖南省"open:true},
      { id:21pId:2name:"长沙市"open:true},
      { id:211pId:21name:"芙蓉区"},
      { id:212pId:21name:"天心区"},
      { id:213pId:21name:"岳麓区"},
      { id:214pId:21name:"开福区"},
      { id:22pId:2name:"株洲市"},
      { id:221pId:22name:"天元区"},
      { id:222pId:22name:"荷塘区"},
      { id:223pId:22name:"芦淞区"},
      { id:224pId:22name:"石峰区"}
    ];
    $(document).ready(function(){
      $.fn.zTree.init($("#baseTree"), setting, zNodes);
    });
    /**
     * 获取全部节点数据
     * 一级节点数据
     */
    function findNodes()
    {
      var treeObj = $.fn.zTree.getZTreeObj("baseTree");
      //获取全部节点数据
      var nodes = treeObj.getNodes();
      for (var i=0, l=nodes.length; i < l; i++)
      {
        var nodeId = nodes[i].id;
        var nodeName = nodes[i].name;
        alert("树节点编码:"+nodeId+"\n"+"树节点名称:"+nodeName);
      }
    }
    //-->
  </script>
 </head>
<body>
<div class="content_wrap">
  <div class="zTreeDemoBackground left" >
    <ul id="baseTree" class="ztree" ></ul>
    <input type="button" id="btn" onclick="findNodes()" value="获取全部节点数据"/>
  </div>
</div>
</body>
</html>

2、实现效果图:

(1)初始化

jQuery插件zTree如何获取一级节点数据

(2)单击“获取全部节点数据”

jQuery插件zTree如何获取一级节点数据

(3)单击“确定”

jQuery插件zTree如何获取一级节点数据

3、源码说明

var treeObj = $.fn.zTree.getZTreeObj("baseTree");
//获取全部节点数据
var nodes = treeObj.getNodes();

感谢你能够认真阅读完这篇文章,希望小编分享的“jQuery插件zTree如何获取一级节点数据”这篇文章对大家有帮助,同时也希望大家多多支持亿速云,关注亿速云行业资讯频道,更多相关知识等着你来学习!

亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI

开发者交流群×