参考(AddNode: http://blog.csdn.net/qq_25628235/article/details/51719917,deleteNode:http://blog.csdn.net/u012718733/article/details/53288584

Bootstrap treeview增加或者删除节点

功能说明:展开节点时,新增子节点。选中节点时,删除节点

第一步:在bootstrap-treeview.js文件中,在Tree主函数return {/*在这里添加addNode的入口*/ 和 {/*在这里添加deleteNode的入口*/}

 //添加节点
addNode: $.proxy(this.addNode, this),
//删除节点
deleteNode: $.proxy(this.deleteNode, this),
setDeleteNode: $.proxy(this.setDeleteNode, this),

第二步:添加Tree的prototype方法

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);
};
}; Tree.prototype.deleteNode = function (identifiers, options) {
this.forEachIdentifier(identifiers, options, $.proxy(function (node, options) {
var parentNode = this.getParent(node);
this.setDeleteNode(parentNode, node, options);
}, this));
}; Tree.prototype.setDeleteNode = function (node, deletenode, options) {
if (node.nodes != null) {
for (var i = node.nodes.length - 1; i >= 0; i--) {
var mynode = node.nodes[i];
if (mynode.id === deletenode.id) {
node.nodes.splice(i, 1);
}
}
this.setInitialStates({ nodes: this.tree }, 0);
this.render();
}
};

第三步 调用

<div id="tree1"></div>

Json数据

  function getTree() {
var data = [
{
text: "p1",
id: '0',
nodes: [
{ text: "p1-1", id: '1' },
{ text: "p1-2", id: '2' },
{ text: "p1-3", id: '3' },
{
text: "p1-4",
id: '4',
nodes: [
{
text: 'p1-1-1',
id: '5'
}
]
}
]
}
];
return data;
}

绑定Treeview

 $("#tree1")
.treeview({
data: getTree(),
showIcon: false,
showCheckbox: true,
onhoverColor: "#E8E8E8",
showBorder: false,
showTags: true,
highlightSelected: true,
highlightSearchResults: false,
selectedBackColor: "#8D9CAA",
levels: 2,
onNodeSelected: function(event, data) {
alert(data.nodeId);
if (data.nodes === undefined || data.nodes === null) {
return;
}
$("#tree1").treeview("deleteNode", [data.nodeId, { silent: true }]);
//nodeData是checkedNode或者selectedNode,选中或者checked这个节点, 该节点如果有父节点的话就会被删除。
},
onNodeExpanded:
function(event, data) {
$.ajax({
type: "Post",
url: "/Bootstrap/GetExpandJson?id=" + data.id,
dataType: "json",
success: function (result) {
for (var index = 0; index < result.length; index++) {
var item = result[index];
$("#tree1")
.treeview("addNode",
[
data.nodeId,
{ node: { text: item.text, id: item.id }, silent: true }
]);
}
}
});
}
});

