设置拖放子节点来显示表中的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正在加载，点击eventHandler的效果很好，你可以通过点击来查看表格，甚至拖放窗口也能正常工作，并显示每个用户将放入其中的文件，但如何连接所有这些东西，有没有人想法？

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" 
       }] 
      }); 

     } 
    } 
});