Question

默认情况下，我试图在ng-grid中固定前两列和最后两列。我知道我可以将所需的列设置为固定，如下面的代码

 $scope.gridOptions = {
     enablePinning: true,
    columnDefs: [{ field: "name", width: 120, pinned: true }
    //...
  };

但我不希望用户像下面的示例中那样更改它

http://plnkr.co/edit/UfFnsZ?p=preview

我的意思是列应该是固定的，用户不应该编辑它。我搜索但没有找到任何例子。有可能吗？如果有的话，有人可以帮忙......

Answer 1

或者您可以使用以下css：

.ngPinnedIcon, .ngUnPinnedIcon{
    display: none;
}

这将隐藏所有用于固定和取消固定的图标。它对我有用，因为我不希望用户改变列的固定。

Answer 2

为此特定列使用自定义headerCellTemplate。

    var hc_nopin="<div class=\"ngHeaderSortColumn {{col.headerClass}}\" ng-style=\"{'cursor': col.cursor}\" ng-class=\"{ 'ngSorted': !col.noSortVisible() }\">\r" +
    "\n" +
    " <div ng-click=\"col.sort($event)\" ng-class=\"'colt' + col.index\" class=\"ngHeaderText\">{{col.displayName}}</div>\r" +
    "\n" +
    " <div class=\"ngSortButtonDown\" ng-click=\"col.sort($event)\" ng-show=\"col.showSortButtonDown()\"></div>\r" +
    "\n" +
    " <div class=\"ngSortButtonUp\" ng-click=\"col.sort($event)\" ng-show=\"col.showSortButtonUp()\"></div>\r" +
    "\n" +
    " <div class=\"ngSortPriority\">{{col.sortPriority}}</div>\r" +
    "\n" +
    " <div ng-class=\"{ ngPinnedIcon: col.pinned, ngUnPinnedIcon: !col.pinned }\"  ng-show=\"col.pinnable\"></div>\r" +
    "\n" +
    "</div>\r" +
    "\n" +
    "<div ng-show=\"col.resizable\" class=\"ngHeaderGrip\" ng-click=\"col.gripClick($event)\" ng-mousedown=\"col.gripOnMouseDown($event)\"></div>\r" +
    "\n";

    $scope.gridOptions = {
    data: 'myData',
    enablePinning: true,
    columnDefs: [{
      field: "name",
      width: 120,
      pinned: true,
      headerCellTemplate: hc_nopin
    }, {
      field: "age",
      width: 120
    }, {
      field: "birthday",
      width: 120
    }, {
      field: "salary",
      width: 120
    }]
    };

在自定义hc_nopin模板中，我刚刚删除了用于切换固定状态的ng-click命令。如果您也不想要固定图标，只需删除相应的行。

这是分叉的Plunker

固定ng-grid angularjs中的列

2 个答案: