bootstrap treeView 如何追加节点

bootstrap treeView 如何追加节点
看了api和其他demo没发现有增加节点的方法

6个回答

我的空间有详细的异步加载——懒加载的例子。

MrLiber
MrLiber 回复MrLiber: 不过年代已久,可能是以前版本没有的,treeview现在已经新增了不少方法
大约 2 年之前 回复
MrLiber
MrLiber 可以参照这位大神的
大约 2 年之前 回复

bootstrap 没有,bootstrap 只是提供一些样式,你的tree是怎么形成的,如果是第三方插件,插件中应该有对tree的操作,否则你就用JavaScript操作吧

u012757494
systemin1 通过js生成的
大约 5 年之前 回复

bootstrap treeView如何实现异步加载呢?谁有例子,能不能贴一个出来,感激不尽

var tree = [
{
text: "Parent 1",
nodes: [
{
text: "Child 1",
nodes: [
{
text: "Grandchild 1"
},
{
text: "Grandchild 2"
}
]
},
{
text: "Child 2"
}
]
},
{
text: "Parent 2"
},
{
text: "Parent 3"
},
{
text: "Parent 4"
},
{
text: "Parent 5"
}
];

function getTree() {
// Some logic to retrieve, or generate tree structure
return data;
}

$('#tree').treeview({data: getTree()});

      $.ajax({
            url: //xxx/xxxx,
            type: "post",
            success: function (data) {
                dd.treeview({
                    data: data,         // data is not optional
                    levels: 5
                });
            },

            error: function (xhr, status, error) {
                alert("error:" + error);
            }
        });
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
Python+OpenCV计算机视觉

Python+OpenCV计算机视觉

使用bootstrap TreeView怎样把选中的数据提交到后台

使用bootstrap TreeView怎样把选中的数据提交到后台

Bootstarp-TreeView获取选中节点

showCheckbox: true, 固定三级, 全部 A A-A A-B B B-A 大概是这样的结构 如何获得选中的第三级几点的nodeId $('#tree').treeview('getSelected', nodeId); 显示Uncaught ReferenceError: nodeId is not defined

请教一个关于bootstrap tree获取父级节点的问题

看了bootstrap treeview的官方api,获取一个节点的父级节点使用以下方式 ``` var parentNode = $('#treeview').treeview('getParent', childNode.nodeId); alert(parentNode.text); ``` 结果是一个函数对象,我想获取父级节点的text,各种尝试,甚至便利这个对象的所有属性和方法,都没有找到,请教各位高手解答下。

bootstrap-treeview自定义节点选中事件,刚进页面第一次点击有效果,后面就没效果了?

