Question

在FooTable 3.1.4中，我想在表格的标题中使用一个预先设定的i-Check checkbox作为checkAll功能。

这是没有i-Check的HTML：

<th data-type="html" data-sortable="false"
    data-filterable="false" style="display: table-cell;"
    class="footable-last-visible">Choose
    <input name="check_all" class="all" type="checkbox">
</th>

当我们运行此脚本时没有 i-Checks它运行正常。但是 - 应用i-Checks使得美化复选框无法点击 - 我们无法检查/取消选中。

这是应用了i-Check的HTML：

<th class="footable-last-visible" data-type="html" data-sortable="false" 
    data-filterable="false" style="display: table-cell;">Kies
    <div class="icheckbox_square-green" style="position: relative;">
      <input type="checkbox" name="check_all" class="all" 
        style="position: absolute; opacity: 0;">
          <ins style="position: absolute; top: 0%; left: 0%; display: block; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255) none repeat scroll 0% 0%; border: 0px none; opacity: 0;"
               class="iCheck-helper">
         </ins>
   </div>
</th>

所以似乎FooTable不接受表格头部的i-Checks修改HTML。我找到了一个（已关闭的）Github Issue帖子来解决这个问题：

“问题在于排序组件是通过单击来解决的整个TH元素并在处理程序中调用e.preventDefault（）。这基本上是杀死了元素的默认点击行为放在标题元素中。我已经删除了这个限制它很快就会在下一个版本中发布。“

但是这篇文章没有说明FooTable的哪个版本解决了这个问题。

或者我在代码中犯了错误......所以 - 任何输入都非常感激。

Answer 1

您的脚本必须是：

//first
$('.table').footable();

//after
$('#checkall').on('ifChecked ifUnchecked',function(evant){
      if(evant.type == 'ifChecked')
        $('.check').iCheck('check');
      else
        $('.check').iCheck('uncheck');
    });

在fooTable标题中的i-check复选框无效

1 个答案: