Ui-grid - 如何在单击相应 ui-图标时对列进行排序和隐藏

Question

我需要在单击相应的 ui-图标时对相应的列进行排序和隐藏。

ui-icon-close -> 单击此按钮，应隐藏相应的列。 ui-icon-arrowthick-2-n-s -> 单击此图标后，table 应根据该列的值进行排序。

这里是 plunker link

HTML:

<div id="grid1" ui-grid="gridOptions1" class="grid"></div>

JS:

$scope.gridOptions1 = {
    enableSorting: true,
    columnDefs: [
      { field: 'name', headerCellTemplate: '<div style="float:left">Name</div><div class="ui-icon ui-icon-close" style="float:left"></div><div style="float:left" class="ui-icon ui-icon-arrowthick-2-n-s"></div>' }, 
      { field: 'gender', headerCellTemplate: '<div style="float:left">Name</div><div class="ui-icon ui-icon-close" style="float:left"></div><div style="float:left" class="ui-icon ui-icon-arrowthick-2-n-s"></div>' },
      { field: 'company', headerCellTemplate: '<div style="float:left">Name</div><div class="ui-icon ui-icon-close" style="float:left"></div><div style="float:left" class="ui-icon ui-icon-arrowthick-2-n-s"></div>'}
    ],
    onRegisterApi: function( gridApi ) {
      $scope.grid1Api = gridApi;
    }
  };

Answer 1

你可以简单地使用'col'的属性并隐藏列，重要的是每次操作后刷新网格，

 col.hideColumn();

同样，您可以使用 gridApi 功能进行排序，

$scope.grid1Api.grid.sortColumn(col,$scope.uiGridConstants.ASC, false );

这里是 plunk

但您应该知道，已经有栏目菜单服务可以为您完成这些工作

这里是 link

http://ui-grid.info/docs/#/tutorial/121_grid_menu

Ui-grid - 如何在单击相应 ui-图标时对列进行排序和隐藏

Ui-grid - How to sort and hide a column on click of respective ui-icons

sorting

hide

jquery-ui-sortable

angularjs

angular-ui-grid