如何在UI-GRID（重写的NG-GRID）的标题列添加多选复选框显示/隐藏值

Question

下面是一个示例UI-GRID，我切换了网格菜单。

我希望在标题列处显示多选复选框值并显示/隐藏行...就像在过滤表时在Microsoft Office Excel中一样..下面是一个示例屏幕截图

我可以在特定列中选择我想要的值并过滤..

就像下面的网格菜单一样，我可以显示/隐藏列并枚举它们..但是这一次，我想要特定列的行值。

到目前为止，这是我的代码：

app.controller('MainCtrl', ['$scope', function ($scope, $timeout) {

var headerTemplate = '<div class="ui-grid-top-panel" style="text-align: center">Transport Orders List</div>';

$scope.filterOptions = {
    filterText: ''
}
$scope.gridOptions = {
    data: 'filteredTransportOrders',
    enableSorting: true,
    pagingPageSizes: [5, 10, 15],
    pagingPageSize: 5,
    columnDefs: [
        {field: 'tpc', displayName: 'TPC', 
            menuItems: [{
                title: 'Values:',
            },
            {
                title: 'Get 1',
                icon: 'ui-grid-icon-check',
                action: '',
                context: ''
            }
            ]
        },
        {field: 'orderdate', displayName: 'Order Date'},
        {field: 'process', displayName: 'Process'},
        {field: 'protectionlevel', displayName: 'Protection Level'},
        {field: 'orderline', displayName: 'Order Line'},
        {field: 'code', displayName: 'Code'},
        {field: 'xdockleg', displayName: 'X Dock Leg'},
        {field: 'origin', displayName: 'Origin'},
        {field: 'xdock', displayName: 'X Dock'},
        {field: 'destination', displayName: 'Destination'},
        {field: 'palletspaces', displayName: 'Pallet Spaces'},
        {field: 'despatchwindowfrom', displayName: 'Despatch Window From'},
        {field: 'despatchwindow', displayName: 'Despatch Window'}
    ],
    filterOptions: $scope.filterOptions,
    enableFiltering: true,
    exporterMenuCsv: false,
    enableGridMenu: true
};


}

感谢您的回答！：D

Answer 1

如果我理解你的意图正确，你可以做些什么来轻松展示，隐藏行就像是

{field: 'orderdate', displayName: 'Order Date', show: true}

在模板中，您可以执行类似

的操作

<table>
    <tr ng-repeat="row in gridOptions.columnDefs">
        <td ng-show="row.show" ng-bind="row.displayName"></td>
        <td ng-show="row.show" ng-click="row.show = !row.show">Make it hide</td>
        <td ng-show="!row.show" ng-click="row.show = !row.show">Make it show</td>
    </tr>
</table>

Demo

Larger example