[英]How to achieve dynamic column hiding in angular-datatable?
我有以下數據表結構
<table id="display" datatable="ng" dt-options="dtOptions" dt-column-defs="dtColumnDefs" class="table table-striped table-bordered hover" cellspacing="0" width="100%">
<thead>
<tr>
<th>INPUT TYPE</th>
<th>INPUT NAME</th>
<th>VALUE</th>
<th>UNIT</th>
<th ng-repeat="n in TableColumns | orderBy:'Name'">{{n.Name}}</th>
<th class="noExport" style="width:50px">VIEW</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in DisplayData">
<td>{{x.Type}}</td>
<td>{{x.Name}}</td>
<td>{{x.Value}}</td>
<td>{{x.Unit}}</td>
<td ng-repeat="n in x.OptionData | orderBy:'Name'">{{n.Value}}</td>
<td>
<a ng-click="gotoLink(x)"><span class="glyphicon glyphicon-eye-open"></span></a>
</td>
</tbody>
以下是角度代碼
$scope.TableColumns = [];
$scope.getAllData = function (item) {
var DashboardData = item;
resultService.getDataById(fetchData).then(function (response) {
if (response.data.length > 0) {
$scope.DisplayData = response.data;
$scope.TableColumns = response.data[0].OptionData;
}
});
}
和response.data [0] .OptionData看起來像
var result = [{OptionsId: 1, Name: "Pressure", Value: 10}
{OptionsId: 2, Name: "Temperature", Value: 20}
{OptionsId: 3, Name: "Humidity",Value: 30},.....];
如何動態隱藏結果集中的$ scope.TableColumns列,考慮它有大約50個結果,但我想顯示10個結果,而其他所有結果都應在初始加載時隱藏?
DataTable實際上確實具有columns.visible
選項(這也適用於columnDefs
)。 您可以通過dtColumnDefs
設置初始可見性(例如):
DTColumnDefBuilder
.newColumnDef(0)
.withOption('data', 'office')
.withTitle('office')
.withOption('visible', false)
有一個notVisible()
“速記”。 您可以隨時通過dtInstance
(您似乎沒有使用)來更改可見性。 在表中添加dt-instance
屬性:
<table datatable="ng"
...
dt-instance="dtInstanceCallback">
dtInstanceCallback
以下方式實現dtInstanceCallback
:
$scope.dtInstanceCallback = function(instance) {
$scope.dtInstance = instance
}
現在,您可以即時更改列的可見性
$scope.dtInstance.DataTable.column(0).visible(true) //or false
我找到了一個簡單的解決方案
首先在$ scope.TableColumns數組中附加一個字段,例如'visibility'= true或false。
$scope.TableColumns = [{OptionsId: 1, Name: "Pressure", Value: 10, visibility: true}
{OptionsId: 2, Name: "Temperature", Value: 20,visibility: false}
{OptionsId: 3, Name: "Humidity",Value: 30,visibility: true},.....];
然后更改以下部分
$scope.dtColumnDefs = [];
$scope.TableColumns = [];
$scope.getAllData = function (item) {
var DashboardData = item;
resultService.getDataById(fetchData).then(function (response) {
if (response.data.length > 0) {
$scope.DisplayData = response.data;
$scope.TableColumns = response.data[0].OptionData;
angular.forEach($scope.SiteTableColumns, function (v, k) {
var index = 4 + k; //0-3 index value of columns manually set in the table and k+1 for array index
if (v.visibility == true) {
$scope.dtColumnDefs.push(DTColumnDefBuilder.newColumnDef(index).withTitle(v.Name));
} else {
$scope.dtColumnDefs.push(DTColumnDefBuilder.newColumnDef(index).withTitle(v.Name).notVisible());
}
});
}
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.