angularjs中的引导手风琴内的数据表

Posted 2023-05-07

【中文标题】angularjs中的引导手风琴内的数据表

【英文标题】：DataTables inside bootstrap accordion in angularjs

【发布时间】：2018-06-27 14:57:53

【问题描述】：

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

现在产品将显示在其特定名称的手风琴内。我一定会使用 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"
  
]

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

【问题讨论】：

你的问题到底是什么？

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

jsfiddle.net/manedeepak08/eV37v/1

非常感谢，但我需要以 bootrap 手风琴为边界的数据表的动态列来实现它。

检查并解释需要做什么codepen.io/anon/pen/rpbzpX

【参考方案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>

【讨论】：

您是否能够在数据表的第一列中添加复选框并按 Id 检查行？

【参考方案2】：

更新：根据新信息（使用角度数据表）

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

Working Plunker with 2 accordion groups

正如您在下面的 HTML 中所见，选项和列是按手风琴计算的。

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

显示 getDtColumns 和 getDtOptions 的 Angular 代码。出于演示目的，我将数据保持得很简单，并复制了当前的 dtColumns 代码，但是您可以对其进行自定义，以便您甚至可以拥有超过 1 种类型的表格：

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


);

没有角度数据表的旧答案

首先，我不推荐在 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>

【讨论】：

没有帮助。仍然没有渲染

你在使用角度数据表吗？

角度数据表 - v0.6.2

每个数据表已经默认启用了分页，可以在 plnkr.co/edit/JduhBW5XW3zZDLSHCMhD?p=preview 你能看到分页吗？

由 .withOption('dom','tp>')