динамическое создание дерева json с использованием базы данных

Question

Недавно я столкнулся с проблемой, которая заключается в следующем: Мне нужно создать дерево json в java/javascript, где данные json tree получены из базы данных MySql. В приведенном выше документе я не смог найти документы Так что помогите мне сделать выше. Спасибо за помощь заранее.

Answer 1

Я думаю, что получение дерева объектов в Java является defficult. Я попробовал. вы можете использовать другой способ. при нажатии папки вы получите файлы папок или папки. здесь я использовал Dropbox Api, чтобы сделать это. пожалуйста, получите от него идею. попробуйте свою идею.

treeview.html:

<!-- Nested list template --> 
       <script type="text/ng-template" id="items_renderer.html"> 
       <div ui-tree-handle> 
       <span ng-show="item.file" class="glyphicon glyphicon-folder-close"></span> 
        <a ng-hide="item.file" class="btn btn-success btn-xs" data-nodrag ng-click="toggle(this);toggleMe(this)"> 
        <span class="glyphicon glyphicon-folder-close" ng-class="{'glyphicon-chevron-right': collapsed, 'glyphicon-chevron-down': !collapsed}"> 
        </span></a> 
        {{item.title}} 
        <a class="pull-right btn btn-danger btn-xs" data-nodrag ng-click="remove(this)"><span class="glyphicon glyphicon-remove"></span></a> 
        <a class="pull-right btn btn-primary btn-xs" data-nodrag ng-click="newSubItem(this)" style="margin-right: 8px;"><span class="glyphicon glyphicon-plus"></span></a> 
       </div> 
       <ol ui-tree-nodes="options" ng-model="item.items" ng-class="{hidden: collapsed}"> 
        <li ng-repeat="item in item.items" collapsed="true" ui-tree-node ng-include="'items_renderer.html'"> 
        </li> 
       </ol> 
       </script> 

       <div ui-tree="options"> 
       <ol ui-tree-nodes ng-model="list" > 
        <li ng-repeat="item in list track by $index" ui-tree-node collapsed="true" ng-include="'items_renderer.html'"></li> 
       </ol> 
       </div> 

      </div> 

      </div> 

     </div> 

     </div> 
    </div> 

treecontroller.js:

app.controller('treeController',['$scope', '$http','fileUpload', function($scope, $http,fileUpload) { 

    console.log("$$$ tree controller has been initialized $$$") 

    /** To get list of files from the dropbox */ 
    var files = []; 
    $scope.list = []; 
    var foldername = ''; 
    /*** we call dropbox cloud when the user wants and we get files and 
    * folders for an initialization*/ 

    $scope.getListOfFiles = function() { 
     var foldername = "/"; 
     $http.get("http://localhost:8080/dropbox_api_.10/dropbox/getListOfFiles/?folderPath=" + foldername) 
     .success(function(data, status) { 
      console.log("List of files from dropbox folder &&&&", angular.toJson(data)); 
      $scope.list = data; 
     }).error(function(data, status, headers, config) { 
      alert('error'); 
     }); 
    } 

    var folders = []; 
    var buildFloderPath = function(scope) { 
     if (scope.$parentNodeScope != null) { 
      folders.push(scope.$parentNodeScope.$modelValue.title); 
      buildFloderPath(scope.$parentNodeScope); 
     } 
    }; 

    /** When we call, we expand tree here and clear when collapse tree*/ 
    $scope.toggleMe = function(scope) { 
     folders = []; 
     foldername=""; 
     if (!scope.collapsed) { 
      var nodeData = scope.$modelValue; 
      folders.push(nodeData.title); 
      buildFloderPath(scope); 
      console.log(angular.toJson(folders)); 

      for (var i = folders.length - 1; i >= 0; i--) { 
       foldername += "/" + folders[i]; 
      } 
      /***/ 
      //continueFileUploading(foldername); 

      $http.get("http://localhost:8080/dropbox_api_.10/dropbox/getListOfFiles/?folderPath=" + foldername) 
      .success(function(data, status) { 
       console.log(" @@@@ Selected path @@@",foldername); 
       console.log("List of files from dropbox folder &&&&", angular.toJson(data)); 
       for (var i = 0; i < data.length; i++) { 
        nodeData.items.push(data[i]); 
       } 
      }).error(function(data, status, headers, config) { 
       alert('error'); 
      }); 
     } 
     else{ 
      var nodeData = scope.$modelValue; 
      nodeData.items = []; 

     } 
    }; 



    $scope.getListOfFiles(); 
    /*****************/ 

    $scope.remove = function(scope) { 
     scope.remove(); 
    }; 

    $scope.toggle = function(scope) { 
     scope.toggle(); 
    }; 

    $scope.newSubItem = function(scope) { 
     var nodeData = scope.$modelValue; 
     nodeData.items.push({ 
      id : nodeData.id * 10 + nodeData.items.length, 
      title : nodeData.title + '.' + (nodeData.items.length + 1), 
      items : [] 
    }); 
    }; 
}]); 

Java:

public ArrayList<String> listDropboxFolders(@RequestParam("folderPath") String folderPath) throws DbxException { 

     ArrayList<String> fileList=new ArrayList<String>(); 
     for (DbxEntry child : listing.children) { 
      //File child; 
      if(child.isFolder()){ 
       fileList.add(child.name); 
       System.out.println("file is theere"+child.name); 
      }else{ 
       System.out.println("file name **"+child.name); 
      } 
      child.toString()); 
     } 
     return fileList;  
    } 

Answer 2

Вам нужен серверный язык для подключения к базе данных MySql и выдает данные клиенту.

Простой пример:

PHP (getJSON.php)

$db = new mysqli('localhost', 'user', 'pass', 'demo'); 

$strSQL = mysqli_query("SELECT ..."); 
$result = $db->query($sql) 
$rows = array(); 
if ($result->num_rows > 0) { 
    while($row = $result->fetch_assoc()) { 
     $rows[] = $row; 
    } 
} 

$db->close() 
print json_encode($rows); 

Javascript/JQuery:

$.ajax({ 
    url: 'http://{your-host}/getJSON.php', 
    dataType: 'JSON', 

    success: function(data, status) { 
     console.log(data) 
    }, 
    error: function(e) { 
     console.log(e.statusText + " : " + e.responseText); 
    } 
}); 

код не проверял, но это поясню это :)