如何使用Nodejs + angular JS和MySQL创建动态树视图

时间:2014-03-23 02:21:52

标签: javascript json node.js angularjs treeview

我尝试从由三个字段组成的数据库创建TreeView:id,name和parent_id

[{
    "id": 1,
    "name": "Computer",
    "parent_id": "5",
},{
    "id": 2,
    "name": "Computer",
    "parent_id": "1",
}]

我无法创建我是javascript和angular JS的初学者 我需要你的帮助,并提前感谢你

DB.js

exports.selectCategory = function(callback){
    var objBD = BD();
    objBD.query('SELECT * FROM treeview_items', callback);
}
在函数SelectCategory

之后

JSON

enter image description here

customer.js

function category(req, res) {
    db.selectCategory(function(err, results){
        if (err) return res.send(500, "DB QUERY ERROR");
        var source = [];
        var items = [];

        // build hierarchical source.
        for (i = 0; i < results.length; i++) {
            var item = results[i];
            var label = item["name"];
            var parentid = item["parent_id"];
            var id = item["id"];

            if (items[parentid]) {
                var item = { parentid: parentid, label: label, item: item };

                if (!items[parentid].items) {
                    items[parentid].items = [];
                }

                items[parentid].items[items[parentid].items.length] = item;
                items[id] = item;

            }
            else {
                items[id] = { parentid: parentid, label: label, item: item };
                source[id] = items[id];
           }
       }
       res.json(items);
   });
}

功能类别

之后的JSON

enter image description here

server.js

     app.get('/api/treeview',customer.categories);

my controller.js

function TreeView($scope,$http){ 
    $http.get('/api/treeview').success(function(data){ 
        var Gen = function (parent, data) {
            $.each(data, function () {
                if (this.label) {
                    var li = $("<li>" + this.label + "</li>");
                    li.appendTo(parent);

                    // if there are sub items, call the Gen function.
                    if (this.data && this.data.length > 0) {
                        var ul = $("<ul></ul>");
                        ul.appendTo(li);
                        buildUL(ul, this.data);
                    }
                }
            });
        }
        $(document).ready(function(e) {
            var ul = $("<ul></ul>");
            ul.appendTo("#main");
            Gen(ul, data);
        });
    })  
}

page.html中

      <div id="main"></div>

目标:
image of tree view

1 个答案:

答案 0 :(得分:0)

也许我在这里有点晚了,但在我自己对Angular研究的树视图中,我偶然发现了这篇文章。我实际上看不到你在哪里定义了html treeview小部件,

即。 <span id="treeview" kendo-tree-view="tree" k-options="vm.treeOptions" k-data-source="vm.hierarchy" />

毕竟,你有没有得到任何决议?