引导表内的引导切换答案

【问题标题】：bootstrap toggle inside bootstrap table引导表内的引导切换
【发布时间】：2017-05-28 01:33:41
【问题描述】：

我正在使用引导切换样式的复选框 (data-toggle="toggle")。这一直运行良好，没有问题。但是，如果我将此复选框放在引导表 (data-toggle="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'));
});

【问题讨论】：

标签： jquery css twitter-bootstrap toggle

【解决方案1】：

我的解决方案：

$(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();
            });
        });
    };
 });

【讨论】：

【解决方案2】：

首先在你的输入中添加一个类

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

然后添加这一行：

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

之后：

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

希望对你有帮助

【讨论】：

我们把这些东西放在哪里？

【解决方案3】：

您使用的插件似乎并非旨在处理嵌套插件元素的呈现。除非您想更改源，否则您可以在 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插件。

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

【讨论】：