it-swarm.com.de

So blenden Sie die Spalte im Raster ein

hier ist mein code:

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
  };
});

F1: Ich möchte die ID-Spalte in ng-grid ausblenden. F2: Kann ich nach dem Ausblenden der id-Spalte den id-Wert erhalten, wenn ich eine Zeile auswähle?

Höre das Plunk: Plunk Demo

18
Tom Cheng

Fügen Sie der Konfiguration einfach folgende Zeilen hinzu und es funktioniert

 columnDefs: [
            {field: 'empno', displayName: 'empno'},
            {field:'name', displayName:'name'}
        ]
18
Ajay Beniwal

Sie können visible: false in der Spaltendefinition rechts setzen:

$scope.gridOptions = { 
    data: 'myData',
    selectedItems: $scope.mySelections,
    multiSelect: false,
    columnDefs: [
        {field: 'empno', displayName: 'empno', visible:false},
        {field:'name', displayName:'name'}
    ]
};
26
Wayne Bloss

Sie können die Spalte auch dynamisch ausblenden, indem Sie diesen Code hinzufügen, nachdem Sie das Raster definiert haben.

    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;

Das Rasterjs-Raster ist $ scope.gridOptions.columnDefs . Ändern Sie die gridOptions in den Namen Ihres Gitters.

Ersetzen Sie " yourFieldName " durch das Feld, das Sie ausblenden möchten. Als nächstes legen Sie fest, welche Bedingung Sie testen möchten. 

Das hat etwas gedauert. Hoffentlich spart es anderen Zeit.

20
Doug Weems

Um eine bestimmte Spalte im AngularJS-UI-Raster auszublenden, können Sie visible: false property wie unten gezeigt verwenden.

columnDefs: [
{ field: 'userid', visible: false, displayName: 'UserId' },
{ field: 'username', displayName: 'UserName' },
{ field: 'branch', displayName: 'Education' }
]

Wenn Sie es in einem vollständigen Beispiel überprüfen möchten, müssen Sie den Code wie unten gezeigt schreiben

<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>
8
Anil Singh

Wir können den folgenden Code verwenden, nachdem Sie das Raster definiert haben

 if ($rootScope.CanDelete == false && $rootScope.CanEdit == false)
     $scope.ConfigItemGrid.columnDefs[4].visible = false;
 else
     $scope.ConfigItemGrid.columnDefs[4].visible = true;
3

Verwenden Sie das "hide: true"-Attribut wie unten in Angular 2 angegeben, das für mich einwandfrei funktioniert:

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://stackoverflow.com/users/28324/elias-zamaria
        }
    }
];
2
Chris Xu

Ich schlage vor, zu den Spaltendefinitionen 'visible: false' hinzuzufügen. Wenn Sie sich dafür entscheiden, es nicht in columnDefs anzugeben, wenn Sie die Zeile an das Backend zurücksenden, können Sie dieses Feld auf Null setzen. Das habe ich erlebt.

0
Brian