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 相关文章推荐
使用隐藏的new来创建对象
Mar 29 Javascript
关于js datetime的那点事
Nov 15 Javascript
使用Jquery实现点击文字后变成文本框且可修改
Sep 21 Javascript
jquery如何获取复选框的值
Dec 12 Javascript
js仿苹果iwatch外观的计时器代码分享
Aug 26 Javascript
js带前后翻页的图片切换效果代码分享
Sep 08 Javascript
JQuery.validationEngine表单验证插件(推荐)
Dec 10 Javascript
jQuery实现可拖拽3D万花筒旋转特效
Jan 03 Javascript
jQuery基于ajax操作json数据简单示例
Jan 05 Javascript
详解JS模块导入导出
Dec 20 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
Nov 08 Javascript
jQuery ajax - getScript() 方法和getJSON方法
May 14 jQuery
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
swfupload 多文件上传实现代码
2008/08/27 PHP
PHP多个版本的分析解释
2011/07/21 PHP
PHP如何利用P3P实现跨域
2013/08/24 PHP
javascript 控制弹出窗口
2007/04/10 Javascript
Extjs 几个方法的讨论
2010/01/28 Javascript
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
推荐25个超炫的jQuery网格插件
2014/11/28 Javascript
node.js中的fs.readSync方法使用说明
2014/12/17 Javascript
Javascript实现飞动广告效果的方法
2015/05/25 Javascript
js组件SlotMachine实现图片切换效果制作抽奖系统
2016/04/17 Javascript
jQuery文件上传控件 Uploadify 详解
2016/06/20 Javascript
HTML页面,测试JS对C函数的调用简单实例
2016/08/09 Javascript
值得分享的bootstrap table实例
2016/09/22 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
Vue单页及多页应用全局配置404页面实践记录
2018/05/22 Javascript
vue如何安装使用Quill富文本编辑器
2018/09/21 Javascript
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
2019/01/18 Javascript
Node.js + express基本用法教程
2019/03/14 Javascript
如何实现双向绑定mvvm的原理实现
2019/05/28 Javascript
javascript设计模式 ? 状态模式原理与用法实例分析
2020/04/22 Javascript
[46:44]VG vs TNC Supermajor小组赛B组败者组决赛 BO3 第一场 6.2
2018/06/03 DOTA
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
Python多线程threading join和守护线程setDeamon原理详解
2020/03/18 Python
Pycharm连接远程服务器过程图解
2020/04/30 Python
django 数据库 get_or_create函数返回值是tuple的问题
2020/05/15 Python
Python 实现敏感目录扫描的示例代码
2020/05/21 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
使用HTML5和CSS3制作一个模态框的示例
2018/03/07 HTML / CSS
TripAdvisor日本:全球领先的旅游网站
2019/02/14 全球购物
Contém1g官网:巴西彩妆品牌
2020/01/17 全球购物
光信息科学与技术专业职业生涯规划
2014/03/13 职场文书
旷课检讨书500字
2014/10/14 职场文书
文明礼仪倡议书
2015/04/28 职场文书
研究生论文答辩开场白
2015/05/27 职场文书
升职自荐书
2019/05/09 职场文书
MySQL创建管理子分区
2022/04/13 MySQL