All geek questions in one place

Smart table show / hide toggle column

I am new to AngularJS and SmartTable ... I am currently trying to get SmartTable to show show / hide for columns. From what I take, SmartTable does not, so I use the show / hide ng-Grid function ... trying to execute this solution: how to hide / show the ng-grid column from the outside?

When I implemented this solution, my columns are not displayed.

How do you set smartTable columns for "show" during initial setup? I think this is what I am missing ...

Here is my 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()); } }]);

and here is my 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>

You can see my entire installation on my plunker example:

http://plnkr.co/edit/6F8NsDdgaWranTXeIQuV?p=preview

Thanks!!

+5
source share
3 answers

In case someone else is trying to do this, I did not go on the ngGrid route. I was able to use the buttons and ng-hide to accomplish what I wanted. For my html, I did this:

 <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>

and my 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"; }]);
+8
source

I know this is old, but wrote this directive that solves it. he does everything alone.

https://github.com/cesardmoro/tableColumnToggler

0
source

If you want a more dynamic solution, I would recommend having an array of column objects, for example:

  $scope.columns=[{name: 'firstName', template: 'template1.html'}, {name: 'lastName', template: 'template2.html' }];

And you will create these columns in the body of the smart table:

  <tbody> <tr ng-repeat="row in rowCollection"> <td ng-repeat="col in columns"> <div ng-include src="col.template"></div> </td> </tr> </tbody>

I have a plunker example where I define an array of columns and template files for each column. It also has a Drag n 'Drop funcitonality function using lrDragNDrop.

0
source

Source: https://habr.com/ru/post/1211452/

More articles:


All Articles