How to hide column in ng grid

2019-04-18 17:30发布

站内问答 / 后端开发
1956 7 5

here is my 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
  };
});

Q1: I want to hide the id column in ng-grid. Q2: After hiding the id column, may I get the id value when I select some row? How can modify the code?

Hear is the plunk: Plunk demo

7条回答
何必那么认真
2楼-- · 2019-04-18 18:12

I suggest adding 'visible: false' to the column definitions. If you choose not to specify it in columnDefs, when you post the row back to whatever your backend is, you may null out that field. That's what I've experienced.

查看更多
0人赞 添加讨论(0) 举报
forever°为你锁心
3楼-- · 2019-04-18 18:14

To hide particular column in AngularJS UI grid we can use visible: false property like as shown below.

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

If you want to check it in complete example you need to write the code like as shown below

<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>
查看更多
0人赞 添加讨论(0) 举报
姐就是有狂的资本
4楼-- · 2019-04-18 18:25

You can set visible: false right in the column definition:

$scope.gridOptions = { 
    data: 'myData',
    selectedItems: $scope.mySelections,
    multiSelect: false,
    columnDefs: [
        {field: 'empno', displayName: 'empno', visible:false},
        {field:'name', displayName:'name'}
    ]
};
查看更多
0人赞 添加讨论(0) 举报
来，给爷笑一个
5楼-- · 2019-04-18 18:25

You can also hide the column dynamically by adding this code after you define the grid;

    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;

The angularjs grid array is $scope.gridOptions.columnDefs. Change the gridOptions to the name of your grid.

Replace "yourFieldName" with whatever field you are wanting to hide. Next, put whatever condition you want to test.

This took some time to figure out. Hopefully, it will save others some time.

查看更多
0人赞 添加讨论(0) 举报
地球回转人心会变
6楼-- · 2019-04-18 18:27

Use "hide: true" attribute as below in Angular 2, working fine for me:

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
        }
    }
];
查看更多
0人赞 添加讨论(0) 举报
smile是对你的礼貌
7楼-- · 2019-04-18 18:32

Just add below lines to configuration and it will work

 columnDefs: [
            {field: 'empno', displayName: 'empno'},
            {field:'name', displayName:'name'}
        ]
查看更多
0人赞 添加讨论(0) 举报
1 2 下一页
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)