angularjs - Cómo ocultar una columna en una grilla ng
angular-ui ng-grid (7)
Aquí está mi código:
index.html
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng- grid/css/ng-grid.css" />
<link rel="stylesheet" type="text/css" href="style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
<div class="selectedItems">Selected ID:{{mySelections[0].id}}</div><br><br>
</body>
</html>
app.js
var app = angular.module(''myApp'', [''ngGrid'']);
app.controller(''MyCtrl'', function($scope) {
$scope.mySelections = [];
$scope.myData = [{empno: 111, name: "Moroni", id: 1},
{empno: 222, name: "Tiancum", id: 2},
{empno: 333, name: "Jacob", id: 3},
{empno: 444, name: "Nephi", id: 4},
{empno: 555, name: "Akon", id: 5},
{empno: 666, name: "Enos", id: 6}];
$scope.gridOptions = {
data: ''myData'',
selectedItems: $scope.mySelections,
multiSelect: false
};
});
P1: Quiero ocultar la columna de identificación en ng-grid. P2: Después de ocultar la columna de identificación, ¿puedo obtener el valor de identificación cuando selecciono una fila? ¿Cómo se puede modificar el código?
Hear is the plunk: demo plunk
Para ocultar una columna en particular en la cuadrícula de UI de AngularJS podemos usar la propiedad visible: false como se muestra a continuación.
columnDefs: [
{ field: ''userid'', visible: false, displayName: ''UserId'' },
{ field: ''username'', displayName: ''UserName'' },
{ field: ''branch'', displayName: ''Education'' }
]
Si desea verificarlo en un ejemplo completo, necesita escribir el código como se muestra a continuación
<html ng-app="myApp">
<head>
<title>Hide Particular Column in Angularjs UI Grid with Example</title>
<link rel="stylesheet" type="text/css" href="http://angular-ui.github.com/ng-grid/css/ng-grid.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script type="text/javascript" src="http://angular-ui.github.com/ng-grid/lib/ng-grid.debug.js"></script>
<style type="text/css">
.gridStyle {
border: 1px solid rgb(212,212,212);
width: 400px;
height: 210px
}
</style>
</head>
<body ng-controller="MyCtrl">
<div class="gridStyle" ng-grid="gridOptions"></div>
<script type="text/javascript">
var app = angular.module(''myApp'', [''ngGrid'']);
app.controller(''MyCtrl'', function ($scope) {
$scope.mySelections = [];
$scope.myData = [{ userid: 1, username: "Anil Singh", branch:"B.tech" },
{ userid: 2, username: "Sunil", branch: "Msc" },
{ userid: 3, username: "Sushil", branch: "B.Tech" },
{ userid: 4, username: "Dilip", branch: "MBA" },
{ userid: 5, username: "Upendra", branch: "MD" },
{ userid: 6, username: "Reena", branch: "CA"}];
$scope.gridOptions = {
data: ''myData'',
selectedItems: $scope.mySelections,
multiSelect: false,
columnDefs: [
{ field: ''userid'', visible: false, displayName: ''UserId'' },
{ field: ''username'', displayName: ''UserName'' },
{ field: ''branch'', displayName: ''Education'' } ]
};
});
</script>
</body>
</html>
Podemos utilizar el siguiente código después de definir la cuadrícula.
if ($rootScope.CanDelete == false && $rootScope.CanEdit == false)
$scope.ConfigItemGrid.columnDefs[4].visible = false;
else
$scope.ConfigItemGrid.columnDefs[4].visible = true;
Puede configurar visible: false derecha en la definición de columna:
$scope.gridOptions = {
data: ''myData'',
selectedItems: $scope.mySelections,
multiSelect: false,
columnDefs: [
{field: ''empno'', displayName: ''empno'', visible:false},
{field:''name'', displayName:''name''}
]
};
Simplemente agregue las siguientes líneas a la configuración y funcionará
columnDefs: [
{field: ''empno'', displayName: ''empno''},
{field:''name'', displayName:''name''}
]
Sugiero agregar ''visible: falso'' a las definiciones de columna. Si elige no especificarlo en columnDefs, cuando vuelva a publicar la fila en lo que sea su backend, puede anular ese campo. Eso es lo que he experimentado.
También puede ocultar la columna dinámicamente agregando este código después de definir la cuadrícula;
var pos = $scope.gridOptions.columnDefs.map(function (e) { return e.field; }).indexOf(''yourFieldName'');
if ($scope.basicAdmin || $scope.superAdmin)
$scope.gridOptions.columnDefs[pos].visible = true;
else
$scope.gridOptions.columnDefs[pos].visible = false;
La matriz de cuadrícula angularjs es $ scope.gridOptions.columnDefs . Cambia las opciones de cuadrícula al nombre de tu cuadrícula.
Reemplace " yourFieldName " con cualquier campo que desee ocultar. A continuación, ponga cualquier condición que desee probar.
Esto tomó algún tiempo para averiguar. Con suerte, les ahorrará a los demás algún tiempo.
Use el atributo "hide: true" como se muestra a continuación en Angular 2, funcionando bien para mí:
columnDefs = [
{ headerName: "Make", hide: true, field: "make", editable: true, filter: ''text''},
{ headerName: "Model", field: "model", filter: ''text''},
{
headerName: "Price",
field: "price",
filter: ''number'',
cellClass: ''rightJustify'',
cellRenderer: function (params: any) {
return ''$'' + params.value.toString().replace(//B(?=(/d{3})+(?!/d))/g, ","); //thanks http://.com/users/28324/elias-zamaria
}
}
];