Bootstrap-table 过滤器控制扩展使用完整的选项列表填充选择答案

【问题标题】：Bootstrap-table filter-control extension populating select with complete list of optionsBootstrap-table 过滤器控制扩展使用完整的选项列表填充选择
【发布时间】：2015-08-30 22:54:50
【问题描述】：

我正在使用 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" 并且返回的对象是一个键/值对。

我希望这会有所帮助。

【问题讨论】：

标签： jquery twitter-bootstrap bootstrap-table

【解决方案1】：

用法将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;
        }
    }

【讨论】：

做得很好。它完美地工作。（var 部分只测试过）

【解决方案2】：

您无需修改引导表即可完成这项工作。有一种方法可以使用列的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>

【讨论】：