javascript - 设置拖放子节点以在表格中显示json数组

Question

所以问题本身就说明了这一点。我做了一个例子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 正在加载，单击时的事件处理程序运行良好，您可以通过单击查看表格，甚至拖放窗口也可以正常运行并显示用户将放入其中的每个文件，但如何连接所有这些东西，有人知道吗？

Answer 1

为此，您必须使用 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"
                }]
            });

        }
    }
});