1

スマート テーブルには、すべての列 (st-search) または 1 つの目的の列 (st-search="'firstName') を検索する機能が組み込まれています。複数の列 (すべてではない) 内で検索を行うことは可能ですか? 例: 次のようなテーブルがある場合: 名前、ニックネーム、住所などのデータ:

  1. ジョン、JJ、いくつかの住所
  2. スティーブ、ジョンも演説
  3. ジェーン、ジェーン、ジョン村

「John」を検索すると、最初の 2 列のみが結果として表示されます。出来ますか？

4

5 に答える 5

4

同様の問題があり、この投稿のヒントを使用して解決しました。

スマートテーブルのドキュメントには次のように記載されています。

はstSetFilter、Smart Table を検索するときに使用されるフィルターを置き換えます。1 つのエントリが別のエントリのサブストリングである select のように、デフォルトの動作がstSearch要求を満たさない場合は、カスタム フィルタを使用して目的を達成します。

と：

st-safe-srcコレクション内のすべての個別の要素を適切に表示するには、select が必要であることに注意してください。これを省略すると、select にはテーブルに表示されている要素の値のみが含まれ、ページングの影響も受けます。

HTML の table 要素内で独自のフィルターを宣言できます。

<table ... st-set-filter="myCustomFilter" class="table table-striped">

...そして、述語関数を使用して (アプリ内で) フィルターをカスタマイズできます。次のように動作します。

// filter method, creating `myCustomFilter` a globally
// available filter in our module
.filter('myCustomFilter', ['$filter', function($filter) {

  // function that's invoked each time Angular runs $digest()
  return function(input, predicate) {
    searchValue = predicate['$'];
    //console.log(searchValue);
    var customPredicate = function(value, index, array) {
      console.log(value);

      // if filter has no value, return true for each element of the input array
      if (typeof searchValue === 'undefined') {
        return true;
      }

      var p0 = value['name'].toLowerCase().indexOf(searchValue.toLowerCase());
      var p1 = value['nickname'].toLowerCase().indexOf(searchValue.toLowerCase());
      if (p0 > -1 || p1 > -1) {
        // return true to include the row in filtered resultset
        return true;
      } else {
        // return false to exclude the row from filtered resultset
        return false;
      }
    }

    //console.log(customPredicate);
    return $filter('filter')(input, customPredicate, false);
  }
}])

フィルタの動作を確認するために、この小さなplnkrを作成しました

于 2015-09-14T14:53:05.357 に答える
1

いいえ、回避策は、テーブルコントローラーを必要とする独自のディレクティブを作成し、その API を 2 回呼び出すことです (検索が追加されるため)。

directive('stSearch', ['$timeout', function ($timeout) {
    return {
        require: '^stTable',
        scope: {
            predicate: '=?stSearch'
        },
        link: function (scope, element, attr, ctrl) {
            var tableCtrl = ctrl;

            // view -> table state
            element.bind('input', function (evt) {
                evt = evt.originalEvent || evt;
                tableCtrl.search(evt.target.value, 'column1');
                tableCtrl.search(evt.target.value, 'column2');
            });
        }
    };
}]);

詳細については、stSearch ディレクティブを参照してください。

于 2015-03-01T16:33:25.587 に答える