智能表列显示/隐藏切换
智能表列显示/隐藏切换
提问于 2015-01-20 07:13:39
我是AngularJS和SmartTable的新手……我目前正在尝试让SmartTable对列进行显示/隐藏切换。根据我的理解，SmartTable不会这样做，所以我使用ng-Grid show/hide feature...trying来遵循这个解决方案：how to hide/show ng-grid column externally?
当我实现这个解决方案时，我的列没有显示出来。
如何在初始设置时将smartTable列设置为“显示”？我想这就是我错过的..。
下面是我的js：
var app = angular.module('myApp', ['smart-table', 'ngGrid']);
app.controller('paginationCtrl', ['$scope', function (scope) {
var nameList = ['Brian', 'Bob', 'Marie', 'Jennifer', 'Frank'],
familyName = ['Smith', 'Miller', 'Patel', 'Jefferson', 'Mendez'];
...
$scope.toggleCol= function(i) {
$scope.gridOptions.$gridScope.columns[i].toggleVisible()
}
scope.itemsByPage=15;
scope.rowCollection = [];
for (var j = 0; j < 200; j++) {
scope.rowCollection.push(createRandomItem());
}
}]);下面是我的html：
<body ng-controller="paginationCtrl">
<p>Smart Table Example</p>
<input type="button" value="First Name" ng-click="toggleCol(0)" />
<table class="table table-striped" st-table="rowCollection">
<thead>
<tr>
<th st-sort="firstName">first name</th>
<th st-sort="lastName">last name</th>
<th st-skip-natural="true" st-sort="balance">balance</th>
<th>email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection">
<td>{{row.firstName}}</td>
<td>{{row.lastName}}</td>
<td>{{row.balance}}</td>
<td>{{row.email}}</td>
</tr>
</tbody>
<tfoot>
<tr>
<td class="text-center" colspan="5">
<div st-displayed-pages="7" st-items-by-page="itemsByPage" st-pagination=""></div>
</td>
</tr>
</tfoot>
</table>
你可以在我的柱塞示例中看到我的整个设置：
http://plnkr.co/edit/6F8NsDdgaWranTXeIQuV?p=preview
谢谢！！
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-01-22 07:52:52
以防其他人尝试这样做，我最终没有使用ngGrid路由。我能够使用按钮和ng-hide来完成我想要的事情。对于我的html，我这样做：
<button ng-click="firstNameToggle = !firstNameToggle" type="button" class="btn btn-primary">First Name</button>
<button ng-click="lastNameToggle = !lastNameToggle" type="button" class="btn btn-info">Last Name</button>
<button ng-click="balanceToggle = !balanceToggle" type="button" class="btn btn-default">Balance</button>
<button ng-click="emailToggle = !emailToggle" type="button" class="btn btn-success">Email</button>
</div>
<table class="table table-hover table-striped" st-table="rowCollection">
<thead>
<tr>
<th ng-hide="firstNameToggle" st-sort="firstName">first name</th>
<th ng-hide="lastNameToggle"st-sort="lastName">last name</th>
<th ng-hide="balanceToggle"st-skip-natural="true" st-sort="balance">balance</th>
<th ng-hide="emailToggle">email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="row in rowCollection">
<td ng-hide="firstNameToggle">{{row.firstName}}</td>
<td ng-hide="lastNameToggle">{{row.lastName}}</td>
<td ng-hide="balanceToggle">{{row.balance}}</td>
<td ng-hide="emailToggle">{{row.email}}</td>
</tr>
</tbody>还有我的js：
app.controller('basicsCtrl', ['$scope', function (scope) {
scope.rowCollection = [
{firstName: 'Laurent', lastName: 'Renard', birthDate: new Date('1987-05-21'), balance: 102, email: 'whatever@gmail.com'},
{firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: 'oufblandou@gmail.com'},
{firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: 'raymondef@gmail.com'}
];
scope.getters={
firstName: function (value) {
//this will sort by the length of the first name string
return value.firstName.length;
}
}
scope.firstNameToggle = "false";
scope.lastNameToggle = "false";
scope.balanceToggle = "false";
scope.emailToggle = "false";
}]);Stack Overflow用户
发布于 2017-03-29 04:52:30
我知道这很老，但是写了这个指令来解决它。这一切都是单独完成的。
Stack Overflow用户
发布于 2017-04-27 21:21:40
如果您想要一个更动态的解决方案，我建议使用一个列对象数组，如下所示：
$scope.columns=[{name: 'firstName', template: 'template1.html'}, {name: 'lastName', template: 'template2.html' }];并在smart表体中呈现这些列：
<tbody>
<tr ng-repeat="row in rowCollection">
<td ng-repeat="col in columns">
<div ng-include src="col.template"></div>
</td>
</tr>
</tbody>当我定义列数组并为每列定义模板文件时，我有一个plunker示例。它还具有使用lrDragNDrop拖放n‘Drop功能。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28035149
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号