переключатель отображения/скрытия столбца смарт-таблицы

Я новичок в AngularJS и SmartTable... В настоящее время я пытаюсь заставить SmartTable иметь переключатель отображения/скрытия для столбцов. Насколько я понимаю, SmartTable этого не делает, поэтому я использую функцию отображения/скрытия ng-Grid... пытаясь следовать этому решению: как скрыть/показать столбец ng-grid извне?

Когда я реализовал это решение, мои столбцы не отображаются.

Как настроить отображение столбцов 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>

You can see my entire setup on my plunker example:

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

Спасибо!!


angularjs ng-grid smart-table
person user2827707    schedule 19.01.2015    source источник
comment
Вы говорите, что хотите использовать ngGrid, но это не так. Без этого вы не получите $gridScope. Также посмотрите на свою консоль на наличие других ошибок   -  person PSL    schedule 20.01.2015

Ответы (3)


arrow_upward
8
arrow_downward

На случай, если кто-то еще попытается это сделать, я не стал использовать маршрут 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: '[email protected]'},
    {firstName: 'Blandine', lastName: 'Faivre', birthDate: new Date('1987-04-25'), balance: -2323.22, email: '[email protected]'},
    {firstName: 'Francoise', lastName: 'Frere', birthDate: new Date('1955-08-27'), balance: 42343, email: '[email protected]'}
];
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";
}]);
person user2827707    schedule 21.01.2015

arrow_upward
1
arrow_downward

Я знаю, что это старо, но написал эту директиву, которая решает эту проблему. это делать все в одиночку.

https://github.com/cesardmoro/tableColumnToggler

person cesar moro    schedule 28.03.2017

arrow_upward
0
arrow_downward

Если вам нужно более динамичное решение, я бы рекомендовал иметь массив таких объектов столбцов:

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

И вы отображаете эти столбцы в теле смарт-таблицы:

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

У меня есть пример plunker, когда я определяю массив столбцов и имею файлы шаблонов для каждого столбца. . Этот также имеет функцию Drag n 'Drop с использованием lrDragNDrop.

person Petrus Briland    schedule 27.04.2017