Question

我使用bootstrap-table处理来自数据库的数据。

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

我也在使用table-control扩展来轻松过滤结果。但是，当我使用select控件进行过滤时，使用data-filter-control =＆＃34;选择＆＃34;条目只是那组结果中返回的条目。

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

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

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

github上存在一个问题似乎与我https://github.com/wenzhixin/bootstrap-table/issues/904描述了类似的问题以及补丁的注意事项，但我不确定如何实现它。

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

编辑：在使用FireBug逐行遍历代码以确定是否可以执行此操作之后，我已经想到了这一点。

向过滤器提供数据有两种选择。将属性data-filter-data添加到。你可以使用＆＃34; var＆＃34;或者＆＃34; url＆＃34;选项后跟一个下划线（或其他一些被丢弃的字符），然后是＆＃34; var＆＃34;传递给它一个对象名称，我看起来像这样的data-filter-data =＆＃34; var_OnlineValues＆＃34;并使用我的对象var OnlineValues = {＆＃34;＆＃34;：＆＃34;＆＃34;，＆＃34;已启动＆＃34; ：＆＃34;开始＆＃34;，＆＃34;已提交＆＃34; ：＆＃34;已提交＆＃34; }。我在服务器上也有一些数据作为JSON返回。数据过滤器数据=＆＃34; url_filename.php＆＃34;返回的对象是键/值对。

我希望这会有所帮助。

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

如果类型为url，则进行ajax调用以将响应JSON填充到选择选项中。结构很简单{key：value}。

如果类型为var，则查找window[filterDataSource]，这是该选项指定的全局变量。数据结构很简单{key：value} object。

    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>

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

2 个答案: