bootstrap treeview 扩展addNode方法动态添加子节点的方法


Posted in Javascript onNovember 21, 2017

bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件。该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树、列表树等等。

本文只是详细说明对bootstrap-treeview添加子节点的扩展方法(addNode),如了解bootstrap-treeview所有用法请看官方API

官方api  https://www.npmjs.com/package/bootstrap-treeview   (点击新窗口打开)

 使用过程中,需要动态添加子节点。发现api中没有此功能。找了很多资料也没有发现有相关的方法。

又不想放弃使用它,看来只能自己写的。先读他们的源代码,看他们的逻辑关系,然后就下手自己写一下。不多说,直接上代码

第一步:在Tree主函数return {/*在这里添加addNode的入口*/} 

看图比较直观

bootstrap treeview 扩展addNode方法动态添加子节点的方法bootstrap treeview 扩展addNode方法动态添加子节点的方法

附上代码:

addNode: $.proxy(this.addNode, this),

第二步:添加Tree的prototype方法

/** 
    给节点添加子节点 
@param {Object|Number} identifiers - A valid node, node id or array of node identifiers 
@param {optional Object} options.node; 
  */ 
Tree.prototype.addNode = function (identifiers, options) { 
  this.forEachIdentifier(identifiers, options, $.proxy(function (node, options) { 
    this.setAddNode(node, options);  
  }, this)); 
  this.setInitialStates({ nodes: this.tree }, 0); 
  this.render(); 
} 
  /** 
  * 添加子节点 
  */ 
Tree.prototype.setAddNode = function (node, options) { 
  if (node.nodes == null) node.nodes = []; 
  if (options.node) { 
    node.nodes.push(options.node); 
  }; 
};

看图:

bootstrap treeview 扩展addNode方法动态添加子节点的方法

第三步:就是如何使用了。

bootstrap treeview 扩展addNode方法动态添加子节点的方法

$("#Treeview01").treeview("addNode", [2, { node: { text: "新加的菜单", href: "001005" } }]);

注意 $("#Treeview01")使用data已初始化过的

下面看个实例TreeView动态添加节点

遍历某路径下的文件夹添加父节点,遍历文件夹下的文件添加子节点

private void button1_Click(object sender, EventArgs e)
    {
      FolderBrowserDialog fd = new FolderBrowserDialog();
      if (fd.ShowDialog() == DialogResult.OK)
      {
        // 在此添加代码,选择的路径为 folderBrowserDialog1.SelectedPath
        if (Directory.Exists(fd.SelectedPath))
        {
          DirectoryInfo thisOne = new DirectoryInfo(fd.SelectedPath);
          DirectoryInfo[] directoryInfo = thisOne.GetDirectories();
          for (int i = 0; i < directoryInfo.Length; i++)
          {
            TreeNode root = new TreeNode(directoryInfo[i].ToString());//创建节点
            root.Name = directoryInfo[i].ToString(); //为节点取个名字,这儿创建的是根节点
            root.Tag = 0;
            treeView1.Nodes.Add(root);        //将节点添加到treeView1上
            DirectoryInfo thisTwo = new DirectoryInfo(fd.SelectedPath + "\\" + directoryInfo[i].ToString());
            FileInfo[] fileInfo = thisTwo.GetFiles();
            for (int j = 0; j < fileInfo.Length; j++)
            {
              TreeNode node = new TreeNode(fileInfo[j].ToString());
              node.Tag = 1;
              node.Name = fileInfo[j].ToString();
              if (!root.Nodes.ContainsKey(node.Name))
              {
                root.Nodes.Add(node);
              }
            }
          }
        }
      }
    }

总结

以上所述是小编给大家介绍的bootstrap treeview 扩展addNode方法动态添加子节点的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JSP中使用JavaScript动态插入删除输入框实现代码
Jun 13 Javascript
jQuery分组选择器用法实例
Dec 23 Javascript
JavaSciprt中处理字符串之sup()方法的使用教程
Jun 08 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
May 17 Javascript
微信小程序 教程之小程序配置
Oct 17 Javascript
react路由配置方式详解
Aug 07 Javascript
js中Object.defineProperty()方法的不详解
Jul 09 Javascript
微信小程序多音频播放进度条问题
Aug 28 Javascript
详解npm 配置项registry修改为淘宝镜像
Sep 07 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
May 06 Javascript
JavaScript实现跟随鼠标移动的盒子
Jan 28 Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 #Javascript
微信小程序实现跟随菜单效果和循环嵌套加载数据
Nov 21 #Javascript
基于bootstrap写的一点localStorage本地储存
Nov 21 #Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 #Javascript
基于 Vue.js 之 iView UI 框架非工程化实践记录(推荐)
Nov 21 #Javascript
微信小程序实现tab和swiper切换结合效果
Jul 17 #Javascript
微信小程序实现tab切换效果
Nov 21 #Javascript
You might like
PHP使用strtotime计算两个给定日期之间天数的方法
2015/03/18 PHP
PHP中Closure类的使用方法及详解
2015/10/09 PHP
简单实现PHP留言板功能
2016/12/21 PHP
如何离线执行php任务
2017/02/21 PHP
关于laravel框架中的常用目录路径函数
2019/10/23 PHP
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
2008/11/06 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
cnblogs 代码高亮显示后的代码复制问题解决实现代码
2011/12/14 Javascript
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
ExtJs设置GridPanel表格文本垂直居中示例
2013/07/15 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
2013/12/16 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
jQuery+CSS3文字跑马灯特效的简单实现
2016/06/25 Javascript
功能强大的Bootstrap使用手册(一)
2016/08/02 Javascript
JS小数转换为整数的方法分析
2017/01/07 Javascript
canvas 弹幕效果(实例分享)
2017/01/11 Javascript
layui table 多行删除(id获取)的方法
2019/09/12 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
使用Typescript和ES模块发布Node模块的方法
2020/05/25 Javascript
vue-cli4项目开启eslint保存时自动格式问题
2020/07/13 Javascript
[02:44]DOTA2英雄基础教程 魅惑魔女
2014/01/07 DOTA
Python工程师面试题 与Python Web相关
2016/01/14 Python
python语言中with as的用法使用详解
2018/02/23 Python
Python3.5内置模块之random模块用法实例分析
2019/04/26 Python
基于Python编写一个计算器程序,实现简单的加减乘除和取余二元运算
2020/08/05 Python
粉红色的鲸鱼:Vineyard Vines
2018/02/17 全球购物
AJax面试题
2014/11/25 面试题
怎样写好创业计划书的内容
2014/02/06 职场文书
《黄河颂》教学反思
2014/02/07 职场文书
建筑施工安全生产责任书
2014/07/22 职场文书
司法工作人员群众路线对照检查材料思想汇报
2014/09/30 职场文书
2014党支部对照检查材料思想汇报
2014/10/05 职场文书
再读《皇帝的新衣》的读后感悟!
2019/08/07 职场文书
Python+Appium实现自动抢微信红包
2021/05/21 Python
Nginx使用Lua模块实现WAF的原理解析
2021/09/04 Servers