2016-12-22 9 views
4

私はビジネス情報を表示するためのUIアプリケーションを持っています。私は滑らかなグリッドを使用して、すべてのグリッドのすべてのビルトインプロパティを使用して、すべてのビジネスデータを表形式/グリッド形式で表示しました。私は、各列のデータをフィルタリングするためにfilterプロパティを使用しました。ユーザーがslick-header-menuitemドロップダウンをクリックしたときに、すべてのデータをslickgridに取得する方法。

しかし、私はAzureストレージテーブルから1kデータを取得しているので、pageSizeを10に設定し、pageSizeを渡してdataView.setPagingOptions({pageSize:pageSize})のページ設定を設定します。私たちがドロップダウンでslick-header-menuitemをクリックすると(昇順ソート、降順ソート、検索、および(filter divに含まれるグリッドのデータ)が表示されます。

これでフィルタリングする必要があるデータをフィルタリングするためにチェックボックスをクリックすると、問題なくデータをフィルタリングします。すべてのものがここでフィルタのドロップダウンリストに表示されます。下の画像に示すような(Select All、Blank、IT、USA、USA)

しかし、フィルタリングのドロップダウン(filter div)の後にもう一度slick-header-menuitemをクリックすると、問題が発生します。 のようなデータが表示されます(すべて選択、空白、IT、米国、米国、私は)フィルタリングしたデータをグリッド内のすべてのデータフィルタとデータを1kレコードから取得すると仮定していますが、以前には存在しなかったフィルタdivオプションにデータが追加されます。私のグリッドは、このようにいろいろ書いを探しているrefrenceため

私も、私はをクリックした時を示す二つの画像

最初の画像を添付しています検索やページネーション

http://danny-sg.github.io/slickgrid-spreadsheet-plugins/examples/example-2-everything.htm

以外(以下はURLです)最初にslick-header-menuitemをドロップダウンします。 enter image description here

もう1つの画像は、フィルタリングされたデータの後にslick-header-menuitemドロップダウンを再度クリックしたときを示します。私は、このフォルダは、フィルタフォルダとフィルタフォルダが含まれているプラ​​グインフォルダが存在しているslickgridライブラリーを経てい

enter image description here

は、このファイルext.headerfilter.js が含まれている「機能getFilterValues(データビュー、列と呼ばれる方法が含まれています)、 "function getFilterValuesByInput($ input){...}"と "function getAllFilterValues(data、column){...}"のように、デバッグはしていますが、成功しません。デバッグの

答えて

3

ようやく多くは私が滑らかなグリッドライブラリについて悩まないですここ レコードをフィルタリングするためのソリューションを持って、それがかっこいいライブラリはので、私が行っている私の要件に基づいて私の経験 あたりのようですext.headerfilter.jsファイルのいくつかの変更 これらの関数内でgetFilterValues()とgetFilterValuesByInput($ input)という関数に行きます。forループと変数のいくつかの変更を行ったところで、コードはgetFilterValues()とgetFilterValuesByInputためgetFilterValuesByInput($入力)

function getFilterValues(dataView, column) { 
      var seen = []; 
      // for (var i = 0; i < dataView.getLength() ; i++) { 
      for (var i = 0; i < dataView.getItems().length ; i++) { 
       // var value = dataView.getItem(i)[column.field]; 
       var value = dataView.getItems()[i][column.field]; 

       if (!_.contains(seen, value)) { 
        seen.push(value); 
       } 
      } 


      return _.sortBy(seen, function (v) { return v; }); 
     } 

コード($入力)

function getFilterValuesByInput($input) { 
      var column = $input.data("column"), 
       filter = $input.val(), 
       dataView = grid.getData(), 
       seen = []; 

      // for (var i = 0; i < dataView.getLength() ; i++) { 
      for (var i = 0; i < dataView.getItems().length ; i++) { 
       // var value = dataView.getItem(i)[column.field]; 
       var value = dataView.getItems()[i][column.field]; 

       if (filter.length > 0) { 
        var mVal = !value ? '' : value; 
        var lowercaseFilter = filter.toString().toLowerCase(); 
        var lowercaseVal = mVal.toString().toLowerCase(); 
        if (!_.contains(seen, value) && lowercaseVal.indexOf(lowercaseFilter) > -1) { 
         seen.push(value); 
        } 
       } 
       else { 
        if (!_.contains(seen, value)) { 
         seen.push(value); 
        } 
       } 
      } 

      return _.sortBy(seen, function (v) { return v; }); 
     } 
関連する問題