bootstrap 在里面切换 bootstrap table

Question

我正在使用 bootstrap 切换样式的复选框 (data-toggle="toggle")。这一直运行完美，没有问题。但是，如果我将此复选框放在 bootstrap table (data-toggle="table") 中，bootstrap 切换复选框将不再正常工作。
具体来说，更改事件触发但 checkbox/button 不再显示滑动 On/Off 行为。我已将其缩小到仅当包含 table 具有 data-toggle="table" 元素时才会发生。
有没有人遇到过这个并提出解决方案？
这是我的 jsFiddle 演示这个问题： JSFiddle

html:

<div class="cDemo">
<div id="toolbar">
<span>This first table demonstrates the problem</span>
</div>
<table class="table config-table"
   data-toggle="table"
   data-sort-name="Name"
   data-sort-order="asc"
   data-toolbar="#toolbar"
   data-search="true"
   data-search-text=""
   data-pagination="true"
   data-page-size="5"
   data-page-list="[5,10,15]"
   id="configTable">
<thead>
  <tr>
<th data-field="Enable">Enable</th>
<th data-field="Name">Name</th>
  </tr>
</thead>          
  <tr>
  <td>
  <span class="label label-pill pull-left">
    <input id="toggle-trigger" 
          checked="checked"
           data-toggle="toggle"
           class="on-off-btn"
           data-size="mini"
           data-onstyle="danger"
           data-offstyle="default"
           type="checkbox" />
  </span>
</td>
<td>File Name</td>
</table>
</div>
<div id="showResponse1"></div>

jquery:

$('.on-off-btn').bootstrapToggle({
  on: 'On',
  off: 'Off'
});

$('.cDemo').on("change","#toggle-trigger",function(e){
    var link = $(e.target);
    $('#showResponse1').html('Toggle: ' + link.prop('checked'));
});

Answer 1

您使用的插件似乎不是为处理嵌套插件元素的呈现而设计的。除非您想更改源，否则您可以在 bootstrap-table 插件初始化后动态添加和初始化您的切换开关。

在您想要切换开关的位置添加一个 <span class="toggle-placeholder" /> 占位符。然后全部初始化：

$(function() {
    var $checkbox = '<input type="checkbox" checked="checked "data-toggle="toggle" data-onstyle="danger" class="on-off-btn" data-size="mini" />'
    $('.toggle-placeholder').html($checkbox);
    $('.toggle-placeholder').find('input[type=checkbox][data-toggle=toggle]')
                            .each(function(){
        $(this).bootstrapToggle();
    });
});

如您所见，$checkbox 是您的 html 开关，您之前在标记中会有。然后我们将占位符内容设置为 $checkbox html，然后对于页面上的每个 .toggle-placeholder，我们初始化 bootstrap-toggle 插件。

现在这是一个粗略的示例，其中每个开关都是相同的，但您可以通过在占位符中包含您的设置来自定义每个开关。从这里开始，新的初始化函数可以通过读取占位符属性将它们分配给复选框。

Answer 2

首先在您的输入中添加一个class

(input class="class-check".....)

然后添加这一行：

$('.class-check').bootstrapToggle();

之后：

$('#showResponse2').html('Toggle2: ' + link.prop('checked'));

希望对您有所帮助

Answer 3

我的解决方案：

$(document).ready(function(){ 
    //init jQuery DataTable
    $('#mainTabel').DataTable({
        'pageLength': 25,
        'columnDefs': [
            {
                'orderable': false,
                'targets': 7              
            },
            {
                className: '.hide',
                'visible': false
            }
        ],      
        // dom: 'Bfrtip',
        // buttons: [
        //     'copy', 'csv', 'excel', 'pdf', 'print'
        // ],
        'language': {
                    'search': "_INPUT_",
                    'searchPlaceholder': 'Search...'
                    },
      'paging'      : true,
      'lengthChange': true,
      'searching'   : true,
      'ordering'    : true,
      'info'        : true,
      'autoWidth'   : true

    }); 
    $('#mainTabel').DataTable().columns('.hide').visible(false);


    //init botstrapToggle
    initToggle();
    $('#mainTabel_wrapper').click( function(){
        initToggle();
    });        
    $('#mainTabel_filter').keyup( function(){
        initToggle();
    });

    function initToggle(){ 
        $(function() {      
            $('.cb').find('input[type=checkbox][data-toggle=toggle]')
                                    .each(function(){
                $(this).bootstrapToggle();
            });
        });
    };
 });

bootstrap 在里面切换 bootstrap table

bootstrap toggle inside bootstrap table

css

jquery

toggle

twitter-bootstrap