可与 Angular.js 一起使用

Question

我正在尝试将 footable(http://themergency.com/footable-demo/responsive-container.htm) 与 angular.js 一起使用。

随着窗口大小的减小，第 3、4、5 列仅在单击加号时显示。

Angular.js 提供过滤功能，所以当我输入如下搜索字符串时：

表格中的行被过滤。

现在的问题是当我尝试删除此搜索字符串时，如下所示：

所有行都再次显示，但 UI 被扭曲了。

我尝试在 angular.js 中使用

获取回调

$scope.$watch('searchStringID', function() {
$('#tableId').trigger('footable_initialize');
}

但是没有用，如果有人可以建议如何解决这个问题。

谢谢。

Answer 1

要添加到Daniel Stucki's answer，而不是每次ng-repeat 执行时添加每个单独的行，您可以等到 ng-repeat 完成，然后在父表本身上初始化 FooTable：

.directive('myDirective', function(){
  return function(scope, element){
    var footableTable = element.parents('table');

    if( !scope.$last ) {
      return false;
    }

    if (! footableTable.hasClass('footable-loaded')) {
      footableTable.footable();
    }
  };
})

这在多行表上的扩展性要好得多。

注意element 自动成为jQlite/jQuery object，因此不再需要用$() 语法包装它。

更新

AngularJS 的优点之一是双向数据绑定。要使 FooTable 数据与最新数据保持同步，您可以执行以下操作：

.directive('myDirective', function(){
  return function(scope, element){
    var footableTable = element.parents('table');


    if( !scope.$last ) {
        return false;
    }

    scope.$evalAsync(function(){

        if (! footableTable.hasClass('footable-loaded')) {
            footableTable.footable();
        }

        footableTable.trigger('footable_initialized');
        footableTable.trigger('footable_resize');
        footableTable.data('footable').redraw();

    });
  };
})

scope.$evalAsync 包装器在 DOM 准备好但在显示之前执行，防止数据闪烁。额外的trigger 和redraw 方法会强制初始化的FooTable 实例在数据更改时更新。

该指令保留了用户体验 - 任何 FooTable 排序、过滤或分页保持不变 - 同时在数据更新时无缝加载数据。

Answer 2

我偶然发现了同样的问题。在最终编写了一个自己的解决方案来获得一个带有隐藏列的表之后，我设法解决了你的问题（假设你使用 ng-repeat 来构建你的表）。

html:

<div ng-init="friends =     [{name:'data11', phone:'data12'},
                         {name:'data21', phone:'data22'},
                         {name:'data31', phone:'data32'},
                         {name:'data41', phone:'data42'},
                         {name:'data51', phone:'data52'}]"></div>

Search: <input ng-model="searchText">
<table id="searchTextResults" class="footable">
<thead>
  <tr><th>Column1</th><th>Column2</th><th data-hide="phone">Column3</th><th data-hide='phone'>Column4</th><th data-hide='phone'>Column5</th></tr>
</thead>

<tbody>
  <tr ng-repeat="friend in friends | filter:searchText" my-directive>
    <td>{{friend.name}}</td>
    <td>{{friend.phone}}</td>
    <td>{{friend.phone}}</td>
    <td>{{friend.phone}}</td>
    <td>{{friend.phone}}</td>
  </tr>
</tbody>
</table>

控制器：

.directive('myDirective', function(){
  return function(scope, element)
  {

    if(scope.$last && !$('.footable').hasClass('footable-loaded')) {
            $('.footable').footable();
    }

    var footableObject = $('.footable').data('footable');
    if (footableObject  !== undefined) {
            footableObject.appendRow($(element));
    }

  };})

希望这会有所帮助。

Answer 3

以防万一将来有人偶然发现这个问题，这里有一个可用于 FooTable 的 angular 指令：https://github.com/ziscloud/angular-footable。