Question

我找到了一种解决方案，可以在JsGrid创建的表中选择单个范围的复选框。

    $(document).on('click', '[type = checkbox]' , function(e) {
        if (e.shiftKey) {
            var first = $("#jsGrid input[type='checkbox']:checked").first().parent().parent().index(),
            last = $("#jsGrid input[type='checkbox']:checked").last().parent().parent().index();

        for (var i = first; i < last; i++) {
            $("#jsGrid").find("tbody tr index").eq(i).children().first().find("input[type='checkbox']").prop("checked", true);

            $("#jsGrid .jsgrid-grid-body tbody tr").eq(i).find("input[type='checkbox']").prop("checked", true)
            }
        }
    });

此解决方案的问题在于只允许使用单个复选框。

要添加多个范围，我可以使用以下方法将范围的底部设置为当前行索引：

last = $(this).parent().parent().index();

现在，我想找到上面具有选中复选框的下一行的行的行索引。

我认为这应该是下面代码的变体。

first = $(this).prevUntil(':checkbox', 'checked').parent().parent().index();  // -1

我无法使用它。或者这个

 first = $(this).parent().parent().prevUntil(':checkbox', 'checked').index();  // -1

HTML

<tbody>
  <tr class="jsgrid-row">
   <td>1</td>
   <td><input type="checkbox" rel="898"></td>
   <td>02/27/2019</td>
   <td>19122-37</td>
   <td>SMITH</td>  
 </tr>
 <tr class="jsgrid-alt-row">
  <td>1</td>
  <td><input type="checkbox" rel="898"></td>
  <td>02/27/2019</td>
  <td>19122-37</td>
  <td>SMITH</td>  
 </tr>
 <tr class="jsgrid-row">
  <td>1</td>
  <td><input type="checkbox" rel="898"></td>
  <td>02/27/2019</td>
  <td>19122-37</td>
  <td>SMITH</td>  
 </tr>
 <tr class="jsgrid-alt-row">
  <td>1</td>
  <td><input type="checkbox" rel="898"></td>
  <td>02/27/2019</td>
  <td>19122-37</td>
  <td>SMITH</td>  
 </tr>  
</tbody>

谢谢！

Answer 1

[1] ^{我的理解是：当选中最后一个复选框时，会得到最近的已选中该复选框的上一行}

$('input[type="checkbox"]:last').on('change' , function(){
  if(this.checked){
    var ThisRowIndex = $(this).closest('tr').index();
    $($('table tr:lt('+ (ThisRowIndex) +')').get().reverse()).filter(function(){
      return $(this).find('input[type="checkbox"]:checked').length;
    }).each(function(){
      console.log('This Nearst Row Index: '+ $(this).index() + ' Has checked checkbox');
      return false;
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="jsgrid-row">
     <td>1</td>
     <td><input type="checkbox" value="100" rel="898"/></td>
     <td>02/27/2019</td>
     <td>19122-37</td>
     <td>SMITH</td>  
   </tr>
   <tr class="jsgrid-alt-row">
    <td>1</td>
    <td><input type="checkbox" rel="898"/></td>
    <td>02/27/2019</td>
    <td>19122-37</td>
    <td>SMITH</td>  
   </tr>
   <tr class="jsgrid-row">
    <td>1</td>
    <td><input type="checkbox" rel="898"/></td>
    <td>02/27/2019</td>
    <td>19122-37</td>
    <td>SMITH</td>  
   </tr>
   <tr class="jsgrid-alt-row">
    <td>1</td>
    <td><input type="checkbox" rel="898"></td>
    <td>02/27/2019</td>
    <td>19122-37</td>
    <td>SMITH</td>  
   </tr>  
  </tbody>
</table>

^说明：-与checkbox使用change事件。

if(this.checked){  // if this checkbox checked
   var ThisRowIndex = $(this).closest('tr').index();    // get the closest ow index when this checkbox checked
   $('table tr:lt('+ (ThisRowIndex) +')').filter(function(){  // use `lt()` to select the previous rows then filter them to check if there is a checked checkbox in each one or not
       return $(this).find('input[type="checkbox"]:checked').length; //check if there is a checked checkbox in each one or not
   }).each(function(){  // loop through the rows which has checked checkbox
      console.log('This Row With Index: '+ $(this).index() + ' Has checked  checkbox'); // print the index of each row
   });
}

对于反向，您可以使用$($('table tr:lt('+ (ThisRowIndex) +')').get().reverse()) ..查看更新的代码段
:last表示最后一个元素

return false;

.each()打破了循环

^{注意使用上面的代码，您可以做很多事情
  ..只要了解它的想法，它将对
  你}

[2] ^{并使用prevUntil() 获取索引选中复选框和Shift-Select复选框之间的行的索引}

$('input[type="checkbox"]:last').on('change' , function(){
  if(this.checked){
    $(this).closest('tr').prevUntil('tr:has(input[type="checkbox"]:checked)').each(function(){
      console.log($(this).index());
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr class="jsgrid-row">
     <td>1</td>
     <td><input type="checkbox" value="100" rel="898"/></td>
     <td>02/27/2019</td>
     <td>19122-37</td>
     <td>SMITH</td>  
   </tr>
   <tr class="jsgrid-alt-row">
    <td>1</td>
    <td><input type="checkbox" rel="898"/></td>
    <td>02/27/2019</td>
    <td>19122-37</td>
    <td>SMITH</td>  
   </tr>
   <tr class="jsgrid-row">
    <td>1</td>
    <td><input type="checkbox" rel="898"/></td>
    <td>02/27/2019</td>
    <td>19122-37</td>
    <td>SMITH</td>  
   </tr>
   <tr class="jsgrid-alt-row">
    <td>1</td>
    <td><input type="checkbox" rel="898"></td>
    <td>02/27/2019</td>
    <td>19122-37</td>
    <td>SMITH</td>  
   </tr>  
  </tbody>
</table>

Shilft选择表格中的多个复选框

1 个答案: