Как скрыть столбец в сетке ng

вот мой код:

index.html

<!DOCTYPE html>
<html ng-app="myApp">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <link rel="stylesheet" type="text/css" href="#" onclick="location.href='http://angular-ui.github.com/ng- grid/css/ng-grid.css'; return false;" />
  <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
  };
});

Q1: Я хочу скрыть столбец id в ng-grid. Q2: После скрытия столбца id, могу ли я получить значение id при выборе некоторой строки? Как изменить код?

Услышьте плунж: Plunk demo

Ответы

Ответ 1

Просто добавьте ниже строки в конфигурацию, и он будет работать

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

Ответ 2

Вы можете установить visible: false прямо в определении столбца:

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

Ответ 3

Вы также можете скрыть столбец динамически, добавив этот код после определения сетки;

    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;

Массив сетки angularjs $scope.gridOptions.columnDefs. Измените gridOptions на имя вашей сетки.

Замените " yourFieldName" на любое поле, которое вы хотите скрыть. Затем поставьте любое условие, которое вы хотите проверить.

Это заняло некоторое время, чтобы понять. Надеюсь, это спасет других в свое время.

Ответ 4

Чтобы скрыть определенный столбец в сетке пользовательского интерфейса AngularJS, мы можем использовать свойство visible: false, как показано ниже.

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

Если вы хотите проверить его в полном примере, вам нужно написать код, как показано ниже.

<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>

Ответ 5

Мы можем использовать следующий код после определения сетки

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

Ответ 6

Используйте атрибут "hide: true", как показано ниже, в Angular 2, работая отлично для меня:

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

Ответ 7

Я предлагаю добавить определения "visible: false" в определения столбцов. Если вы решите не указывать его в столбцах columnDefs, когда вы отправляете строку обратно на все ваши бэкэнд, вы можете исключить это поле. Это то, что я испытал.