我使用 jsTree plugin 在树视图结构中显示数据。但是，我想在单个节点上有一个删除图标/按钮，点击它后，节点应该被删除（如果它是父节点，那么它的子节点也应该被删除）
目前我现在拥有的是：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsTree test</title>
<link rel="stylesheet" href="dist/themes/default/style.min.css" />
</head>
<body>
<div class="row">
<div class="col-md-4 col-sm-8 col-xs-8">
<button onclick="demo_create();" class="btn btn-success btn-sm" type="button"><i class="glyphicon glyphicon-asterisk"></i> Create</button>
<button onclick="demo_rename();" class="btn btn-warning btn-sm" type="button"><i class="glyphicon glyphicon-pencil"></i> Rename</button>
<button onclick="demo_delete();" type="button"><i class="glyphicon glyphicon-remove"></i> Delete</button>
</div>
<div style="text-align:right;" class="col-md-2 col-sm-4 col-xs-4">
<input type="text" placeholder="Search" id="demo_q" style="box-shadow:inset 0 0 4px #eee; width:120px; margin:0; padding:6px 12px; border-radius:4px; border:1px solid silver; font-size:1.1em;" value="">
</div>
</div>
<div id="jstree" style="width:100%">
<ul>
<li id="1">Root node 1
<ul>
<li id="2" style="display:inline-block;">
<div style="display:inline-block;text-align:left;width:500px" >Child node 1</div>
<div style="display:inline-block;text-align:right;" >Duration</div>
<div style="display:inline-block;text-align:right; width:150px;" ><button onclick="demo_delete();" type="button">×</button></div>
</li>
<li id="3">Child node 2</li>
<li id="4">Child node 3
<ul>
<li id="5">Child Node 3.1</li>
<li id="6">Child Node 3.2</li>
<li id="7">Child Node 3.3</li>
</ul>
</li>
</ul>
</li>
<li id="8">Root node 2</li>
<li id="9">Root node 3
<ul class="jstreeul">
<li id="10" style="display:inline-block; width:100px;">
<div style="display:inline-block;text-align:left;width:500px" >Child node 1</div>
<div style="display:inline-block;text-align:right;" >Duration</div>
</li>
</ul>
</li>
</ul>
</div>
<script src="dist/libs/jquery.js"></script>
<script src="dist/jstree.min.js"></script>
<script src="dist/jquery-ui.js"></script>
<script>
function demo_create() {
var ref = $('#jstree').jstree(true),
sel = ref.get_selected();
if(!sel.length) { return false; }
sel = sel[0];
sel = ref.create_node(sel, {"type":"file"});
if(sel) {
ref.edit(sel);
}
};
function demo_rename() {
var ref = $('#jstree').jstree(true),
sel = ref.get_selected();
if(!sel.length) { return false; }
sel = sel[0];
ref.edit(sel);
};
function demo_delete() {
var ref = $('#jstree').jstree(true),
sel = ref.get_selected();
if(!sel.length) { return false; }
ref.delete_node(sel);
};
$(function () {
var to = false;
$('#jstree').keyup(function () {
if(to) { clearTimeout(to); }
to = setTimeout(function () {
var v = $('#jstree').val();
$('#jstree').jstree(true).search(v);
}, 250);
});
});
$(function () {
$("#jstree").jstree({
"core" : {
"check_callback" : function (op, node, par, pos, more) {
if(more && more.dnd) {
return true;
}
}
},
"plugins" : [ "contextmenu", "dnd", "search", "state", "types", "wholerow", "contextmenubtn" ]
});
$('#jstree').on("move_node.jstree", function (e, data) {
var v = $('#jstree').jstree(true).get_json();
var mytext = JSON.stringify(v);
$.ajax({
type: 'POST',
url: "http://localhost/test.php",
data: {treedata: mytext},
dataType: "text",
success: function(resultData) {alert(resultData);alert("Save Complete") }
});
alert(mytext);
return true;
});
});
</script>
</body>
</html>
注意： 这不包括我想要的内容。
基本上，我想一键删除节点。由于我的树将包含超过1000个节点，因此选择第500个节点然后向上/向下滚动以单击删除按钮不是一个好主意。相反，我希望每个节点都有一个删除/添加按钮，可以直接删除或创建子节点。
有没有人为此解决问题？