angularjs - 智能表的显示/隐藏列示例？

Question

ui-grid 有一个 enableGridMenu: true 标志，它提供了一个下拉菜单来显示/隐藏列。这是一个例子： http ://ui-grid.info/docs/#/tutorial/304_grid_menu

smart-table 是否提供任何 OOTB 显示/隐藏功能或我缺少的可用扩展？我知道这可以通过蛮力完成，我找到了这个要点，但它处理列级别的显示/隐藏，而不是表范围的“enableGridMenu”简单启用。 https://gist.github.com/srph/2443ece955799fee1d9f

Answer 1

嗨，我的方法比蛮力更面向对象，标记完全由称为“列”的对象数组构建

该解决方案的灵感来自于此处http://lorenzofox3.github.io/smart-table-website/#examples-section的列拖放示例

首先，我定义了一个“列”数组，您可以根据需要创建任意数量的这些对象

   {
        'name': 'Nice Name',
        'value': 'name',
        'class': '',
        'data': 'row.name',
        'ngShow': true,
   }

现在我有了我的列，我可以在我的表格标记中做这样的事情

<tr ng-repeat="row in tableRows">
    <td ng-repeat="col in columns" ng-class="{{col.ngClass}}" ng-style="{{col.ngStyle}}" ng-show="col.ngShow">
       <div ng-bind="{{col.data}}"></div>
    </td>
</tr>

然后我为列切换开关创建一个单独的标记

<p ng-repeat="col in columns"> <a ng-click="col.ngShow = !col.ngShow">{{col.name}}</a> </p>