角度数据表添加＆＃34;树视图＆＃34;

时间：2014-08-20 17:23:31

标签： javascript json angularjs

我需要一些帮助来修改ng表以添加树功能 - 以便在主节点下扩展其他嵌入式JSON数组。

<html>
<head>
    <script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
    <script data-require="ng-table@*" data-semver="0.3.1" src="http://bazalt-cms.com/assets/ng-table/0.3.1/ng-table.js"></script>

    <link data-require="ng-table@*" data-semver="0.3.1" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.1/ng-table.css" />
    <link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />

    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
</head>

<body ng-app="main" ng-controller="DemoCtrl">


    <button ng-click="tableParams.sorting({})" class="btn btn-default pull-right">Clear sorting</button>
    <p><strong>Sorting:</strong> {{tableParams.sorting()|json}}

    <table ng-table="tableParams" class="table">
        <tr ng-repeat="user in $data">
            <td data-title="'Name'" sortable="'name'">
                {{user.name}}
            </td>
            <td data-title="'Age'" sortable="'age'">
                {{user.age}}
            </td>
        </tr>
    </table>

</body>
</html>

然后编写我想要修改JSON数据源的代码：

var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($scope, $filter, ngTableParams) {
    var data = [{name: "Moroni", age: 50},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34},
                {name: "Tiancum", age: 43},
                {name: "Jacob", age: 27},
                {name: "Nephi", age: 29},
                {name: "Enos", age: 34}];

    $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 10,          // count per page
        sorting: {
            name: 'asc'     // initial sorting
        }
    }, {
        total: data.length, // length of data
        getData: function($defer, params) {
            // use build-in angular filter
            var orderedData = params.sorting() ?
                                $filter('orderBy')(data, params.orderBy()) :
                                data;

            $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
    });
});

此示例位于此处：[http://plnkr.co/edit/5SQ2YB?p=info][1]

我的自定义JSON看起来像：

[{
    "name": "Tiancum",
    "age": "43",
    "favoriteCars": [{
        "name": "Audi",
        "engines": [{
            "type": "diesel",
            "size": "big"
        },
        {
            "type": "gas",
            "size": "small"
        }]
    },
    {
        "name": "Subaru",
        "engines": [{
            "type": "diesel",
            "size": "big"
        },
        {
            "type": "gas",
            "size": "small"
        }]
    }]
},
{
    "name": "JAcob",
    "age": "54",
    "favoriteCars": [{
        "name": "BMW",
        "engines": [{
            "type": "diesel",
            "size": "big"
        },
        {
            "type": "gas",
            "size": "small"
        }]
    },
    {
        "name": "VW",
        "engines": [{
            "type": "diesel",
            "size": "big"
        },
        {
            "type": "gas",
            "size": "small"
        }]
    }]
}]

我想要实现的是使嵌入式JSON数组像这里一样可扩展： [http://jsfiddle.net/eu81273/8LWUc/18/][2]

有什么想法可以快速解决这个问题吗？

2 个答案:

答案 0 :(得分：0)

如果要为树允许任意深度，则需要创建某种指令来相应地呈现数据。上周有人在AngularJS IRC中分享了这个Plunkr，其中显示了如何通过指令从提供的数据递归生成模板的示例：http://plnkr.co/edit/hhLOmGkNnQj0MrcJgyFi

希望这是一个不错的起点。作为参考，基本思路是：

angular.module('test', []).directive('blockAttributeMenu', ['$compile',
  function($compile) {
    var Template = '<ul> <li ng-repeat="attribute in (children | orderBy:\'position\')"> {{ attribute.name }}<block-attribute-menu children="attribute.children"/></li> </ul>';
    return {
      restrict: 'E',
      scope: {
        'children': '='
      },
      // replace: true,
      // template: Template
      compile: function(tElement, tAttrs) {
        return function(scope, element, attrs) {

          element.append(Template);
          $compile(element.contents())(scope);
        }
      }
    };
  }
]);

编辑：

好吧，如果你只是要求格式化稍微缩进节点并且你可以保证最大深度为3级（body>tr>td），你可以放弃一些简单的东西：

  1. 按BodyId，然后TrId，然后TdId对数组进行排序。
  2. 循环遍历数组，将每个元素作为<tr>附加到DOM，每个属性都有<td>个节点
  3. 对于ID列，只需使用条件来测试您的三个备选方案（TrId == null，TdId == null，else）并相应地更改缩进级别
  4. 如果您仍然支持显示/隐藏功能，您还需要向所有应该隐藏的元素添加ng-show之类的内容，并在每一行重复此操作;例如，对ng-show="show_body2"除了父级之外的所有元素BodyId == 2，然后为下一级别添加ng-show="show_body2_tr1"等等。您可以使用ng-click="!show_body2_tr1"这样的简单切换完成它。或者，你可以在一个修改DOM的javascript函数中做同样的事情，但是你不会学习更多Angular你会这样做;）

答案 1 :(得分：0)

[
    {
        "BodyId": 1,
        "TrId": null,
        "TdId": null,
        "Description": "Text Text"
    },
    {
        "BodyId": 2,
        "TrId": null,
        "TdId": null,
        "Description": "Text Text"
    },
    {
        "BodyId": 3,
        "TrId": null,
        "TdId": null,
        "Description": "Text Text"
    },
    {
        "BodyId": 1,
        "TrId": 1,
        "TdId": null,
        "Description": "Text Text"
    },
    {
        "BodyId": 1,
        "TrId": 2,
        "TdId": null,
        "Description": "Text Text"
    },
    {
        "BodyId": 2,
        "TrId": 1,
        "TdId": null,
        "Description": "Text Text"
    },
    {
        "BodyId": 2,
        "TrId": 2,
        "TdId": null,
        "Description": "Text Text"
    },
    {
        "BodyId": 3,
        "TrId": 1,
        "TdId": null,
        "Description": "Text Text"
    },
    {
        "BodyId": 3,
        "TrId": 2,
        "TdId": null,
        "Description": "Text Text"
    },
    {
        "BodyId": 1,
        "TrId": 1,
        "TdId": 1,
        "Description": "Text Text"
    },
    {
        "BodyId": 1,
        "TrId": 1,
        "TdId": 2,
        "Description": "Text Text"
    },
    {
        "BodyId": 1,
        "TrId": 2,
        "TdId": "1",     
        "Description": "Text Text"
    },
    {
        "BodyId": 2,
        "TrId": 1,
        "TdId": 1,
        "Description": "Text Text"
    },
    {
        "BodyId": 2,
        "TrId": 1,
        "TdId": 2,
        "Description": "Text Text"
    },
    {
        "BodyId": 2,
        "TrId": 2,
        "TdId": 1,
        "Description": "Text Text"
    },
    {
        "BodyId": 3,
        "TrId": 3,
        "TdId": 1,
        "Description": "Text Text"
    }
]

所以给这个JSON我试图实现这个结构：

Data Structure

感谢所有帮助！

相关问题
最新问题