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

 更新时间:2017年11月21日 15:03:45   作者:咦地瓜  
bootstrap-treeview 是一款基于Jquery+bootstrap的树控件,这篇文章主要介绍了bootstrap treeview 扩展addNode方法动态添加子节点的方法,需要的朋友可以参考下

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的入口*/} 

看图比较直观

附上代码:

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); 
  }; 
}; 

看图:

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

$("#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方法动态添加子节点的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • Kindeditor单独调用单图上传增加预览功能的实例

    Kindeditor单独调用单图上传增加预览功能的实例

    下面小编就为大家带来一篇Kindeditor单独调用单图上传增加预览功能的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 禁止页面刷新让F5快捷键及右键都无效

    禁止页面刷新让F5快捷键及右键都无效

    禁止页面刷新让F5快捷键及右键都无效,下面有个不不错的实现方法,大家可以感受下
    2014-01-01
  • JavaScript面向对象编程

    JavaScript面向对象编程

    暂时放弃js框架吧 开始写javascript的时候都是自己写,后来发现了prototype.js框架,发现很好用,就一直用的,他的对象创建方法被修改了,但很好用,再后来又转用jquery框架,受此框架影响,也不用自己创建类了,渐渐的竟然忘记了如何自己定义类了,猛的给一个一般方法,竟然看着别扭,混淆了很多东西,忘记了很多东西。今天回头整理下。 一下方法参考prototype.js
    2008-03-03
  • .html文件防止script脚本缓存的三种方法

    .html文件防止script脚本缓存的三种方法

    现在有这样一个问题,由于一些原因,我们经常需要修改gTool的代码然后上传更新cdn,但是用户通过 html 文件访问的 gTool 链接实际上还是缓存的,所以现在问题就是如何禁止缓存,文中给大家介绍了三个方法供大家参考,需要的朋友可以参考下
    2024-01-01
  • JS去掉字符串前后空格或去掉所有空格的用法

    JS去掉字符串前后空格或去掉所有空格的用法

    这篇文章主要介绍了JS去掉字符串前后空格或去掉所有空格的用法,需要的朋友可以参考下
    2017-03-03
  • JS实现电影票选座的项目示例

    JS实现电影票选座的项目示例

    电影院选座基本上每个人都用到过,本文主要介绍了JS实现电影票选座的项目示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • javascript 获取网页参数系统

    javascript 获取网页参数系统

    用处比较多,适合在当前网页打开别的网站的内容
    2008-07-07
  • javascript实现按回车键切换焦点

    javascript实现按回车键切换焦点

    这篇文章主要介绍了javascript实现按回车键切换焦点的方法,需要的朋友可以参考下
    2015-02-02
  • js实现大转盘抽奖游戏实例

    js实现大转盘抽奖游戏实例

    这篇文章主要介绍了js实现大转盘抽奖游戏的方法,实例分析了javascript基于数组、随机数等实现抽奖游戏的技巧,需要的朋友可以参考下
    2015-06-06
  • 15个非常实用的JavaScript代码片段

    15个非常实用的JavaScript代码片段

    这篇文章主要为大家详细介绍了15个非常实用的JavaScript代码片段,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-12-12

最新评论