angularjs的Bootstrap手风琴内的DataTables [英] DataTables inside bootstrap accordion in angularjs
问题描述
我正在开发一个必须重新设计某些产品的模块。以下是产品以前如何显示的屏幕截图。
I am working on a module where I have to redesign some products. Following is the screenshot of how the products used to get displayed previously.
现在，产品将显示在其特定名称的手风琴中。我必须使用ui.bootstrap版本：0.11.0-2014-05-01。以下是现在如何展示产品的草图。在每个手风琴中，将有一个特定产品的数据表，其中的列将动态生成，我们将能够检查所需的特定产品。
Now the products will be displayed inside accordion of their specific name. I am bound to use ui.bootstrap Version: 0.11.0 - 2014-05-01. Following is a sketch of how the products will be displayed now. In each accordion there will be a datatable of that particular product in which the columns will dynamically generate and we would be able to check the particular products we want.
以下是我的html代码：
Following is my html code:
<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>
我动态创建数据表的方式如下：
The way i have dynamically created datatables are as follows:
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"
}
]
如何放置datatable里面的手风琴？因为做任何事情，我都无法实现。
How to put this datatable inside accordion? Because by doing whatever I'm, i'm unable to achieve it.
推荐答案
更新：根据新信息（使用angular-datatable）
现在，解决方案归结为计算每个手风琴组的列和选项。
The solution now boils down to computing the columns and options per accordion-group.
如下面的HTML所示，选项和列是按手风琴计算的。
As you can see in the HTML below the options and columns are computed per accordion.
<table datatable class="table manage-user-table offer-mgt-table" dt-options="getDtOptions(AllProduct)" dt-columns="getDtColumns(AllProduct)"></table>
显示getDtColumns和getDtOptions的角度代码。为了演示的目的，我将数据保持非常简单，并复制了当前的 dtColumns 代码，但是您可以对其进行自定义，以便甚至可以使用多种类型的表：
Angular code showing getDtColumns and getDtOptions. I have kept the data very simple for demonstration purposes and copied the current dtColumns code however you can customize it so that you can even have more than 1 type of table :
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操作。
First of all I do not recommend jQuery DataTable or any other jQuery component in AngularJS applications. I personally try not to bundle jQuery or perform DOM manipulation using jQuery.
不过，我建议您执行以下操作：-
However to get you going with what you have I suggest the following:-
删除这两行是因为只需动态添加这些属性 datatable 并不会触发DataTable绑定：-
Remove these two lines because simply adding those attributes datatable dynamically is not going to trigger the DataTable binding:-
angular.element('#dtVoice').attr('datatable', '')
}
$compile(angular.element('#dtVoice'))($scope);
并尝试使用类似这样的东西：-
and try using something like this:-
$（'＃dtVoice'）。DataTable（{columnDefs：$ scope.dtColumns}）;
$('#dtVoice').DataTable( {columnDefs: $scope.dtColumns });
更多只是清洁我创建了一个新指令（只需大声键入）：
Further more just to clean up a bit I create a new directive (just typing out loud):
app.directive('myDatatable`, function(){
return {
restrict: 'A',
scope: {
'dtColumns': '='
}
link: function($scope, elem, attr) {
$('#dtVoice').DataTable( {columnDefs: $scope.dtColumns});
}
};
});
，然后您的表格如下所示：
and your table something like below:
<table id="dtVoice"
class="table manage-user-table offer-mgt-table"
dt-options="dtOptions"
dt-columns="dtColumns" my-datatable></table>
这篇关于angularjs的Bootstrap手风琴内的DataTables的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
