Question

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

ui-icon-close - ＆gt;点击此按钮，应隐藏相应的列。 ui-icon-arrowthick-2-n-s - ＆gt;单击此图标时，应根据该列的值对表进行排序。

以下是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

你可以简单地使用＆＃39; col＆＃39;并隐藏列，重要的是每次操作后刷新网格，

class Object < BasicObject
  include Kernel
end

类似地，您可以使用gridApi功能进行排序，

 col.hideColumn();

这是plunk

但你应该知道已经有列菜单服务可以为你做这些

这是链接

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

Ui-grid - 如何在点击相应的ui-icons

1 个答案: