bootstrap表

Question

我正在使用bootstrap切换样式复选框（data-toggle =＆＃34; toggle＆＃34;）。这一直很完美，没问题。但是，如果我将此复选框放在引导程序表（data-toggle =＆＃34; table＆＃34;）中，则引导程序切换复选框不再正常工作。
具体来说，更改事件将触发，但复选框/按钮不再显示滑动的开/关行为。只有当包含的表具有data-toggle =＆＃34; table＆＃34;时，我才将其缩小到最低限度。元素。
有没有人遇到过这个并提出解决方案？ 这是我的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

首先在输入中添加一个类

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

然后添加以下行：

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

之后：

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

希望这可以帮助你

Answer 3

我的解决方案：

Get-Content $b -Tail 3000 | Measure -Line -Word -Character | Out-File C:\Users\TimHen\Desktop\output.txt