引导程序表过滤器控制扩展填充选择完整的选项列表

我正在使用bootstrap表来处理来自我的数据库的数据。引导程序表过滤器控制扩展填充选择完整的选项列表

我使用分页功能，只发送用户使用限制和偏移选项请求的行数。

我也使用表格控件扩展来简化结果过滤。但是，当我使用数据过滤器控制=“选择”筛选的选择控件时，条目就是那些结果集中返回的条目。

当我应用其他过滤器时，列表将会增长。我想使用这个API，并让它预先从服务器列表中列出所有可能的项目，以便通过这些选项进行过滤。

尽管我可以将结果返回给每个过滤的结果集，也许在JSON的单独元素中，但最好在控件本身加载后加载此列表，因为我不需要经常发送该数据集与每个过滤器的控制。

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

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

我使用从maxcdn.bootstrapcdn.com引导3.3.4和我使用的自举表1.8.1通过cdnjs.cloudflare.com

编辑：我已经用Firebug后想通了这一点步骤通过逐行代码来弄清楚我是否可以做到这一点。

将数据提供给过滤器有两种选择。将属性data-filter-data添加到。你可以使用一个“var”或“url”选项，后跟一个下划线（或者其他一些被丢弃的字符），然后在“var”的情况下传递一个对象名称，我的看起来像这样data-filter-data = “var_OnlineValues”并使用我的对象var OnlineValues = {“”：“”，“Started”：“Started”，“Submitted”：“Submitted”}。我还在服务器上有一些我以JSON形式返回的数据。 data-filter-data =“url_filename.php”，返回的对象是一个键/值对。

我希望这会有所帮助。

来源

2015-06-15 Daniel M

用法将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-02 20:54:54

真的做得很好。它完美的作品。（var部分只测试过） – jermey

您无需修改引导程序表即可使其工作。有一种方法可以使用列的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-29 18:42:45

引导程序表过滤器控制扩展填充选择完整的选项列表

回答

相关问题