bootstrap treeview 增删改的正确姿势
bootstrap treeview 增删改的正确姿势
版权声明：本文为博主原创文章，未经博主允许不得转载。 https://cloud.tencent.com/developer/article/1334406
我的engineercms中大量使用bootstrap treeview，如果不能实现增删改那只能换成ztree了。不过还是找到了解决方法。
网上的方法都是基于https://github.com/jonmiles原版的treeview，采用在源码中增加方法达到目的
bootstrap treeview lazyload懒加载实践
而用google搜索bootstrap treeview addnode，就找到了https://www.npmjs.com/package/patternfly-bootstrap-treeview也就是这个https://github.com/patternfly/patternfly-bootstrap-treeview，这里实现了增删改的方法。
addNode(nodes, parentNode, index, options)
Add nodes to the tree.
$('#tree').treeview('addNode', [ nodes, parentNode, index, { silent: true } ]);If parentNode evaluates to false, node will be added to root If index evaluates to false, node will be appended to the nodes
Triggers nodeRendered event; pass silent to suppress events.
removeNode()
Removes given nodes from the tree.
$('#tree').treeview('removeNode', [ nodes, { silent: true } ]);updateNode(node, newNode, option)
Updates / replaces a given tree node.
$('#tree').treeview('updateNode', [ node, newNode, { silent: true } ]);Triggers nodeRendered event; pass silent to suppress events.
当然，还有其他非常好的方法，比如父子孙节点联动。
hierarchicalCheck
Boolean. Default: false
Whether or not to enable hierarchical checking/unchecking of checkboxes.
propagateCheckEvent
Boolean. Default: false
Whether or not to propagate nodeChecked and nodeUnchecked events to the parent/child nodes, used in conjunction with hierarchicalCheck.
这里的坑，就是nodeid已经不是一个数字，旧版的nodeid是将展开后的tree从上往下排序，1代表最上面那个节点，以此类推。而新的变成了，0.0或者1.0.0.0类似这样的，分别表示第一个一级目录的第一个节点，第二个一级目录下的第三级目录的第一个节点。位数代表分级，数字代表序号。
向选中的节点下添加子节点
function savecate(){
var projcatename2 = $('#projcatename2').val();
var projcatecode2 = $('#projcatecode2').val();
arr=$('#tree').treeview('getChecked');
if (projcatename2)
{
$.ajax({
type:"post",
url:"/admin/project/addprojectcate",
data: {id:arr[0].id,name:projcatename2,code:projcatecode2},//父级id
success:function(data,status){
alert("添加“"+data+"”成功！(status:"+status+".)");
var singleNode = {
text: projcatename2,
id:data,
code:projcatecode2
};
$("#tree").treeview("addNode", [singleNode,arr]);
$('#modalTable2').modal('hide');
}
});
}
}//编辑节点
function updatecate(){
var projcatename3 = $('#projcatename3').val();
var projcatecode3 = $('#projcatecode3').val();
// var parentid = $('#pid').val();
arr=$('#tree').treeview('getChecked');
// var nid = $('#nid').val();//节点顺序号nodeId
// alert(projcatename2);
// alert(nid);
// $.getJSON("treeAddData.json", function (data) {
// });
if (projcatename3)
{
$.ajax({
type:"post",
url:"/admin/project/updateprojectcate",
data: {id:arr[0].id,name:projcatename3,code:projcatecode3},
success:function(data,status){
alert("编辑成功！(status:"+status+".)");
var singleNode = {
text: projcatename3,
id:data,
code:projcatecode3
};
$('#tree').treeview('updateNode', [ arr, singleNode,{ silent: true } ]);
// $('#tree').treeview('updateNode', [ node, newNode, { silent: true } ]);
$('#modalTable3').modal('hide');
}
});
}
}//删除节点
$("#removeButton").click(function() {
arr=$('#tree').treeview('getChecked');
if (arr.length==0){
alert("请先勾选！");
return;
}
var ids="";
for(var i=0;i<arr.length;i++){
if(i==0){
ids=arr[i].id;
}else{
ids=ids+","+arr[i].id;
}
}
// var obj = JSON.stringify(arr);
// alert(arr);
// alert(obj);
if(confirm("确定删除吗？第一次提示！")){
}else{
return false;
}
if(confirm("确定删除吗？一旦删除将无法恢复！")){
$.ajax({
type:"post",
url:"/admin/project/deleteprojectcate",
data: {ids:ids},
success:function(data,status){
alert("删除“"+data+"”成功！(status:"+status+".)");
$('#tree').treeview('removeNode', [ arr, { silent: true } ]);
}
});
}
})