在 Angular Js 的 Datatable 中设置 fontwesome 图标 DTColumnBuilder
Set fontawesome icon DTColumnBuilder in Datatable in Angular Js
我正在使用 DTColumnBuilder 将 Json 数据显示到数据表中。所以现在我能够将数据显示到列的每一行中。但是我想在列的每一行中设置一个超棒的字体图标。
控制器:
angular.module('app.example').controller('xyz', function ($scope,$http,$state, $stateParams,Rh,DTOptionsBuilder,DTColumnBuilder,DTColumnDefBuilder) {
this.standardOptions = DTOptionsBuilder
.fromFnPromise(Rl.all('abc/main/logic').getList())
//Add Bootstrap compatibility
.withDOM("<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>" +
"t" +
"<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>")
.withBootstrap();
this.standardColumns = [
DTColumnBuilder.newColumn('msg.firstName'),
DTColumnBuilder.newColumn('msg.lastName'),
];
});
HTML
<table datatable dt-options="datatables.standardOptions" dt-columns="datatables.standardColumns" class="table table-striped table-bordered table-hover" width="100%">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
</table>
我想在列中添加字体超棒的图标。
DTColumnBuilder.newColumn('fontawesome-icon'),
<th>Action</th>
我看过一个 link 但我没听懂。 。因为我只想使用 font-awesome.
<i class="fa fa-refresh" aria-hidden="true"></i>
我有一个函数但是我不能调用这个函数
function action(data) {
return $sce.trustAsHtml('<i class="fa fa-fw fa-folder-open-o"> </i>');
}
谢谢。
您可以使用 renderWith
:
DTColumnBuilder.newColumn('msg.lastName')
.renderWith(function(data, type, full, meta) {
return '<i class="fa fa-refresh" aria-hidden="true"></i>'
})
HTML 将被渲染。有关详细信息,请参阅 https://datatables.net/reference/option/columns.render。
示例 -> http://plnkr.co/edit/NZSFrdeCAObbRjCAa7Vi?p=preview
如果需要将指令附加到返回的 HTML,请使用 createdCell
和 $compile
:
.withOption('createdCell', function(cell, cellData, rowData, rowIndex, colIndex) {
$compile(cell)($scope)
})
我正在使用 DTColumnBuilder 将 Json 数据显示到数据表中。所以现在我能够将数据显示到列的每一行中。但是我想在列的每一行中设置一个超棒的字体图标。
控制器:
angular.module('app.example').controller('xyz', function ($scope,$http,$state, $stateParams,Rh,DTOptionsBuilder,DTColumnBuilder,DTColumnDefBuilder) {
this.standardOptions = DTOptionsBuilder
.fromFnPromise(Rl.all('abc/main/logic').getList())
//Add Bootstrap compatibility
.withDOM("<'dt-toolbar'<'col-xs-12 col-sm-6'f><'col-sm-6 col-xs-12 hidden-xs'l>r>" +
"t" +
"<'dt-toolbar-footer'<'col-sm-6 col-xs-12 hidden-xs'i><'col-xs-12 col-sm-6'p>>")
.withBootstrap();
this.standardColumns = [
DTColumnBuilder.newColumn('msg.firstName'),
DTColumnBuilder.newColumn('msg.lastName'),
];
});
HTML
<table datatable dt-options="datatables.standardOptions" dt-columns="datatables.standardColumns" class="table table-striped table-bordered table-hover" width="100%">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
</table>
我想在列中添加字体超棒的图标。
DTColumnBuilder.newColumn('fontawesome-icon'),
<th>Action</th>
我看过一个 link 但我没听懂。
<i class="fa fa-refresh" aria-hidden="true"></i>
我有一个函数但是我不能调用这个函数
function action(data) {
return $sce.trustAsHtml('<i class="fa fa-fw fa-folder-open-o"> </i>');
}
谢谢。
您可以使用 renderWith
:
DTColumnBuilder.newColumn('msg.lastName')
.renderWith(function(data, type, full, meta) {
return '<i class="fa fa-refresh" aria-hidden="true"></i>'
})
HTML 将被渲染。有关详细信息,请参阅 https://datatables.net/reference/option/columns.render。
示例 -> http://plnkr.co/edit/NZSFrdeCAObbRjCAa7Vi?p=preview
如果需要将指令附加到返回的 HTML,请使用 createdCell
和 $compile
:
.withOption('createdCell', function(cell, cellData, rowData, rowIndex, colIndex) {
$compile(cell)($scope)
})