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

(0)

相关推荐

  • JS树形菜单组件Bootstrap TreeView使用方法详解

    简要介绍: 之前手头的一个项目需要去做一个左侧的树形菜单,右侧则是一个整体的iframe,从而构成一个整体的网站.一开始是打算用bootstrap的tree-view插件,直接把菜单的数据传过去就好了,结果后来项目又改了需求,菜单的内容和图表都是后台动态生成的,所以只能放弃使用bootstrap插件,自己着手写了一个树形菜单.本文主要分两部分讲,一个是对于bootstrap的treeview的实践,另一部分是介绍自己写的树形菜单. bootstrap-treeview: 组件介绍:http://

  • Bootstrap树形菜单插件TreeView.js使用方法详解

    jQuery多级列表树插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等等. 实用Bootstrap树形菜单特效插件Bootstrap Tree View,非常不错的Bootstrap插件,现在很多Bootstrap制作的页面都需要此功能,此插件需要Bootstrap3版本以及jQuery 2.0极以上版本支持,支持众多参数自定义功能,颜色.背景色.图标.链接等,还是很不错的. 效果图: 具体使用方法: 插件依赖 Bootstrap v3.0.

  • bootstrap-treeview自定义双击事件实现方法

    bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等等.但是不知为什么这个插件没有自带双击事件. 经过多次测试,使用方法$('#tree').dblclick( function () {})和方法$('#tree').on('dblclick',function(){})都不起作用!百思不得其解.最后救助大神,问题解决了,但是

  • 基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合

    本文支持两种方式的数据,一种为List集合,一种为json字符串. 先来介绍一下后台返回list集合(推荐使用此方法): 控制器代码如下: public static List<TC_DictionaryInfo> DInfo = new List<TC_DictionaryInfo>(); /// <summary> /// TreeView视图 /// </summary> /// <returns></returns> publ

  • 浅析BootStrap Treeview的简单使用

    bootstrap-treeview.js1是一款强大的树菜单插件,本文给大家介绍bootstrap treeview的简单使用. 废话不多说,直接上干干货. 1.bootstrap-treeview Github网址: https://github.com/jonmiles/bootstrap-treeview 2.使用要求: <!-- 样式表 --> <link href="~/Content/bootstrap.css" rel="stylesheet

  • 基于MVC5和Bootstrap的jQuery TreeView树形控件(二)之数据支持json字符串、list集合

    在上篇给大家介绍了基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串.list集合. 这种方式其实还是利用list集合的方式传给前台,只不过在前台做了一些小小的变化,而控制器代码也进行了部分的优化,值的一提的是:没用的ajax前后台交互舍弃掉了. 控制器代码如下: //实例化公共静态字典表集合 public static List<TC_DictionaryInfo> DInfo = new List<TC_DictionaryInfo

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

    bootstrap-treeview是一款效果非常酷的基于bootstrap的jQuery多级列表树插件.该jQuery插件基于Twitter Bootstrap,以简单和优雅的方式来显示一些继承树结构,如视图树.列表树等等. 本文只是详细说明对bootstrap-treeview添加子节点的扩展方法(addNode),如了解bootstrap-treeview所有用法请看官方API 官方api  https://www.npmjs.com/package/bootstrap-treeview 

  • JavaScript动态添加style节点的方法

    本文实例讲述了JavaScript动态添加style节点的方法.分享给大家供大家参考.具体如下: var css = 'h1 { background: red; }', head = document.getElementsByTagName('head')[0], style = document.createElement('style'); style.type = 'text/css'; if(style.styleSheet){ style.styleSheet.cssText =

  • 扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框

    js代码 function initView(_box){ var $p = $(_box || document); $('a[target="dialog"]', $p).each(function(event){ $(this, $p).unbind('click').click(function(event){ openModal(event); }); }); } $(function(){ initView(); }); /**关闭modal*/ function hide

  • jQuery使用toggleClass方法动态添加删除Class样式的方法

    本文实例讲述了jQuery使用toggleClass方法动态添加删除Class样式的方法.分享给大家供大家参考.具体分析如下: jQuery通过toggleClass方法动态添加删除Class,一次执行相当于addClass,再次执行相当于removeClass,运行下面的代码点击按钮可以看到文本段落字体在蓝色和黑色间切换 <!DOCTYPE html> <html> <head> <script src="js/jquery.min.js"&

  • C#中GridView动态添加列的实现方法

    本文实例讲述了C#中GridView动态添加列的实现方法.分享给大家供大家参考.具体如下: protected void Page_Load(object sender, EventArgs e) { TemplateField mycustomField = new TemplateField(); //创建列实例 mycustomField.ShowHeader = true; // 设置属性 LinkButton lb = new LinkButton(); lb.Text = "Dele

  • JavaScript实现向OL列表内动态添加LI元素的方法

    本文实例讲述了JavaScript实现向OL列表内动态添加LI元素的方法.分享给大家供大家参考.具体分析如下: JavaScript向OL列表内动态添加LI元素的方法,下面JS代码每次点击按钮都会想OL列表中动态添加一个LI <script type="text/javascript"> function addItem() { var myitem = document.getElementById("ItemToAdd").value; var my

  • JS实现动态添加DOM节点和事件的方法示例

    本文实例讲述了JS实现动态添加DOM节点和事件的方法.分享给大家供大家参考,具体如下: 运行效果图如下: 完整实例代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/

  • JQuery实现动态添加删除评论的方法

    本文实例讲述了JQuery实现动态添加删除评论的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

  • jQuery实现html表格动态添加新行的方法

    本文实例讲述了jQuery实现html表格动态添加新行的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <hea

  • JavaScript实现动态添加,删除行的方法实例详解

    本文实例讲述了JavaScript实现动态添加,删除行的方法.分享给大家供大家参考.具体如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>增加Table行</title> </head> <script language="javascript

随机推荐