Как скрыть столбец в сетке 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="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
  };
});

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

Послушайте, что это за звук: демонстрационная версия


person Tom Cheng    schedule 06.06.2013    source источник


Ответы (7)


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

 columnDefs: [
            {field: 'empno', displayName: 'empno'},
            {field:'name', displayName:'name'}
        ]
person Ajay Beniwal    schedule 06.06.2013
comment
Привет, Аджай. Если мы хотим показать два столбца под одним displayName, как мы можем это сделать? Я хочу показать Имя + Фамилия в одном столбце с именем Имя. Я пробовал columnDefs: [ {field: 'FirstName'+'LastName', displayName: 'Name' }, ]. Но не работает. Пожалуйста помоги - person Ranadheer Reddy; 04.09.2013
comment
Привет @Ajay. если мы установим multiSelect: false, чтобы пользователь мог щелкнуть только одну строку, как получить выбранную строку? есть ли какое-либо свойство, такое как selectedRow или selectedItem вместо selectedItems?? потому что, если мы используем selectedItems для multiSelect:false, наша выбранная строка будет добавлена ​​в массив $scope.mySelections, и если мы хотим получить доступ к этому элементу, мы должны написать $scope.mySelections[0].name.. Как это решить? - person Ranadheer Reddy; 05.09.2013
comment
Что делать, если вы не знаете определения видимых столбцов, но знаете, какие столбцы вы будете скрывать, как это делается в этом случае ?? - person Xvegas; 19.02.2016

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

$scope.gridOptions = { 
    data: 'myData',
    selectedItems: $scope.mySelections,
    multiSelect: false,
    columnDefs: [
        {field: 'empno', displayName: 'empno', visible:false},
        {field:'name', displayName:'name'}
    ]
};
person Wayne Bloss    schedule 08.07.2014
comment
Как я могу также скрыть столбец из средства выбора столбца. Если я установлю «видимый: ложный», столбец будет скрыт от сетки, а не от выбора столбца, есть ли способ добиться этого - person Pradeep; 20.01.2017
comment
@Pradeep Вам необходимо изменить код для шаблона ng-grid-menu или добавьте свой собственный шаблон во время выполнения. Там вы можете контролировать, какие столбцы отображаются в меню. - person Wayne Bloss; 23.01.2017
comment
Кроме того, вы можете добавлять и удалять столбцы из коллекции столбцов вместо использования параметра visible. - person Wayne Bloss; 23.01.2017

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

    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» любым полем, которое вы хотите скрыть. Затем поставьте любое условие, которое хотите проверить.

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

person Doug Weems    schedule 01.04.2014
comment
Чтобы это работало с ui-grid v3.2.9 - 2016-09-21, мне пришлось сделать следующий вызов после изменения свойств видимости столбца: this.gridApi.grid.refresh(); - person CAK2; 15.12.2016

Чтобы скрыть определенный столбец в сетке пользовательского интерфейса 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>
person Anil Singh    schedule 25.02.2015
comment
похоже, это правильный ответ. вопрос был в том, чтобы скрыть столбец. - person Shamseer; 06.09.2015
comment
Как я могу также скрыть столбец из средства выбора столбца. - person Pradeep; 20.01.2017
comment
ширина панели выбора столбца изменяется с помощью columnChooser. Попробуйте ‹div style=height:390px; максимальная ширина: 630 пикселей; margin: 0 auto dx-data-grid={ dataSource: books, columns: ['автор', 'название', 'год', 'жанр', 'формат', { dataField: 'цена', видимое: false}, { dataField: 'length', visible: false } ], paging: { pageSize: 7 }, columnChooser: { enabled: true, width: 400 } }›‹/div› - person Anil Singh; 23.01.2017

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

 if ($rootScope.CanDelete == false && $rootScope.CanEdit == false)
     $scope.ConfigItemGrid.columnDefs[4].visible = false;
 else
     $scope.ConfigItemGrid.columnDefs[4].visible = true;
person Md. Nazrul Islam    schedule 11.12.2014

Используйте атрибут "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
        }
    }
];
person Chris Xu    schedule 27.01.2016
comment
скрыть для меня не имеет значения. visible:false делает. headerName также игнорируется, displayName работает. angular v 1.5.3 здесь. - person Rbjz; 11.04.2016

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

person Brian    schedule 09.04.2015