使用数据库创建javascript动态json树

Question

我最近遇到一个问题，问题如下： 我需要在java/javascript中创建一个json树，其中json树的数据是从MySql数据库获取的。 在上面我找不到文件 所以请帮我做上面的。 提前谢谢你的帮助

Answer 1

您需要一种服务器端语言来连接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);
   }
});

代码未经测试，但基本上是这样：）

Answer 2

我认为在java中获取树对象是很困难的。我试过了。你可以用另一种方法。单击文件夹时，您将进入文件夹文件或文件夹在这里我使用dropbox Api来实现它。请从中得到一个想法。试试你的主意

树景。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>

树控制器。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 : []
    });
    };
}]);

爪哇：

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;    
    }