所以问题本身就说明了这一点。我做了一个例子here
或者查看这段代码:
html
<div id="jstree">
<ul>
<li>Root
<ul>
<li>Parent1
<ul>
<li>Child1</li>
<li>Child2</li>
</ul>
</li>
<li>Parent2
<ul>
<li>Child1</li>
<li>Child2</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div class="form-group">
<input id="left" type="file" class="file" data-upload-url="/upload">
</div>
js
var array = [
{
"name": "Parent1",
"id": "1",
"description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) "
},
{
"name": "Parent2",
"id": "2",
"description": "A jQuery plugin to select multiple elements with checkboxes :)"
},
{
"name": "Parent1",
"id": "3",
"description": "Show/hide password plugin for twitter bootstrap."
}
];
var array2 = [
{
"subname": "Parent101",
"subid": "101",
"description": "An extended Bootstrap table with radio, checkbox, sort, pagination, and other added features. (supports twitter bootstrap v2 and v3) "
},
{
"subname": "Parent202",
"subid": "202",
"description": "A jQuery plugin to select multiple elements with checkboxes :)"
},
{
"subname": "Parent101",
"subid": "303",
"description": "Show/hide password plugin for twitter bootstrap."
}
];
var $table = $('#table');
var $study = $('#jstree');
$(function () {
$table.bootstrapTable({
formatNoMatches: function () {
return "This table is empty...";
}
});
$('#jstree')
.on('select_node.jstree', function(event, data){
// ===== Initialize parent =====
var loMainSelected = data;
uiGetParents(loMainSelected);
function uiGetParents(node) {
try {
var level = node.node.parents.length;
var elem = $('#' + node.node.id);
var parent = node.node.text;
for (var ln = 0; ln <= level - 1; ln++) {
elem = elem.parent();
var child = elem.children()[-1];
if (child != undefined) {
parent = child.text;
}
}
console.log(parent);
}
catch (err) {
console.log('Error in uiGetParents');
}
}
// ===== Click event on node =====
for(var i = 0; i < data.selected.length; i++) {
var node = data.instance.get_node(data.selected[i]).text;
if (node == "Child1") {
$(function () {
$table.bootstrapTable('refreshOptions',
{
data: array,
columns: [
{
title:"Name",
field:"name"
},
{
title:"Id",
field:"id"
},
{
title:"Description",
field:"description"
}
]
});
});
}
else if (node == "Child2"){
$(function () {
$table.bootstrapTable('refreshOptions',
{
data: array2,
columns: [
{
title:"Subname",
field:"subname"
},
{
title:"Subid",
field:"subid"
},
{
title:"Description",
field:"description"
}
]
});
});
}
}
})
.jstree({
"core" : {
"themes": {
"url": true,
"icons": true,
"dots": true
}
}
});
});
我想创建拖放节点，以便用户可以将其拖放到可放置窗口中，然后他将看到包含数据的表格。分开一切都工作正常。 Jstree 正在加载，单击时的事件处理程序运行良好，您可以通过单击查看表格，甚至拖放窗口也可以正常运行并显示用户将放入其中的每个文件，但如何连接所有这些东西，有人知道吗？
最佳答案
为此，您必须使用 dnd 插件并监听拖放事件，如下所示。查看演示 - Fiddle .
$(document).on('dnd_stop.vakata', function(e, data) {
for (var i = 0; i < data.data.nodes.length; i++) {
var node = $('#jstree').jstree().get_node(data.data.nodes[i]).text;
if (node == "Child1") {
$table.bootstrapTable('refreshOptions', {
data: array,
columns: [{
title: "Name",
field: "name"
}, {
title: "Id",
field: "id"
}, {
title: "Description",
field: "description"
}]
});
} else if (node == "Child2") {
$table.bootstrapTable('refreshOptions', {
data: array2,
columns: [{
title: "Subname",
field: "subname"
}, {
title: "Subid",
field: "subid"
}, {
title: "Description",
field: "description"
}]
});
}
}
});
关于javascript - 设置拖放子节点以在表格中显示json数组，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35805429/