Question

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

智能桌提供任何OOTB显示/隐藏功能或已经可用的扩展名吗？我知道这可以做得很蛮力而且我找到了这个要点，但它处理了列级别的显示/隐藏而不是表格宽度＆＃34; enableGridMenu＆＃34;简单化的支持。 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>

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

1 个答案: