bootstrap-table-filter-control 扩展在 bootstrap-table 中不起作用

Posted 2023-05-08

【中文标题】bootstrap-table-filter-control 扩展在 bootstrap-table 中不起作用

【英文标题】：bootstrap-table-filter-control extension doesn't work in bootstrap-table

【发布时间】：2015-12-06 18:22:54

【问题描述】：

我使用bootstrap-table 并想使用table-filter-control 扩展名。在this 示例中，您可以看到如何使用此扩展。当我想将此扩展用于更多列时，它不起作用。在我的示例中，过滤器仅适用于一列。

jsfiddle

html

<table ref="mainTable" class="table table-striped table-bordered table-hover" 
       cellSpacing="0" id="mainTable" data-show-toggle="true" 
       data-show-columns="true" data-search="true" data-pagination="true" data-filter-control="true">
    <thead>
        <tr>
            <th data-field="state" data-checkbox="true"></th>
            <th data-field="Customer Name" data-sortable="true" data-filter-control="select">Customer Name</th>
            <th data-field="Location Type" data-sortable="true">Location Type</th>
            <th data-field="Location" data-sortable="true" data-filter-control="select">Location</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td>Cap Corp</td>
            <td>Main</td>
            <td>Norwalk CT 06851</td>
        </tr>
        <tr>
            <td></td>
            <td>Cap Corp</td>
            <td>Other</td>
            <td>Norwalk CT 06851</td>
        </tr>
        <tr>
            <td></td>
            <td>Tel</td>
            <td>Main</td>
            <td>Slough SL1 4DX</td>
        </tr>
        <tr>
            <td></td>
            <td>Tel</td>
            <td>Other</td>
            <td>London W1B 5HQ</td>
        </tr>
    </tbody>
</table>

【参考方案1】：

data-filed应该没有空格，换个试试

data-field="Customer Name"

到

data-field="CustomerName"

我更新了你的 jsfiddle 和 filter-control 作品。

http://jsfiddle.net/5h595r6g/9/

但是，正如我在这篇文章中描述的那样，将过滤器选项更新为可用值会很棒：

bootstrap table filter-control - how to unset unnecessary values from select options

【参考方案2】：

我实际上是把 select2 框放在 headers 中，然后使用 params 功能将代码传递给服务器。我提出了一个更好的解决方案。我的代码不在我身边，但如果你对它感兴趣，我可以在星期一传递一个示例。

编辑添加示例。

基本表

        <table id='90day'  class='table table-striped' data-filter-control='true'>
            <thead>
                <tr>
                    <th></th>
                    <th><select id='findfield' class='form-control gosearch'><option></option></select></th>
                    <th><select id='findwellname' class='form-control gosearch'><option></option></select></th>
                </tr>
            </thead>
        </table>        

初始化select2

        $('#90day').on('post-header.bs.table', function () 
            $('#findfield').select2(
                width: '100%',
                placeholder: 'Field',
                allowClear: true,
                SingleSelection: true,
                ajax: 
                    url: 'selectfield90day.php?active=y',
                    dataType: 'json',
                    //delay: 250,
                    data: function (params) 
                        $('#findfield').empty();
                        var d = new Date();
                        var n = d.getTime();
                        return 
                            q: params.term,
                            n: n
                        ;
                    ,
                    processResults: function (data) 
                        return  results: data ;
                    
                
            ); 
            $('#findwellname').select2(
                width: '100%',
                placeholder: 'Name',
                allowClear: true,
                ajax: 
                    url: 'selectwellname90day.php?active=y',
                    dataType: 'json',
                    delay: 250,
                    data: function (params) 
                        $('#findwellname').empty();
                        var d = new Date();
                        var n = d.getTime();
                        return 
                            q: params.term,
                            field: $('#findfield').text(),
                            pad: $('#findpad').text(),
                            n: n
                        ;
                    ,
                    processResults: function (data) 
                        return 
                            results: data
                        ;
                    
                
            );

            //refresh on any select2 change
            $('.gosearch').on('select2:close', function()
                $('#90day').bootstrapTable('refresh');
            ); 
        );

终于表初始化

$('#90day').bootstrapTable(
    url: ...,
    columns:[
        ...
    ],
    queryParams: function(params)
        params['field']=$('#findfield').text();
        params['well_name']=$('#findwellname').text();      
        return params;
    
);

【讨论】：

谢谢，如果你能把样品传给我，那就太好了:)

编辑了原始评论并添加了示例代码。 p.s.我的示例添加了带有class='form-control' 的引导样式表单控件。最终结果的照片可以在这里看到。 （显然，示例代码中只添加了 2 个 select2 框）。 s24.photobucket.com/user/solowookie1791/media/…

感谢您的 sn-p。非常有帮助。我保持这个线程打开，以防有人会出现另一个解决方案。

不客气。我花了一点时间来解决所有问题，但从可用性的角度来看，它的效果非常好。最终用户喜欢它。