如何隱藏在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格列

回答

相關問題