![图片说明](https://img-ask.csdn.net/upload/201608/18/1471492368_468491.png)![图片说明](https://img-ask.csdn.net/upload/201608/18/1471492423_978099.png) 代码: $("ul.list-group > li > span.glyphicon-unchecked").bind("click",function(){ var nodeId = $(this).parent().attr("data-nodeid"); checkNodeEvent(nodeId); }); //选中节点 function checkNodeEvent(nodeId){ if(nodeId!=undefined){ var node = $('#treeview-checkable').treeview("getNode",nodeId); var childNodes = new Array(); childNodes = node.nodes; for(var i=0;i<childNodes.length;i++){ // $('#treeview-checkable').treeview("checkNode",childNodes[i]); childNodes[i].state.checked = true; /* var nodeid = childNodes[i].nodeId; var liObj = $("li[data-nodeid='"+nodeid+"']"); $(liObj).addClass("node-checked"); var child = $(liObj).child("span.glyphicon-unchecked").eq(0); $(child).attr("class", "icon check-icon glyphicon glyphicon-check"); */ checkNodeEvent(checkNodeEvent.nodeId); } } }

bootstrap treeview 右边显示内容

我的界面分为两部分,左边是treeview树结构(已完成),我想要点击左边的 treeview某个节点,右边会显示相应的div(不同的div是在右边同一位置显示, 每次显示一个div,未点击的节点对应的div不显示)。给点实例啊

bootstrap treeview 如何调用fuction方法来创建树

从github找到的bootstrap-treeview.js文件中有Tree.prototype.buildTree = function(nodes, level)这个方法,但是不知道如何调用这个方法,在自己的js文件中我是这样写的 var $checkableTree = $('#treeview-checkable').treeview({...}),请问该如何成功调用这个方法呢,从后台获取的json格式的数据,应该是拆成一个一个节点和所在的层次嘛,主要就是不知道如何调用buildTree方法。prototype不是应该是对象的引用嘛,那是不是就是通过创建对象来调用方法,哪个才是treeview的对象呢,就是这样。

jquery生成treeview如何获取节点的id

``` <script> $(function(){ var data=[{"id":"36","name":"\u6d4b\u8bd5\u5206\u7c7b","type":"product","pgid":"18"},{"id":"37","name":"\u4e09\u7ea7\u5206\u7c7b","type":"product","pgid":"36"},{"id":"38","name":"7777","type":"product","pgid":"37"},{"id":"53","name":"888","type":"product","pgid":"38"},{"id":"54","name":"99999","type":"product","pgid":"38"},{"id":"55","name":"6666","type":"product","pgid":"26"},{"id":"26","name":"11111","type":"product","pgid":"19"},{"id":"20","name":"\u4ea7\u54c1\u5206\u7c7b","type":"product","pgid":"19"},{"id":"18","name":"\u4ea7\u54c1\u5206\u7c7b","type":"product","pgid":"0"},{"id":"19","name":"\u4ea7\u54c1\u5206\u7c7b","type":"product","pgid":"0"},{"id":"21","name":"11111","type":"product","pgid":"19"},{"id":"22","name":"11111","type":"product","pgid":"19"},{"id":"23","name":"11111","type":"product","pgid":"19"},{"id":"24","name":"11111","type":"product","pgid":"19"},{"id":"25","name":"11111","type":"product","pgid":"19"},{"id":"27","name":"11111","type":"product","pgid":"19"},{"id":"28","name":"11111","type":"product","pgid":"25"},{"id":"29","name":"11111","type":"product","pgid":"25"}]; $('#browser').showTree({data:data,bindings:{ 'pg_update':{ val:'修改', ismy:1, cb:function(t) { // 在这里 如何获取 当前点击的id } }, 'pg_delete':{ val:'删除', ismy:1, cb:function(t) { alert('delete'); } }, 'pg_add':{ val:'新增', ismy:1, cb:function(t) { alert('add'); } } },callback:function(t){ alert('this click'); }}); }); </script> ``` ![](http://pic.wenwen.soso.com/p/20141222/20141222151732-165552506.jpg) 这是运行效果 如何点击节点 获取当前节点id

bootstrap-treeview为什么不显示收展按钮

![图片说明](https://img-ask.csdn.net/upload/202005/29/1590739852_576987.png) 代码如下: ``` <script type="text/javascript"> (function () { function getTree() { $.get("/get_department_tree/", function(data){ {#data = JSON.parse(data);#} if(data.result='ok'){ $('#tree').treeview({ data: data.data, levels : 3, showBorder: true, showTags: true, showCheckbox:1 }); } }); } getTree(); })() </script> ``` 数据格式是这样的: {"data": [{"id": 1, "text": "总经办", "nodes": [{"id": 4, "text": "IT", "nodes": [{"id": 6, "text": "耗材"}], "tags": [1]}, {"id": 5, "text": "软件"}], "tags": [2]}, {"id": 2, "text": "项目部"}, {"id": 3, "text": "商务部", "nodes": [{"id": 7, "text": "采购"}], "tags": [1]}], "result": "ok"}

treeview对节点排序后对应的listview立刻排序

treeview对节点排序后对应的listview立刻排序,排序的结果和treeview要保持一致,怎么实现?

bootstrap-treeview 能否设置背景图片?

用treeview实现如下效果, ![图片说明](https://img-ask.csdn.net/upload/201904/17/1555491801_286818.png) 能否用背景图片实现?

treeview高亮显示查找到的节点,并且展开显示所有选择的节点

treeview高亮显示查找到的节点,并且展开显示所有选择的节点。关闭显示所有其它的节点怎么做?

Treeview设置点击节点跳转到对应页面后,该节点变色

如题,我想在节点比如点击节点A跳到A.aspx,显示是A.aspx之后,在该页面中,这个节点A的背景色是改变了颜色的。还有就是想让treeview相对于所在的表格中居中显示,不过我表格已经设置了valign为Top了,有没有什么方法进行设置。在vs2010下开发的

怎么在TreeView的节点上显示图片?

项目中要求TreeView的节点名称旁边带有图片,怎么实现?有Load属性,可是Load图片的话直接改变了节点标题,而且之前设置的子节点也没了。运行之后也没有显示出对应的图片。

treeview能不能按照所在节点的位置进行排序呢?

treeview能不能按照所在节点的位置进行排序呢?怎么对treeview的同级节点进行排序?递归算法可以实现吗?

treeview 如何判断是否展开

treeview 如何判断是否展开 属性是什么 treeview 如何判断是否展开 **treeview 如何判断是否展开**

怎么取消显示禁用的treeview控件前面的折叠符号

能不能部分禁用treeview的折叠符号?怎么取消显示禁用的treeview控件前面的折叠符号,注意不是全部折叠,全部折叠的代码就不要贴了。

C# 文本框获取TreeView // 新手求助

我创建了一个treeview控件和一个文本框控件,然后在treeview添加了几个父节点和子节点。如图![图片说明](https://img-ask.csdn.net/upload/202001/03/1578019477_743029.png) 我想做到点击a时文本框显示01,点击a.1时文本框显示0101,点击a.1.1时文本框显示010101,点击b时显示02,点击b.1时显示0201,点击b.2时显示0202,如果再添加其他节点也按这个规律显示。。请问要做到这样代码该怎么写(最好能麻烦加上注释)多谢各位大佬了。。拜托拜托

asp.net treeview 自动复制树结构

在asp.net中新加一个TreeView,没有写单击事件,但是调试时,选中一个节点,然后整个treeview都会在下方 复制一个,请问如何解决? 前台代码: ``` <asp:TreeView ID="TreeView1" runat="server" AutoGenerateDataBindings="False" OnSelectedNodeChanged="TreeView1_SelectedNodeChanged" > </asp:TreeView> ```

treeView 使用java+js写的树,可以展开和折叠

treeView 使用java+js写的树,使用datatable-tree.css修饰 只能展开不能折叠,是什么原因 js 代码 function getUnit(){ $.ajax({ async : false, cache : false, dataType: "json", type : "POST", url : '<%=basePath%>cadre/getUnitTree.do', success : function (data){ $.each(data.pds ,function (i ,item){//changeTree是触发函数 var tree = '<ul><li><span><i class="glyphicon glyphicon-folder-open"></i><a onclick="changeTree('+item.UNIT_ID+',\''+item.UNIT_NAME+'\');" style="text-decoration:none;margin-left:4px;cursor:pointer">'+item.UNIT_NAME+'</a></span>'; if(item.child!=null){ tree=Fib(item.child,tree); } tree=tree+'</li></ul>'; $("#tree").append(tree); }); } }); $('unit-.tree li:has(ul)').addClass('parent_li').find(' > span').attr('title', 'Collapse this branch'); $('.unit-ree li.parent_li > span > i').on('click', function (e) { var children = $(this).parent('span').parent('li.parent_li').find(' > ul > li'); if (children.is(":visible")) { children.hide('fast'); $(this).parent('span').attr('title', 'Expand this branch').find(' > i').addClass('glyphicon glyphicon-plus-sign').removeClass('glyphicon glyphicon-minus-sign'); } else { children.show('fast'); $(this).parent('span').attr('title', 'Collapse this branch').find(' > i').addClass('glyphicon glyphicon-minus-sign').removeClass('glyphicon glyphicon-plus-sign'); } e.stopPropagation(); }); } function Fib(pds,tree){ tree = tree + '<ul>'; for(var i = 0;i < pds.length;i++){ if(pds[i].child != null){ tree = tree + '<li><span><i class="glyphicon glyphicon-minus-sign"></i><a ondblclick="changeTree('+pds[i].UNIT_ID+',\''+pds[i].UNIT_NAME+'\');" style="text-decoration:none;margin-left:4px;cursor:pointer">'+pds[i].UNIT_NAME+'</a></span>'; tree = Fib(pds[i].child,tree); }else{ tree = tree + '<li><span><i class="glyphicon glyphicon-leaf"></i><a ondblclick="changeTree('+pds[i].UNIT_ID+',\''+pds[i].UNIT_NAME+'\');" style="text-decoration:none;margin-left:4px;cursor:pointer">'+pds[i].UNIT_NAME+'</a></span>'; } tree = tree + '</li>'; } tree = tree + '</ul>'; return tree; } 执行getUnit函数得到所有数据 ,就是不能折叠树怎么回事 ? 感觉问题出现在jsp页面 ,(注释:我的样式引用正确 bootstrap-treeview.css bootstrap.css js)

2019 Python开发者日-培训

2019 Python开发者日-培训

150讲轻松搞定Python网络爬虫

150讲轻松搞定Python网络爬虫

设计模式(JAVA语言实现)--20种设计模式附带源码

设计模式(JAVA语言实现)--20种设计模式附带源码

YOLOv3目标检测实战:训练自己的数据集

YOLOv3目标检测实战:训练自己的数据集

java后台+微信小程序 实现完整的点餐系统

java后台+微信小程序 实现完整的点餐系统

三个项目玩转深度学习(附1G源码)

三个项目玩转深度学习(附1G源码)

初级玩转Linux+Ubuntu(嵌入式开发基础课程)

初级玩转Linux+Ubuntu(嵌入式开发基础课程)

2019 AI开发者大会

2019 AI开发者大会

玩转Linux:常用命令实例指南

玩转Linux:常用命令实例指南

一学即懂的计算机视觉(第一季)

一学即懂的计算机视觉(第一季)

4小时玩转微信小程序——基础入门与微信支付实战

4小时玩转微信小程序——基础入门与微信支付实战

Git 实用技巧

Git 实用技巧

Python数据清洗实战入门

Python数据清洗实战入门

使用TensorFlow+keras快速构建图像分类模型

使用TensorFlow+keras快速构建图像分类模型

实用主义学Python(小白也容易上手的Python实用案例)

实用主义学Python(小白也容易上手的Python实用案例)

程序员的算法通关课:知己知彼(第一季)

程序员的算法通关课:知己知彼(第一季)

MySQL数据库从入门到实战应用

MySQL数据库从入门到实战应用

机器学习初学者必会的案例精讲

机器学习初学者必会的案例精讲

手把手实现Java图书管理系统(附源码)

手把手实现Java图书管理系统(附源码)

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

极简JAVA学习营第四期(报名以后加助教微信:eduxy-1)

.net core快速开发框架

.net core快速开发框架

玩转Python-Python3基础入门

玩转Python-Python3基础入门

Python数据挖掘简易入门

Python数据挖掘简易入门

微信公众平台开发入门

微信公众平台开发入门

程序员的兼职技能课

程序员的兼职技能课

Windows版YOLOv4目标检测实战:训练自己的数据集

Windows版YOLOv4目标检测实战:训练自己的数据集

HoloLens2开发入门教程

HoloLens2开发入门教程

微信小程序开发实战

微信小程序开发实战

Java8零基础入门视频教程

Java8零基础入门视频教程

相关热词 c# 开发接口 c# 中方法上面的限制 c# java 时间戳 c#单元测试入门 c# 数组转化成文本 c#实体类主外键关系设置 c# 子函数 局部 c#窗口位置设置 c# list 查询 c# 事件 执行顺序
立即提问