9

データベースのデータを操作するために、bootstrap-table を使用しています。

ページネーション機能を使用し、制限およびオフセット オプションを使用してユーザーが要求した行数のみを送り返します。

また、テーブル コントロール拡張機能を使用して、結果を簡単にフィルタリングできるようにしています。ただし、 data-filter-control="select" でフィルタリングするための選択コントロールを使用すると、エントリはその結果セット内で返されたものだけになります。

他のフィルターを適用すると、リストが大きくなります。API を使用して、サーバーから可能なすべてのアイテムのリストをプリロードして、そのリストのオプションを介してフィルタリングできるようにしたいと考えています。

フィルター処理された結果のセットごとに結果を返すことができますが、おそらく JSON の別の要素で、そのデータのセットを常に送信する必要がないため、コントロール自体が読み込まれた後にこのリストを読み込むのが最善でしょう。各フィルターでコントロールに。

これは可能ですか？API を使用して、一連の値を含むこのリストをプリロードできますか?

https://github.com/wenzhixin/bootstrap-table/issues/904とパッチのメモと同様の問題を説明しているように見える github の問題がありますが、方法がわかりませんそれを実装します。

maxcdn.bootstrapcdn.com のブートストラップ 3.3.4 を使用しており、cdnjs.cloudflare.com 経由でブートストラップ テーブル 1.8.1 を使用しています。

編集：FireBugを使用してコードを1行ずつステップスルーし、これができるかどうかを判断した後、これを理解しました。

フィルターにデータを提供するには、2 つのオプションがあります。属性 data-filter-data を に追加します。「var」または「url」オプションの後にアンダースコア（または破棄される他の文字）を使用し、「var」の場合はオブジェクト名を渡すことができます。私の場合は、この data-filter-data= のようになります"var_OnlineValues" を実行し、オブジェクト var OnlineValues = { "": "", "Started" : "Started", "Submitted" : "Submitted" } を使用します。また、JSON として返すサーバー上のデータもあります。data-filter-data="url_filename.php" であり、返されるオブジェクトはキーと値のペアです。

これが役立つことを願っています。

4

2 に答える 2

8

使い方data-filter-data列に属性を 追加します。

例：

<script>
var payment_methods = {
  "PP": "PayPal - PP",
  "CC": "PayPal - CC"
};
</script>

<th data-field="payment_method" data-sortable="true" data-filter-control="select" data-filter-data="var:payment_methods">Payment Method</th>

filterDataオプションのドキュメントがないため、コードを読む必要がありました。以下、該当部分を引用します。がありsubstring(0,3)、有効な値はurlまたはvarです。次の文字は無視されます。

タイプが の場合url、ajax 呼び出しを行い、応答 JSON を選択オプションに入力します。構造は単純な {key:value} です。

タイプが の場合、オプションで指定されたグローバル変数をvar調べます。window[filterDataSource]データ構造は単純な {key:value} オブジェクトです。

    if (column.filterData !== undefined && column.filterData.toLowerCase() !== 'column') {
        var filterDataType = column.filterData.substring(0, 3);
        var filterDataSource = column.filterData.substring(4, column.filterData.length);
        var selectControl = $('.' + column.field);
        addOptionToSelectControl(selectControl, '', '');

        switch (filterDataType) {
            case 'url':
                $.ajax({
                    url: filterDataSource,
                    dataType: 'json',
                    success: function (data) {
                        $.each(data, function (key, value) {
                            addOptionToSelectControl(selectControl, key, value);
                        });
                    }
                });
                break;
            case 'var':
                var variableValues = window[filterDataSource];
                for (var key in variableValues) {
                    addOptionToSelectControl(selectControl, key, variableValues[key]);
                }
                break;
        }
    }
于 2015-12-02T20:54:54.957 に答える
5

これを機能させるために、ブートストラップ テーブルを変更する必要はありません。data-filter-data列のプロパティを使用して、ドロップダウン選択にデフォルト値を設定する方法があります。以下を追加してみてください。

頭に：

<head>
    // ... included scripts go here also
    <script>
        var filterDefaults = {
            somekey: 'some string value',
            anotherkey: 'another value'
        };
    </script>
</head>

data-filter-data:'var:filterDefaults'次に、列に追加します。

<table id="table"
      data-toggle="table"
      data-filter-control="true">
     <thead>
         <tr>
             <th data-field="id">ID</th>
             <th data-field="name" data-filter-control="input">Item Name</th>
             <th data-field="price" data-filter-control="select" data-filter-data="var:filterDefaults">Item Price</th>
         </tr>
     </thead>
</table>
于 2016-01-29T18:42:45.693 に答える