반응형
UI 그리드 열 헤더에서 정렬 메뉴 제거
세 개의 열이 있는 ui-grid를 만들었습니다. 기본적으로 열 머리글에는 'v' 모양의 아이콘(이미지에서는 빨간색 원으로 표시됨)이 있습니다.
코드와 플런커는 다음과 같습니다.
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.expandable', 'ui.grid.selection', 'ui.grid.pinning']);
app.controller('ThirdCtrl', ['$scope', '$http', '$log', function ($scope, $http, $log) {
$scope.gridOptions = {
expandableRowTemplate: 'expandableRowTemplate.html',
expandableRowHeight: 150,
onRegisterApi: function (gridApi) {
gridApi.expandable.on.rowExpandedStateChanged($scope, function (row) {
if (row.isExpanded) {
row.entity.subGridOptions = {
columnDefs: [
{ name: 'name'},
{ name: 'gender'},
{ name: 'company'}
]};
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function(data) {
row.entity.subGridOptions.data = data;
});
}
});
}
}
$scope.gridOptions.columnDefs = [
{ name: 'id', pinnedLeft:true },
{ name: 'name'},
{ name: 'age'},
{ name: 'address.city'}
];
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/500_complex.json')
.success(function(data) {
$scope.gridOptions.data = data;
});
}]);.grid {
width: 100%;
height: 400px;
}<!doctype html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular-touch.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/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="http://ui-grid.info/release/ui-grid.js"></script>
<link rel="stylesheet" href="http://ui-grid.info/release/ui-grid.css" type="text/css">
<link rel="stylesheet" href="main.css" type="text/css">
</head>
<body>
<div ng-controller="ThirdCtrl">
<div ui-grid="gridOptions" ui-grid-expandable class="grid"></div>
</div>
<script src="app.js"></script>
</body>
</html>프로젝트에서 작성한 그리드 위의 이미지.
빨간색 동그라미 안의 "v" 사인인 헤더 행을 제거하려면 어떻게 해야 합니까?
원하는 것은 다음과 같습니다.
$scope.gridOptions = {
enableColumnMenus: false
...
}
모든 열에서 제거하려면 Chris가 제안한 대로 다음을 수행합니다.
$scope.gridOptions = {
enableColumnMenus: false
...
}
그러나 하나 이상의 열에서 제거하지만 필요한 모든 열에서 제거하려는 경우
$scope.gridOptions = {
columnDefs: [
{
enableColumnMenu: false,
...
}
enableColumnMenus 기본값은 true입니다.
정렬을 비활성화할 수 있습니다.
$scope.gridOptions = {
enableSorting: false,
..
}
관련 컬럼 정의에 enable Sorting: false를 지정하여 이 문제를 해결했습니다.이는 정렬 가능한 false를 지정한 문서와 반대됩니다.
var uiGrid = [];
var columnsUiGrid = [
{ displayName: 'Column A', field: 'model.ColumnA' },
{ displayName: 'Column B', field: 'model.ColumnB', enableSorting: false }
];
$scope.uiGridOptions = {
enableSorting: true,
columnDefs: columnsUiGrid,
data: uiGrid
};
언급URL : https://stackoverflow.com/questions/32671202/remove-sorting-menu-from-ui-grid-column-header
반응형
'programing' 카테고리의 다른 글
| 다른 속성을 허용하는 TypeScript 인터페이스 (0) | 2023.02.11 |
|---|---|
| ResponseStatusException에서 "trace" 필드를 삭제합니다. (0) | 2023.02.11 |
| Go에서 정렬된 키로 JSON을 생성하는 방법은 무엇입니까? (0) | 2023.02.11 |
| WooCommerce에서 fragment를 강제로 업데이트 (0) | 2023.02.11 |
| querystring을 각도 경로로 전달하려면 어떻게 해야 합니까? (0) | 2023.02.11 |