Bootstrap treeview增加或者删除节点的更多相关文章

  1. Redis集群动态增加和删除节点

    一.添加节点 1.首先将需要添加的节点启动: 这里启动redis6383.conf和redis6393.conf两个节点 查看原有节点:           3个主节点所对应的哈希槽(hash slo ...

  2. hdfs以及hbase动态增加和删除节点

    一个知乎上的问题:Hbase的Region server和hadoop的datanode是否可以部署在一台服务器上?如果是的话,二者是否是一对一的关系?部署在同一台服务器上,可以减少数据跨网络传输的流 ...

  3. js 删除节点

    亲身经历,寻得此法,告知大家=============== 在javascript操作dom树的时候可能会经常遇到增加,删除节点的事情,比如一个输入框后一个增加按钮,一个删除按钮,点击增加就增加 个输 ...

  4. 初始化bootstrap treeview树节点

    最近在做启明星图库时,使用了Jquery Bootstrap  Treeview插件.但是,遇到了一个初始化的问题.先看效果如下: 当用户打开图库时,左边分类第一个类别是“所有分类”,默认需要选中. ...

  5. Redis集群增加节点和删除节点

    本文主要是承接上一篇文章Redis集群的离线安装成功以后,我们如何进行给集群增加新的主从节点(集群扩容)以及如何从集群中删除节点(集群缩容),也就是集群的伸缩,集群伸缩的原理是控制虚拟槽和数据在节点之 ...

  6. Docker swarm集群增加节点和删除节点

    Docker swarm集群增加节点 docker swarm初始化 docker swarm init docker swarm 增加节点 在已经初始化的机器上执行:# docker swarm j ...

  7. Hadoop动态增加节点与删除节点

    Hadoop的全分布式安装网上也很多教程,踩过很多坑,整理不出来了……赶紧把增加删除节点留住. 均衡数据 (1)设置数据传输带宽为64M(默认值比较低) hdfs dfsadmin -setBalan ...

  8. bootstrap jQuery Ztree异步载入数据,check选择&amp;可加入、改动、删除节点

    效果图: 一.下载zTree插件 地址:http://www.ztree.me 二.html代码 <link href="../Scripts/zTree/css/zTreeStyle ...

  9. 使用DOM解析XML文件,、读取xml文件、保存xml、增加节点、修改节点属性、删除节点

    使用的xml文件 <?xml version="1.0" encoding="GB2312" ?> <PhoneInfo> <Br ...

随机推荐

  1. Vue.js devtool插件安装后无法使用的解决办法【最简单有效的解决方法】

    在开发vue相关的项目时,使用vue devtools工具是一件极其有趣的事,你所有的操作都马上给你实时反馈. 然而有时候安装好的工具,在chrome中不显示. 在网上找过多次,一直没有找到有效解决方 ...

  2. scrollview中edittext失去焦点问题

    //edittext获取焦点后会瞬间失去,暂时使用这种笨方法解决(获取到焦点后过300ms再获取一次) public void requesFocus() { mEditName.setOnFocus ...

  3. python 11

    # 一.闭包 # # 判断:函数名.__closure__ # 若返回cell,则是闭包,返回None则不是闭包. # # 闭包:内层函数对外层函数非全局变量的引用就叫闭包. def func1(x) ...

  4. Windows下部署Apache RocketMQ

    一:环境准备: Windows.JDK1.8+.Maven.Git 二:RocketMQ准备:  1.http://rocketmq.apache.org/release_notes/release- ...

  5. 一个权重的物体拷贝权重给多个(oneWeightToMany)

    你是否在做项目的时候经常会遇见一个物体带权重需要拷贝给其他物体,这时候其他物体多的数不胜数 你怎么办呢? 举例:假如一头狮子 身体你已经做好了,但是模型师把半个身体都做满了垂落的实体模型毛发,你是否感 ...

  6. python 第三方库

    1.tqdm 进度条 from tqdm import tqdm for i in tqdm(range(10000)): pass 2.fire 自动创建命令行接口(command line int ...

  7. C++动态链接库方法调用

    //定义内存的信息结构 [StructLayout(LayoutKind.Sequential)] public struct MEMORY_INFO { public uint dwLength; ...

  8. [C]最大公约数和最小公倍数

    /*求最大公约数和最小公倍数 编写程序,在主函数中输入两个正整数 a,b,调用两个函数 fun1() 和 fun2(),分别求 a 和 b 的最大公约数和最小公倍数,在主函数中输出结果. */ #in ...

  9. Junit单元测试随笔

    Junit单元测试随笔 Mooctest 使用心得: Mooctest IDE非常适合新手使用,相比于Eclipse,他免去了配置环境的麻烦.eclipse中 Junit 编写代码经验总结 刚开始写测 ...

  10. 在经过身份验证的服务中不支持跨域 javascript 回调

    在 asp.net web forms 站点中做了一个 wcf restful service 接口,开启了webforms 身份认证. 当 webforms 站点用户登录之后,访问 restful ...