9

我正在使用 bootstrap-table 处理我的数据库中的数据。

我使用分页功能，并且仅使用限制和偏移选项发回用户请求的行数。

我还使用 table-control 扩展来轻松过滤结果。但是，当我使用选择控件进行过滤时， data-filter-control="select" 条目只是该组结果中返回的条目。

当我应用其他过滤器时，列表会增长。我想使用 API 并让它从服务器中为该列表预加载所有可能项目的列表，以允许通过这些选项进行过滤。

虽然我可以将结果与每个过滤的结果集一起发回，可能在 JSON 的单独元素中，但最好在控件本身加载后加载此列表，因为我不需要经常发送该组数据到每个过滤器的控制。

这可能吗？我可以使用 API 用一组值预加载此列表吗？

github上有一个问题似乎描述了与我遇到的问题类似的问题https://github.com/wenzhixin/bootstrap-table/issues/904和补丁说明，但我不知道如何实施。

我正在使用来自 maxcdn.bootstrapcdn.com 的 bootstrap 3.3.4，我正在通过 cdnjs.cloudflare.com 使用 bootstrap-table 1.8.1

编辑：在使用 FireBug 逐行遍历代码以确定我是否可以做到这一点后，我已经弄清楚了这一点。

向过滤器提供数据有两种选择。将属性 data-filter-data 添加到 . 您可以使用“var”或“url”选项后跟下划线（或其他一些被丢弃的字符），然后在“var”的情况下传递一个对象名称，我的看起来像这样 data-filter-data= “var_OnlineValues”并使用我的对象 var OnlineValues = {“”：“”，“开始”：“开始”，“提交”：“提交”}。我在服务器上也有一些以 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 回答