Динамическая таблица AngularJS с поиском по определению столбцов
Я пытаюсь создать динамическую таблицу, используя AngularJS. У меня есть базовая рабочая таблица, которая заполняет информацию заголовка и данные таблицы. Однако есть несколько проблем. Во-первых, заголовки не всегда совпадают с данными таблицы. Во-вторых, я хочу иметь возможность скрывать / показывать столбцы данных на основе определения столбца ("show") в "playerColumns". В-третьих, я хочу иметь возможность форматировать данные на основе определения столбца ("десятичные дроби") в "playerColumns". Я не могу понять, как эффективно выполнить поиск из текущей ячейки в определении столбца, чтобы достичь 2 и 3 в AngularJS.
Я исследовал это и видел вопросы о том, как сделать то, что я уже сделал, но я не нашел ничего, что могло бы сделать следующий шаг.
Я создал JSFiddle здесь (спасибо lokeshjain2008 за то, что он заработал): https://jsfiddle.net/7eywuuuy/2
Заранее спасибо.
Вот пример того, что я имею до сих пор:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>AngularJS Dynamic Table</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
</head>
<body ng-app="myApp">
<br>
<div ng-controller="myCtrl">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="alert alert-warning alert-dismissible" role="alert">
<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4>Debug Info:</h4>
<p>Sort Field: {{ sortField.obj.value }}</p>
<p>Sort Reverse: {{ sortReverse.obj.value }}</p>
<p>Search Term: {{ searchTerm.obj.value }}</p>
</div>
<form>
<div class="form-group">
<div class="input-group">
<div class="input-group-addon"><i class="fa fa-search"></i></div>
<input type="text" class="form-control" placeholder="Search..." ng-model="searchTerm.obj.value">
</div>
</div>
</form>
<table class="table table-hover table-striped table-bordered table-responsive table-condensed">
<thead>
<tr>
<th ng-repeat="col in playerColumns">
<a href="#" ng-click="sortField.obj.value = col.name; sortReverse.obj.value = !sortReverse.obj.value;">
{{col.label}}
<span ng-show="sortField.obj.value == col.name && !sortReverse.obj.value" class="fa fa-caret-down"></span>
<span ng-show="sortField.obj.value == col.name && sortReverse.obj.value" class="fa fa-caret-up"></span>
</a>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="player in playerData | orderBy:sortField.obj.value:sortReverse.obj.value | filter:searchTerm.obj.value">
<td ng-repeat="(key, value) in player">{{value}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<br>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script>
'use strict';
// app
angular.module('myApp', []);
// service
angular.module('myApp').service('mySvc', [function() {
this.getPlayerColumns = function(colName) {
var playerColumns =
[{
"name": "id",
"label": "ID",
"show": false,
"decimals": undefined
},
{
"name": "FullName",
"label": "Player",
"show": true,
"decimals": undefined
},
{
"name": "team_code",
"label": "Team",
"show": true,
"decimals": undefined
},
{
"name": "position",
"label": "Position",
"show": true,
"decimals": undefined
},
{
"name": "value",
"label": "Value",
"show": true,
"decimals": 3
}];
if (colName == null)
return playerColumns;
else
return playerColumns[colName]; // this doesn't seem right
};
this.getPlayerData = function() {
var playerData =
[{
"id": 0,
"FullName": "Bryce Harper",
"team_code": "was",
"position": "OF",
"value": "0.523655953332562"
},
{
"id": 1,
"FullName": "Chris Davis",
"team_code": "bal",
"position": "1B/OF",
"value": "0.632357647343342"
},
{
"id": 2,
"FullName": "Yoenis Cespedes",
"team_code": "nyn",
"position": "OF",
"value": "0.997633324334234"
},
{
"id": 3,
"FullName": "Manny Machado",
"team_code": "bal",
"position": "3B",
"value": "0.324132642662464"
},
{
"id": 4,
"FullName": "Jose Altuve",
"team_code": "hou",
"position": "2B",
"value": "0.243253253256254"
}];
return playerData;
};
}]);
// global variables to prevent scope issues
var _sortField = {obj: {value: 'FullName'}}; // set the default sort field
var _sortReverse = {obj: {value: false}}; // set the default sort order
var _searchTerm = {obj: {value: ''}}; // set the default search/filter term
// controller
angular.module('myApp').controller('myCtrl', ['$scope', 'mySvc', function($scope, mySvc) {
$scope.sortField = Object.create(_sortField); // set the default sort field
$scope.sortReverse = Object.create(_sortReverse); // set the default sort order
$scope.searchTerm = Object.create(_searchTerm); // set the default search/filter term
$scope.playerColumns = mySvc.getPlayerColumns();
$scope.playerData = mySvc.getPlayerData();
console.log($scope.playerColumns);
console.log($scope.playerData);
}]);
</script>
</body>
</html>
2 ответа
Ну, видимо, мне просто нужно было поспать на нем и взглянуть свежим взглядом. Я переработал структуру данных playerColumns (спасибо Марко). Теперь это выглядит так:
var playerColumns =
{
"id":
{
"name": "id",
"label": "ID",
"show": false
},
"FullName":
{
"name": "FullName",
"label": "Player",
"show": true
},
"team_code":
{
"name": "team_code",
"label": "Team",
"show": true
},
"position":
{
"name": "position",
"label": "Position",
"show": true
},
"value":
{
"name": "value",
"label": "Value",
"show": true,
"filter": "number",
"decimals": 3
}
};
Затем с помощью этой скрипки: http://jsfiddle.net/v6ruo7mj/1...
Я смог рефакторинг HTML следующим образом:
<table class="table table-hover table-striped table-bordered table-responsive table-condensed">
<thead>
<tr>
<th ng-repeat="col in playerColumns" ng-show="col.show">
<a href="#" ng-click="sortField.obj.value = col.name; sortReverse.obj.value = !sortReverse.obj.value;">
{{col.label}}
<span ng-show="sortField.obj.value == col.name && !sortReverse.obj.value" class="fa fa-caret-down"></span>
<span ng-show="sortField.obj.value == col.name && sortReverse.obj.value" class="fa fa-caret-up"></span>
</a>
</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in playerData | orderBy:sortField.obj.value:sortReverse.obj.value | filter:searchTerm.obj.value">
<td ng-repeat="col in playerColumns" ng-if="col.show && col.filter == null">{{row[col.name]}}</td>
<td ng-repeat="col in playerColumns" ng-if="col.show && col.filter == 'number'">{{row[col.name] | number:col.decimals}}</td>
</tr>
</tbody>
</table>
Таким образом, я могу использовать директиву ng-if, чтобы проверить, нужно ли мне включать столбец и нужно ли применять фильтр.
Вот моя рабочая скрипка: https://jsfiddle.net/7eywuuuy/4/
Вот ваш рабочий Fiddle. Не используйте тип загрузки javascript в разделе JavaScript. В любом случае хороший код. Только предложение с моей стороны использовать IIFE.
(function(angular) {
'use strict';
// app
angular.module('myApp', []);
})(angular);