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 相关文章推荐
js 禁用浏览器的后退功能的简单方法
Dec 10 Javascript
javascript验证上传文件的类型限制必须为某些格式
Nov 14 Javascript
js闭包的用途详解
Nov 09 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
Bootstrap输入框组件简单实现代码
Mar 06 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 Javascript
vue.js中toast用法及使用toast弹框的实例代码
Aug 27 Javascript
Vue弹出菜单功能的实现代码
Sep 12 Javascript
ES6 更易于继承的类语法的使用
Feb 11 Javascript
微信小程序云开发 搭建一个管理小程序
May 17 Javascript
使用vue引入maptalks地图及聚合效果的实现
Aug 10 Javascript
JS sort排序详细使用方法示例解析
Sep 27 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中操作MySQL数据库的一些要注意的问题
2006/10/09 PHP
PHP接口并发测试的方法(推荐)
2016/12/15 PHP
详解thinkphp中的volist标签
2018/01/15 PHP
PHP实现单条sql执行多个数据的insert语句方法
2019/10/11 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
Laravel框架自定义分页样式操作示例
2020/01/26 PHP
Firefox和IE浏览器兼容JS脚本写法小结
2008/07/07 Javascript
为原生js Array增加each方法
2012/04/07 Javascript
页面使用密码保护代码
2013/04/10 Javascript
javascript 获取网页标题代码实例
2014/01/22 Javascript
js调用iframe实现打印页面内容的方法
2014/03/04 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/06/05 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
javascript定义类和类的实现实例详解
2015/12/01 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
Javascript中 带名 匿名 箭头函数的重要区别(推荐)
2017/01/29 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
javaScript和jQuery自动加载简单代码实现方法
2017/11/24 jQuery
JS实现普通轮播图特效
2020/01/01 Javascript
用Angular实现一个扫雷的游戏示例
2020/05/15 Javascript
[01:07:19]DOTA2-DPC中国联赛 正赛 CDEC vs XG BO3 第一场 1月19日
2021/03/11 DOTA
python 创建弹出式菜单的实现代码
2017/07/11 Python
Python+Socket实现基于UDP协议的局域网广播功能示例
2017/08/31 Python
Sanic框架请求与响应实例分析
2018/07/16 Python
win10下tensorflow和matplotlib安装教程
2018/09/19 Python
pycharm恢复默认设置或者是替换pycharm的解释器实例
2018/10/29 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
Python中Selenium库使用教程详解
2020/07/23 Python
python Matplotlib数据可视化(1):简单入门
2020/09/30 Python
Python 利用flask搭建一个共享服务器的步骤
2020/12/05 Python
Css3新特性应用之视觉效果实例
2016/12/12 HTML / CSS
HTML5 实战PHP之Web页面表单设计
2011/10/09 HTML / CSS
美国家居用品和厨具购物网站:DealsDot
2019/10/07 全球购物
全球最受追捧的运动服品牌领先数字目的地:Stylerunner
2020/11/25 全球购物
职务说明书范文
2014/05/07 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书