在AngularJS中，将DataTables放在Bootstrap手风琴内部

Question

在AngularJS中，将DataTables放在Bootstrap手风琴内部

angularjsdatatablesangular-datatablesbootstrap-accordion

3

我正在开发一个模块，需要重新设计一些产品。以下是以前产品显示方式的截图。

现在产品将显示在其特定名称的手风琴中。我必须使用ui.bootstrap版本：0.11.0 - 2014-05-01。以下是产品现在将如何显示的草图。在每个手风琴中，将有该特定产品的数据表格，其中列将动态生成，并且我们将能够检查我们想要的特定产品。

以下是我的HTML代码：

                <accordion>
                    <accordion-group ng-repeat="AllProduct in AllProducts">
                        <accordion-heading>
                            {{AllProduct.TypeName}}
                           </accordion-heading>

                    </accordion-group>
                    <table id="dtVoice" class="table manage-user-table offer-mgt-table" dt-options="dtOptions" dt-columns="dtColumns"></table>
                </accordion>

我用动态方式创建数据表的方法如下：

 dtColumns.push(DTColumnBuilder.newColumn(null).withTitle('').notSortable()
          .renderWith(function(data, type, full, meta) {
              return '<input type="checkbox" ng-model="showCase.selected[' + data.id + ']"/>';
          }));

        for (var key in $scope.VoiceProducts[0]) {
            if (key == "ProductName" || key == "LongDistanceMinutes" || key == "IsCallWaiting") {
                dtColumns.push(
                  DTColumnBuilder.newColumn(key).withTitle(key)

                )
            }

            $scope.dtColumns = dtColumns;
            $scope.dtOptions = DTOptionsBuilder.newOptions()
              .withOption('data', $scope.VoiceProducts)
              .withOption('dataSrc', '')


            angular.element('#dtVoice').attr('datatable', '')
        }
       $compile(angular.element('#dtVoice'))($scope);

以下是我的 JSON。

 [
  {
    "ProductList": [
      {
        "ProductName": "Voice",
        "IsActive": false,
        "IsDeleted": false,
        "LongDistanceMinutes": "",
        "IsCallWaiting": "",
        "CallWaitingId": "",
        "IsThreeWayCalling": "",
        "IsCallerId": "",
        "IsCallForwarding": "",
        "IsCallRejection": "",
        "ID": 552,
        "OfferId": 0
      }
    ],
    "ID": 2,
    "IsActive": false,
    "IsDeleted": false,
    "TypeName": "Voice"
  }
]

如何将这个数据表格放在手风琴中？无论我怎么做，都无法实现。

- Sana Ahmed

1

你的问题是什么？ - user320487

如何将这个数据表放在手风琴里？因为无论我做什么，都无法实现它。 - Sana Ahmed

http://jsfiddle.net/manedeepak08/eV37v/1/ - user320487

非常感谢，但我需要使用数据表的动态列和Bootstrap手风琴作为边界来实现它。 - Sana Ahmed

请检查此代码并解释需要做什么 https://codepen.io/anon/pen/rpbzpX - Patata

我已经添加了一个新的答案来解决你的问题。 - bhantol

2个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Leonardo Neninger · Answer 1

我之前也遇到了同样的问题。请使用ng-if作为标志，在手风琴项处于激活状态时重新创建表格。手风琴和选项卡组件会避免表格被显示。

下面的代码可以帮助解决问题。注意ng-click和ng-if的用法。

<accordion>
                <accordion-group ng-repeat="AllProduct in AllProducts">
                    <accordion-heading ng-click="setGroup('AllProduct.TypeName')">
                        {{AllProduct.TypeName}}
                       </accordion-heading>

                       <table id="dtVoice" ng-if="group=='AllProduct.TypeName'" class="table manage-user-table offer-mgt-table" dt-options="dtOptions" dt-columns="dtColumns"></table>

                </accordion-group>

            </accordion>

- bhantol · Answer 2

更新：根据新信息（使用angular-datatable）

现在的解决方案是计算每个手风琴组的列和选项。

带有2个手风琴组的工作Plunker

如下所示，在HTML中，选项和列是针对每个手风琴计算的。

<table datatable class="table manage-user-table offer-mgt-table"  dt-options="getDtOptions(AllProduct)" dt-columns="getDtColumns(AllProduct)"></table>

Angular代码展示了getDtColumns和getDtOptions。我为演示目的保持了数据非常简单，并复制了当前的dtColumns代码，但您可以自定义它，以便您甚至可以拥有多种类型的表格：

var app = angular.module('myApp', ['ui.bootstrap', 'datatables']);
app.controller('myCtrl', function($scope, DTColumnBuilder, DTOptionsBuilder, DTColumnDefBuilder, $timeout, AllProducts) {
  $scope.AllProducts = AllProducts


  $scope.getDtColumns = function(allProduct) {
    var items = allProduct.ProductList;
    if (allProduct.dtColumns) allProduct.dtColumns.length = 0;
    allProduct.dtColumns =  allProduct.dtColumns || [];
    var dtColumns = allProduct.dtColumns;
    dtColumns.push(DTColumnBuilder.newColumn('').withTitle('').notSortable()
      .renderWith(function(data, type, full, meta) {
        return '<input type="checkbox" ng-model="showCase.selected[' + full.id + ']"/>';
      }));


    for (var key in items[0]) {
      if (key == "ProductName" || key == "LongDistanceMinutes" || key == "IsCallWaiting") {
        dtColumns.push(
          DTColumnBuilder.newColumn(key).withTitle(key).notSortable()
        )
      }
    }

    return dtColumns;
  };

  $scope.getDtOptions = function(allProduct) {
    if (allProduct.options) return allProduct.options;
    var items = allProduct.ProductList;
    allProduct.options = allProduct.options || DTOptionsBuilder.newOptions().withOption('aaData', items);
    return allProduct.options;     
  };


});

没有使用angular-datatable的旧答案

首先，我不建议在AngularJS应用程序中使用jQuery DataTable或任何其他jQuery组件。我个人尽量避免捆绑jQuery或使用jQuery进行DOM操作。

但是，为了让您开始使用您所拥有的内容，我建议采取以下措施：

删除这两行代码，因为仅动态添加这些属性datatable不会触发DataTable绑定：

angular.element('#dtVoice').attr('datatable', '')
        }
       $compile(angular.element('#dtVoice'))($scope);

并尝试使用类似以下方式：

$('#dtVoice').DataTable( {columnDefs: $scope.dtColumns });

此外，为了进一步整理代码，我创建了一个新的指令（只是口胡）：

app.directive('myDatatable`, function(){
return {
   restrict: 'A',
   scope: {
       'dtColumns': '='
   }
   link: function($scope, elem, attr) {
        $('#dtVoice').DataTable( {columnDefs: $scope.dtColumns});    
   } 
};
});

你的表格大致如下：

<table id="dtVoice" 
    class="table manage-user-table offer-mgt-table" 
      dt-options="dtOptions" 
      dt-columns="dtColumns" my-datatable></table>