【问题标题】:wenzhixin bootstrap-table unable to click on select2wenzhixin bootstrap-table无法点击select2
【发布时间】:2015-08-11 18:28:36
【问题描述】:

这就是问题所在,在 Codeply http://www.codeply.com/go/rxWzeVwBUa 中组装了一个模型。

我无法单击带有数据表的 Select2 下拉框。任何帮助将不胜感激。

    <div class="container">
        <h1>From data</h1>
        <p></p>
        <table id="table">
            <thead>
            <tr>
                <th data-field="id">ID</th>
                <th data-field="name">Item Name
                    <select class='table finditem'>
                        <option></option>
                        <option value='0'>Item 0</option>
                        ...
                    </select>
                </th>
                <th data-field="price">Item Price</th>
            </tr>
            </thead>
        </table>
    </div>

        $table.bootstrapTable({
            data: data});
        });


        $('#finditem').select2({
            placeholder: 'Find Item',
            allowClear: true
        });

【问题讨论】:

  • 您是否在一个元素中使用id="finditem" 而在另一个元素中使用class="finditem"?这是故意的吗?无论如何,由于您使用 jquery 选择器.finditem,因此目前只会激活带有类的那个。
  • 对不起,不是故意的,本来只是一个ID,为了例子转换成一个类。在链接上它也包含在一个类中,因此它可以正确初始化。
  • 您的代码看起来不错。看来这两个插件一起玩得不好。我想引导表会劫持您的点击,并且不会让它冒泡到 select2-element。
  • 那是我的想法。我暂时将它们放在表格上方的工具栏中,但是使用引导程序正确格式化 select2 完全是另一个噩梦。我希望不必处理那个(如果我可以把它放在表头中会更干净)。

标签: jquery twitter-bootstrap jquery-select2 bootstrap-table


【解决方案1】:

我在github上将此发布给开发者,开发者发布了解决方案;

https://github.com/wenzhixin/bootstrap-table/issues/1254#issuecomment-130358202 http://www.codeply.com/go/e4LJoKfhdR

$table.on('post-header.bs.table', function () {
    $('.finditem').select2({
        placeholder: 'Find Item',
        allowClear: true
    });
});

顺便说一句,我发现如果你想使用任何 select2 事件监听器,它们也必须放在这个函数中。我使用一系列级联的 select2 框在它们被选中时自动更新表格。

    $table.on('post-header.bs.table', function () {
        $('.finditem').select2({
            placeholder: 'Find Item',
            allowClear: true
        });
        $('.finditem').on('select2:close', function(){
            $table.bootstrapTable('refresh');
        });
    });

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2017-08-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2015-12-04
    相关资源
    最近更新 更多