您好我正在使用angularjs和ASP.NET MVC创建一个带有数据表js的应用程序。
我已经在this文章的帮助下实现了使用带角度js的数据表显示数据的表格。
但是我想在html中使用相同的功能和静态的列名绑定数据,如:
在文章中,作者使用以下方式完成了工作:
<table id="entry-grid" datatable="" dt-options="dtOptions"
dt-columns="dtColumns" class="table table-hover">
</table>
但我希望通过使用ng-repeat根据我的数据使用上述相同的功能来实现这一点:
<table id="tblusers" class="table table-bordered table-striped table-condensed datatable">
<thead>
<tr>
<th width="2%"></th>
<th>User Name</th>
<th>Email</th>
<th>LoginID</th>
<th>Location Name</th>
<th>Role</th>
<th width="7%" class="center-text">Active</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in Users">
<td><a href="#" ng-click="DeleteUser(user)"><span class="icon-trash"></span></a></td>
<td><a class="ahyperlink" href="#" ng-click="EditUser(user)">{{user.UserFirstName}} {{user.UserLastName}}</a></td>
<td>{{user.UserEmail}}</td>
<td>{{user.LoginID}}</td>
<td>{{user.LocationName}}</td>
<td>{{user.RoleName}}</td>
<td class="center-text" ng-if="user.IsActive == true"><span class="icon-check2"></span></td>
<td class="center-text" ng-if="user.IsActive == false"><span class="icon-close"></span></td>
</tr>
</tbody>
</table>
我还想在按钮单击添加新记录中使用相同的功能在表格中添加新列。
有可能吗?
如果是的话怎么可能会很好,如果有人在jsfiddle或任何编辑中给我看,那就提前谢谢了。
请在Visual Studio编辑器中为{}
创建DOWNLOAD源代码答案 0 :(得分:9)
您可以在评论中关注davidkonrad的answer,就像以下结构一样:
HTML:
<table id="entry-grid" datatable="ng" class="table table-hover">
<thead>
<tr>
<th>
CustomerId
</th>
<th>Company Name </th>
<th>Contact Name</th>
<th>
Phone
</th>
<th>
City
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="c in Customers">
<td>{{c.CustomerID}}</td>
<td>{{c.CompanyName}}</td>
<td>{{c.ContactName}}</td>
<td>{{c.Phone}}</td>\
<td>{{c.City}}</td>
</tr>
</tbody>
</table>
以角度创建控制器,如下所示:
var app = angular.module('MyApp1', ['datatables']);
app.controller('homeCtrl', ['$scope', 'HomeService',
function ($scope, homeService) {
$scope.GetCustomers = function () {
homeService.GetCustomers()
.then(
function (response) {
debugger;
$scope.Customers = response.data;
});
}
$scope.GetCustomers();
}])
服务:
app.service('HomeService', ["$http", "$q", function ($http, $q) {
this.GetCustomers = function () {
debugger;
var request = $http({
method: "Get",
url: "/home/getdata"
});
return request;
}
}]);
答案 1 :(得分:4)
指示angular-dataTables使用datatable="ng"
的“角度方式”:
<table id="entry-grid"
datatable="ng"
dt-options="dtOptions"
dt-columns="dtColumns"
class="table table-hover">
</table>
然后更改dtColumns
以解决列索引而不是JSON条目:
$scope.dtColumns = [
DTColumnBuilder.newColumn(0).withTitle('').withOption('width', '2%'),
DTColumnBuilder.newColumn(1).withTitle('User Name'),
DTColumnBuilder.newColumn(2).withTitle('Email'),
DTColumnBuilder.newColumn(3).withTitle('LoginID'),
DTColumnBuilder.newColumn(4).withTitle('Location Name'),
DTColumnBuilder.newColumn(5).withTitle('Role Name'),
DTColumnBuilder.newColumn(6).withTitle('Active').withOption('width', '7%')
];
如果您执行上述操作,则可以完全跳过<thead>
部分。最后,我会将最后两个冗余的<td>
减少为一个:
<td class="center-text">
<span ng-show="user.IsActive == true" class="icon-check2"></span>
<span ng-show="user.IsActive == false" class="icon-close"></span>
</td>