如何隐藏在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：我想隐藏在NG id列-格。 Q2：在隐藏id列后，我可以在选择某行时获得id值吗？如何修改代码？

听到的是普拉克：Plunk demo

来源

2013-06-06 Tom Cheng

只需添加以下线的配置，也将努力

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

来源

2013-06-06 05:25:34

谢谢您的回答 –

请接受答案如果是工作:) –

阿贾伊嗨。如果我们想在一个displayName下显示两列，我们该怎么办？我想在名为Name的一列中显示FirstName + LastName。我尝试过columnDefs：[ {field：'FirstName'+'LastName'，displayName：'Name'}， ]。但不工作。请帮助 –

您还可以通过您定义的网后添加以下代码动态隐藏的列;

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”替换为您想要隐藏的任何字段。接下来，把你想测试的任何条件。

这花了一些时间弄清楚。希望它能为他人节省一些时间。

来源

2014-04-01 12:18:42

感谢user3219752，它帮助我解决了我的问题。 –

要使用ui-grid v3.2.9 - 2016-09-21进行此项工作，必须在更改列可见性属性后进行以下调用： this.gridApi.grid.refresh（）; – CAK2

您可以设置visible: false右列定义：

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

来源

2014-07-08 22:25:20

我怎样才能隐藏列选择器的列也。如果我设置'visible：false'列会隐藏栅格而不是列选择器，有没有办法实现它 – Pradeep

@Pradeep你必须修改[ng-grid-menu模板的代码]（https：// github .com/angular-ui/ng-grid-legacy/blob/master/src/templates/menuTemplate.html）或者在运行时注入自己的自定义模板。您可以控制菜单中显示哪些列。 –

或者，您可以添加和删除列集合中的列，而不使用“可见”设置。 –

我们可以使用下面的代码定义网格

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

来源

2014-12-11 07:39:06

是的，这个作品绝对，谢谢Nazrul –

后在AngularJS UI电网隐藏特定的列，我们可以用可见：假属性如下所示。

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>

来源

2015-02-25 05:41:03

看起来像这是正确的答案。问题是要隐藏列。 – Shamseer

我怎样才能隐藏列选择器也列。 – Pradeep

使用columnChooser更改了列选择器面板的宽度。试试像，

–

我建议增加“可见：假”的列定义。如果您选择不在columnDefs中指定它，那么当您将该行发布回您的后端时，您可以将该字段清空。这就是我所经历的。

来源

2015-04-09 13:43:00 Brian

使用"hide: true"属性，如下面角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 
     } 
    } 
];

来源

2016-01-27 20:13:43

隐藏对我来说没有任何区别。可见：错了。 headerName也被忽略，displayName起作用。角度v 1.5.3在这里。 – Rbjz

如何隐藏在NG格列

回答

相关问题