AngularJS의 그리드 테이블
AngularJS에서 데이터 테이블을 생성하기 위해 ui-bootstrap pagination과 함께 ui-grid를 소개합니다.
AngularJS에서 그리드 테이블 만들기
그리드 테이블 또는 데이터 테이블은 많은 데이터를 사용자에게 친숙하게 표현하는 강력한 방법입니다. 사용자는 원본 데이터를 변경하지 않고 필요에 따라 데이터를 정렬할 수 있습니다.
일부 직원 데이터로 개체를 만들고 이 데이터를 사용하여 ui-grid를 사용하여 그리드 테이블에 표시합니다. 새 파일 script.js를 생성하여 시작하겠습니다. 여기에서 아래와 같이 모듈과 컨트롤러를 정의할 것입니다.
# angular
angular.module('MyApp')
.controller('TableController', ['uiGridConstants', TableController]);
모듈 내에서 사용할 라이브러리를 정의합니다.
# angular
angular.module('MyApp', [
'ui.grid',
'ui.grid.pagination',
'ui.bootstrap'
]);
컨트롤러 TableController를 사용하여 일부 샘플 데이터를 포함할 객체를 정의합니다.
# angular
function TableController() {
var data = this;
data.someData = [
{
"id": "1",
"firstName": "Tom",
"lastName": "Cruise"
},
{
"id": "2",
"firstName": "Maria",
"lastName": "Sharapova"
},
{
"id": "3",
"firstName": "James",
"lastName": "Bond"
}
];
}
객체를 생성한 후 script.js에 몇 가지 그리드 옵션과 코드를 정의합니다.
# angular
(function() {
function TableController() {
var data = this;
data.someData = [
{
"id": "1",
"firstName": "Tom",
"lastName": "Cruise"
},
{
"id": "2",
"firstName": "Maria",
"lastName": "Sharapova"
},
{
"id": "3",
"firstName": "James",
"lastName": "Bond"
}
];
data.gridOptions = {
paginationPageSize: 10,
enablePaginationControls: false,
data: data.someData
}
}
angular.module('MyApp', [
'ui.grid',
'ui.grid.pagination',
'ui.bootstrap'
]);
angular.module('MyApp')
.controller('TableController', ['uiGridConstants', TableController]);
})()
이제 index.html 파일에서 프론트엔드 개발을 시작하겠습니다. 먼저 ng-app을 사용하여 앱 이름을 바인딩하고 아래 스크립트를 사용하여 일부 라이브러리를 가져옵니다.
암호:
# angular
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" data-semver="0.13.1" data-require="ui-bootstrap@0.13.1" />
<link data-require="ui-grid@3.0.1" data-semver="3.0.1" rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.1/ui-grid.min.css" />
<script data-require="ui-grid@3.0.1" data-semver="3.0.1" src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.1/ui-grid.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js" data-semver="0.14.3" data-require="ui-bootstrap-tpls@0.14.3"></script>
<script src="script.js"></script>
</head>
</html>
우리 몸 안에서 컨트롤러를 바인딩하고 ui-grid 및 ui-bootstrap과 함께 컨트롤러를 사용하여 데이터 테이블을 만듭니다. 또한 아래와 같이 다음 및 이전 버튼과 같은 옵션을 정의합니다.
<body ng-controller="TableController as ctrl">
<h1>Grid Table Example By Rana Hasnain</h1>
<div>
<uib-pagination total-items="ctrl.someData.length"
ng-model="ctrl.gridOptions.paginationCurrentPage"
items-per-page="ctrl.gridOptions.paginationPageSize"
boundary-links="true"
direction-links="true"
max-size="3"
first-text="<<"
previous-text="<"
next-text=">"
last-text=">>"
rotate="true"></uib-pagination>
<div id="myGrid" ui-grid="ctrl.gridOptions" class="grid" ui-grid-pagination></div>
</div>
출력:
ui-grid 및 ui-bootstrap 라이브러리를 사용하여 일부 데이터가 포함된 개체를 이해하기 쉽고 사용자 친화적으로 만들기 위해 데이터를 표시할 수 있는 아름다운 데이터 테이블로 쉽게 변환할 수 있습니다.
Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.
LinkedIn