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

Question

我正在使用bootstrap-table处理来自我的数据库的数据.

我使用分页功能,只使用limit和offset选项发回用户请求的行数.

我还使用表格控件扩展,以便轻松过滤结果.但是当我使用select控件进行过滤时,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"和utlizes我的对象var OnlineValues = {"":"","Started":"Started","Submitted":"Submitted"}.我在服务器上也有一些数据作为JSON返回.data-filter-data ="url_filename.php",返回的对象是键/值对.

我希望这有帮助.

Answer 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)，有效值为urlor var。下一个字符将被忽略。

如果类型为，url则进行ajax调用以将响应JSON填充到select选项中。结构很简单{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;
        }
    }

Answer 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>