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


Posted in Javascript onMarch 08, 2017

本文实例讲述了jQuery插件zTree实现更新根节点中第i个节点名称的方法。分享给大家供大家参考,具体如下:

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: {
          enable: true
        }
      }
    };
    var zNodes =[
      { id:1, pId:0, name:"湖北省", open:true},
      { id:11, pId:1, name:"武汉市", open:true},
      { id:111, pId:11, name:"汉口"},
      { id:112, pId:11, name:"汉阳"},
      { id:113, pId:11, name:"武昌"},
      { id:12, pId:1, name:"黄石市"},
      { id:121, pId:12, name:"黄石港区"},
      { id:122, pId:12, name:"西塞山区"},
      { id:123, pId:12, name:"下陆区"},
      { id:124, pId:12, name:"铁山区"},
      { id:13, pId:1, name:"黄冈市"},
      { id:131, pId:13, name:"黄州区"},
      { id:132, pId:13, name:"麻城市"},
      { id:133, pId:13, name:"武穴市"},
      { id:134, pId:13, name:"团风县"},
      { id:135, pId:13, name:"浠水县"},
      { id:136, pId:13, name:"罗田县"},
      { id:137, pId:13, name:"英山县"},
      { id:2, pId:0, name:"湖南省", open:true},
      { id:21, pId:2, name:"长沙市", open:true},
      { id:211, pId:21, name:"芙蓉区"},
      { id:212, pId:21, name:"天心区"},
      { id:213, pId:21, name:"岳麓区"},
      { id:214, pId:21, name:"开福区"},
      { id:22, pId:2, name:"株洲市"},
      { id:221, pId:22, name:"天元区"},
      { id:222, pId:22, name:"荷塘区"},
      { id:223, pId:22, name:"芦淞区"},
      { id:224, pId:22, name:"石峰区"}
    ];
    $(document).ready(function(){
      $.fn.zTree.init($("#baseTree"), setting, zNodes);
    });
    /**
     * 更新根节点中第i个节点的名称
     */
    function updateNodes()
    {
      var treeObj = $.fn.zTree.getZTreeObj("baseTree");
      //获取节点
      var nodes = treeObj.getNodes();
      if (nodes.length>0)
      {
        for(var i=0;i<nodes.length;i++)
        {
          // 更新根节点中第i个节点的名称
          nodes[i].name = "省份名称";
          treeObj.updateNode(nodes[i]);
        }
      }
    }
    //-->
  </script>
 </head>
<body>
<div class="content_wrap">
  <div class="zTreeDemoBackground left">
    <ul id="baseTree" class="ztree" style="height: 300px; width:200px; overflow-y: auto"></ul>
    <input type="button" id="btn" onclick="updateNodes()" value="更新根节点中第i个节点的名称"/>
  </div>
</div>
</body>
</html>

2、运行效果:

(1)初始化

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

(2)单击按钮后

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

3、设计说明

// 更新根节点中第i个节点的名称
nodes[i].name = "省份名称";
treeObj.updateNode(nodes[i]);

附:zTree_v3插件点击此处本站下载

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 Javascript
jquery动态添加option示例
Dec 30 Javascript
Javascript中的默认参数详解
Oct 22 Javascript
jQuery实现模拟marquee标签效果
Jul 14 Javascript
js生成随机数的方法实例
Oct 16 Javascript
BootStrap 导航条实例代码
May 18 Javascript
JavaScript之filter_动力节点Java学院整理
Jun 28 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
Jul 07 Javascript
原生js jquery ajax请求以及jsonp的调用方法
Aug 04 jQuery
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
Mar 13 Javascript
微信小程序学习笔记之函数定义、页面渲染图文详解
Mar 28 Javascript
p5.js临摹旋转爱心
Oct 23 Javascript
JS字符串false转boolean的方法(推荐)
Mar 08 #Javascript
原生js实现选项卡功能
Mar 08 #Javascript
js, jQuery实现全选、反选功能
Mar 08 #Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 #Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 #Javascript
详谈jQuery中的一些正则匹配表达式
Mar 08 #Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 #Javascript
You might like
php empty() 检查一个变量是否为空
2011/11/10 PHP
php class中self,parent,this的区别以及实例介绍
2013/04/24 PHP
PHP判断是否是微信打开还是浏览器打开的方法
2019/02/27 PHP
js window.event对象详尽解析
2009/02/17 Javascript
js prototype截取字符串函数
2010/04/01 Javascript
控制input输入框中提示信息的显示和隐藏的方法
2014/02/12 Javascript
深入理解javascript作用域和闭包
2014/09/23 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
JavaScript学习笔记(三):JavaScript也有入口Main函数
2015/09/12 Javascript
vue-cli实现多页面多路由的示例代码
2018/01/30 Javascript
JavaScript偏函数与柯里化实例详解
2019/03/27 Javascript
ECharts地图绘制和钻取简易接口详解
2019/07/12 Javascript
使用JavaScript计算前一天和后一天的思路详解
2019/12/20 Javascript
浅谈Python中的闭包
2015/07/08 Python
Python中__init__.py文件的作用详解
2016/09/18 Python
python分布式环境下的限流器的示例
2017/10/26 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
python docx 中文字体设置的操作方法
2018/05/08 Python
Python 调用 zabbix api的方法示例
2019/01/06 Python
Python模块汇总(常用第三方库)
2019/10/07 Python
实现Python与STM32通信方式
2019/12/18 Python
Iconfont(矢量图标)+iconmoon(图标svg互转)配合javascript实现社交分享系统
2020/04/21 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
使用matplotlib的pyplot模块绘图的实现示例
2020/07/12 Python
Selenium python时间控件输入问题解决方案
2020/07/22 Python
法国大使拉杆箱官网:DELSEY Paris
2018/03/20 全球购物
俄罗斯名牌服装网上商店:UNIQUE FABRIC
2019/07/25 全球购物
新锐科技Java程序员面试题
2016/07/25 面试题
幼儿园教师备课制度
2014/01/12 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
学校督导评估方案
2014/06/10 职场文书
导游词之上饶龟峰
2019/10/25 职场文书
导游词之山西关帝庙
2019/11/01 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery
Nebula Graph解决风控业务实践
2022/03/31 MySQL
Python Matplotlib绘制等高线图与渐变色扇形图
2022/04/14 Python