Angular 표 신기 ui-grid 응용 상세 설명
HTML: （코드 는 더 명확 하 게 설명 하 는 데 만 사용 되 며 완전히 표시 되 지 않 습 니 다)
<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/csv.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/pdfmake.js"></script>
<script src="http://ui-grid.info/docs/grunt-scripts/vfs_fonts.js"></script>
<script src="/release/ui-grid.js"></script>
<script src="/release/ui-grid.css"></script>
<script src="app.js"></script>
</head>
<body>
<div ng-controller="MainCtrl">
<div id="user-grid" ui-grid="gridOptions" class="user-grid" ui-grid-resize-columns></div></div>
</div>
</body>
</html>
Jvar app = angular.module('app', ['ngTouch', 'ui.grid']);
app.controller('MainCtrl', ['$scope', function ($scope) {
i18nService.setCurrentLang("zh-cn");
$scope.gridOptions = {
enableSorting: true,
columnDefs: [
{field: 'accountName', displayName:' ', width: 200},
{field: 'userName', displayName:' ', width: 100},
{field: 'unitName', displayName:' ', width: 300},
{
field: 'createTime', displayName: ' ', width: 200,
cellTemplate: '<div class="ui-grid-cell-contents"><span ng-bind="grid.appScope.rDateFormat(row.entity.createTime)"></span></div>'
},
{
field: 'roleList', displayName: ' ', width: 200,
cellTemplate: '<div class="ui-grid-cell-contents"><span ng-repeat="item in row.entity.roleList" style="margin-right:5px;">{{item.roleName}}</span></div>'
},
{
field: 'accountId', displayName: ' ', width: 200,
cellTemplate: '<div class="ui-grid-cell-contents">
<button type="button"
ng-click="grid.appScope.showAccountDetail(row.entity.roleList, row.entity.accountId)"
style="line-height: normal" class="btn-primary btn"> </button></div>'
}
]
};
$scope.gridOptions.data = [
{
'accountName':'15555555555',
'userName':' ',
'unitName':' ',
'createTime':1506661676435,
'roleList':[{roleName:' ','roleId':2},{roleName:' ','roleId':3}],
'accountId':201
},
{
'accountName':'15555555555',
'userName':' ',
'unitName':' ',
'createTime':1506661676435,
'roleList':[{roleName:' ','roleId':2},{roleName:' ','roleId':3}],
'accountId':201
}
]
}]);
ui-grid 중국어 사용:i18nService.setCurrentLang("zh-cn");
ui-grid 형식 설정:html 의 ui-grid='gridOptions'(gridOptions 는 스스로 정의 할 수 있 습 니 다)를 통 해$scope.gridOptions 를 통 해 연결 합 니 다.
위의 코드 에서:
enableSorting:정렬 여 부 를 정의 합 니 다.
열 에 대한 정의 columnDefs 중:
field 는 표 데이터$scope.gridOptions.data 의 필드 입 니 다.
display Name 은 표 에 표 시 된 열 이름 입 니 다.정의 되 지 않 으 면 field 이름 을 표시 합 니 다.
ui-grid 는 어떻게 셀 의 스타일 을 단독으로 정의 합 니까?예 를 들 어 버튼 을 만 들 거나.
cellTemplate 속성 을 사용 할 수 있 습 니 다.그러나 주의해 야 할 것 은 셀 이 정의 하 는 html 에서 함 수 를 연결 하려 면 angular 일반적인 것 처럼 연결 할 수 없습니다.연 결 된 함수 앞 에'grid.appscope'를 추가 해 야 합 니 다.예 를 들 어'grid.appscope.func()'입 니 다.
ui-grid 가 특정한 줄 의 데 이 터 를 함수 에 전송 하려 면 이러한 형식 을 사용 해 야 합 니 다."row.enity.createTime",creatTime 은 당신 이 들 어 올 매개 변수의 이름 입 니 다.("field"에 대응)
표 의 데 이 터 는 요청 백 엔 드 인 터 페 이 스 를 통 해 얻 을 수 있 습 니 다.$scope.gridOptions.data 에 할당 할 수 있 습 니 다.데이터 형식 이 요구 에 부합 되 는 지 주의 하 십시오.그렇지 않 으 면 먼저 처리 해 야 합 니 다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
연말이므로 웹 앱을 만들었습니다.minmax 패널을 번갈아 가서 총 득점을 겨루는 게임이다. 선수는 좋아하는 위치에서 시작된다. 후손은 선수가 선택한 위치를 포함한 세로 일렬 중에서 패널을 선택한다. 다시 선수는 후손이 선택한 패널을 포함한 가로 ...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
