问题：

筛选表行-使用全选复选框的多个筛选器

皇甫才良

2023-03-14

首先，我试图使选择所有复选框，如果我单击表头中的选择所有复选框，整个表行将选择并显示一个复选框反向消息，即我选择了多少复选框。这里的问题是，如果我单击select all复选框，反向消息不会显示楼上的表，即我选择了多少行。

其次，如果我从任何列中筛选任何数字，相同的数字将显示同一列中有多少行具有相同的数字。如果我选中了所有复选框，那么反向消息将显示我选中了多少行复选框。这里，问题是显示整个表行计数器消息而不显示筛选后的行计数器消息。

但是我面临着一个问题来解决这个问题。我该如何解决这个问题呢？

null

$( document ).ready(function() {

  $('.ckbCheckAll, .checkBoxClass').click(function () {
    if($('.ckbCheckAll:checked').length > 0 || $('.checkBoxClass:checked').length > 0) {
            $('.checkbox-count-content').show(500);
        }else{
            $('.checkbox-count-content').hide(500);
        }
    })

    const countCheckedAll = function() {
        const counter = $(".checkBoxClass:checked").length;
        $(".checkbox-count").html( counter + " variation selected!" );
        console.log(counter + ' variation selected!');
    };

    $(".checkBoxClass").on( "click", countCheckedAll );

    $('.ckbCheckAll').click(function () {
      const bulkIds = $('input[type="number').val();
      console.log(bulkIds + ' selected!');
      if(bulkIds != ''){
          bulkIds.split('/').forEach(function () {
              $('tbody').find('.checkBoxClass').prop('checked', true);
              $(this).closest('table').find('td .checkBoxClass').prop('checked', this.checked);
              countCheckedAll();
          })
      }else{
          $(".checkBoxClass").prop('checked', $(this).prop('checked'));
      }
   })

    $(".checkBoxClass").change(function(){
        if (!$(this).prop("checked")){
            $(".ckbCheckAll").prop("checked",false);
        }
    });


  const aggrFn = {
  "=": (a, b) => a == b,
  "<": (a, b) => a < b,
  ">": (a, b) => a > b,
  "<=": (a, b) => a <= b,
  ">=": (a, b) => a >= b,
  };

  function filterColumns($table) {
  const colFilters = {};
  $table.find("thead .filter").each(function() {
      colFilters[$(this).index()] = {
      agg: $(this).find("select").val(),
      val: $(this).find("input").val(),
      }
  });
  $table.find("tbody tr").each(function() {
      const $tr = $(this);
      const shouldHide = Object.entries(colFilters).some(([k, v]) => {
          return v.val === "" ? false : !aggrFn[v.agg](parseFloat($tr.find(`td:eq(${k})`).text()), parseFloat(v.val));
      });
      $tr.toggleClass("u-none", shouldHide);
  });
  }

  $(".filter").on("input", ":input", function(ev) {
  filterColumns($(this).closest("table"));
  });

});

table {
    width: 100%;
    border-collapse: collapse;
    }

    td {
    text-align: center;
    padding: 10px;
    }

    table thead tr th {
      border: 1px solid #cccccc;
      padding: 10px;
    }

    table tbody tr td {
      border: 1px solid #cccccc;
    }

    .filter>div {
    display: flex;
    justify-content: center;
    }

    .filter input {
    width: 6em;
    }

    .u-none {
    display: none;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="checkbox-count-content" style="display: none;">
  <div class="checkbox-count"></div>
</div>
    
<table>
  <thead>
    <th><input type="checkbox" class="ckbCheckAll" id="ckbCheckAll"></th>
    <th class="filter">
      Available Quantity
      <div>
        <select>
          <option value="=">=</option>
          <option value="<">&lt;</option>
          <option value=">">&gt;</option>
          <option value="<=">≤</option>
          <option value=">=">≥</option>
        </select>
        <input type="number">
      </div>
    </th>
    <th class="filter">
      Regular Price
      <div>
        <select>
          <option value="=">=</option>
          <option value="<">&lt;</option>
          <option value=">">&gt;</option>
          <option value="<=">≤</option>
          <option value=">=">≥</option>
        </select>
        <input type="number">
      </div>
    </th>
    <th class="filter">
      Base Price
      <div>
        <select>
          <option value="=">=</option>
          <option value="<">&lt;</option>
          <option value=">">&gt;</option>
          <option value="<=">≤</option>
          <option value=">=">≥</option>
        </select>
        <input type="number">
      </div>
    </th>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class="checkBoxClass"></td> 
      <td>4</td>
      <td>10</td>
      <td>12</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass"></td>
      <td>6</td>
      <td>12</td>
      <td>11</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass"></td>
      <td>1</td>
      <td>14</td>
      <td>12</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass"></td>
      <td>0</td>
      <td>8</td>
      <td>10</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass"></td>
      <td>6</td>
      <td>14</td>
      <td>18</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass"></td>
      <td>1</td>
      <td>11</td>
      <td>22</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass"></td>
      <td>6</td>
      <td>10</td>
      <td>8</td>
    </tr>
  </tbody>
</table>

null

共有1个答案

傅增

2023-03-14

您可以使用:visible检查TR是否可见，然后只需将checked to true添加到那些TR复选框中，然后调用函数显示计数，否则只需从复选框中删除checked

演示代码：

null

$(document).ready(function() {

  $('.ckbCheckAll, .checkBoxClass').click(function() {
    if ($('.ckbCheckAll:checked').length > 0 || $('.checkBoxClass:checked').length > 0) {
      $('.checkbox-count-content').show(500);
    } else {
      $('.checkbox-count-content').hide(500);
    }
  })

  const countCheckedAll = function() {
    const counter = $(".checkBoxClass:checked").length;
    $(".checkbox-count").html(counter + " variation selected!");
    console.log(counter + ' variation selected!');
  };

  $(".checkBoxClass").on("click", countCheckedAll);

  $('.ckbCheckAll').click(function() {
    if ($(this).is(":checked")) {
      //get tr which is visible ..add checked to that checkboxes
      $('tbody').find('tr:visible .checkBoxClass').prop('checked', true);
      countCheckedAll();
    } else {
      //remove checked
      $(".checkBoxClass").prop('checked', false);
      $('.checkbox-count-content').hide(500);
    }
  })

  $(".checkBoxClass").change(function() {
    if (!$(this).prop("checked")) {
      $(".ckbCheckAll").prop("checked", false);
    }
  });


  const aggrFn = {
    "=": (a, b) => a == b,
    "<": (a, b) => a < b,
    ">": (a, b) => a > b,
    "<=": (a, b) => a <= b,
    ">=": (a, b) => a >= b,
  };

  function filterColumns($table) {
    const colFilters = {};
    $table.find("thead .filter").each(function() {
      colFilters[$(this).index()] = {
        agg: $(this).find("select").val(),
        val: $(this).find("input").val(),
      }
    });
    $table.find("tbody tr").each(function() {
      const $tr = $(this);
      const shouldHide = Object.entries(colFilters).some(([k, v]) => {
        return v.val === "" ? false : !aggrFn[v.agg](parseFloat($tr.find(`td:eq(${k})`).text()), parseFloat(v.val));
      });
      $tr.toggleClass("u-none", shouldHide);
    });
  }

  $(".filter").on("input", ":input", function(ev) {
    filterColumns($(this).closest("table"));
  });

});

table {
  width: 100%;
  border-collapse: collapse;
}

td {
  text-align: center;
  padding: 10px;
}

table thead tr th {
  border: 1px solid #cccccc;
  padding: 10px;
}

table tbody tr td {
  border: 1px solid #cccccc;
}

.filter>div {
  display: flex;
  justify-content: center;
}

.filter input {
  width: 6em;
}

.u-none {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<div class="checkbox-count-content" style="display: none;">
  <div class="checkbox-count"></div>
</div>

<table>
  <thead>
    <th><input type="checkbox" class="ckbCheckAll" id="ckbCheckAll"></th>
    <th class="filter">
      Available Quantity
      <div>
        <select>
          <option value="=">=</option>
          <option value="<">&lt;</option>
          <option value=">">&gt;</option>
          <option value="<=">≤</option>
          <option value=">=">≥</option>
        </select>
        <input type="number">
      </div>
    </th>
    <th class="filter">
      Regular Price
      <div>
        <select>
          <option value="=">=</option>
          <option value="<">&lt;</option>
          <option value=">">&gt;</option>
          <option value="<=">≤</option>
          <option value=">=">≥</option>
        </select>
        <input type="number">
      </div>
    </th>
    <th class="filter">
      Base Price
      <div>
        <select>
          <option value="=">=</option>
          <option value="<">&lt;</option>
          <option value=">">&gt;</option>
          <option value="<=">≤</option>
          <option value=">=">≥</option>
        </select>
        <input type="number">
      </div>
    </th>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class="checkBoxClass"></td>
      <td>4</td>
      <td>10</td>
      <td>12</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass"></td>
      <td>6</td>
      <td>12</td>
      <td>11</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass"></td>
      <td>1</td>
      <td>14</td>
      <td>12</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass"></td>
      <td>0</td>
      <td>8</td>
      <td>10</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass"></td>
      <td>6</td>
      <td>14</td>
      <td>18</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass"></td>
      <td>1</td>
      <td>11</td>
      <td>22</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkBoxClass"></td>
      <td>6</td>
      <td>10</td>
      <td>8</td>
    </tr>
  </tbody>
</table>

类似资料：

更改状态和筛选器列表的复选框

对不起，我仍然是小新在这方面，只是万一有代码有人想看到我否定这里是整个代码要点嵌入我花了2个星期建立这个应用程序，并已卡在这个过滤在过去的2天。我需要有这个应用程序MVP明天下午演示在一个就业活动为最近的毕业生，这是仅剩的2件事之一。我没有足够的代表赏金，但任何帮助或建议都很感激
带有多个复选框的Datatables数据筛选（服务器端）

我正在使用带有服务器端处理的DataTables来显示数万行。我需要通过复选框筛选这些数据。我能够使一个复选框工作良好，但我不知道如何添加多个复选框一起工作。我在这里找到了类似的解决方案，但我的技能不允许我根据需要修改它：（以下是我尝试过的。我的index.php： idsa变量最初设置为5，这意味着所有的状态（没有选中复选框）然后用它的格式(d)函数发送到服务器端脚本（这部分工作正常）。这就是
Spring Kafka筛选器未筛选使用者记录

应用筛选器之前的示例使用者记录是（在值中查找GP_ID): 当我在kafkaListenerContainerFactory（）中按如下方式设置recordFilterStrategy时： KafKareCordvo.ConvertByteBufferToLong正在将bytebuffer值转换为long值。但是，当它被Kafka听众按以下方式消费时：这将返回删除我筛选的字段值的记录：“gp_
使用流筛选列表

我需要过滤一个列表
按钮以筛选JTable的复选框处于选中状态

问题内容：我有一个与此非常相似的JTable。 http://docs.oracle.com/javase/tutorial/uiswing/components/table.html#sorting 我已经设法在其上设置了普通过滤器（搜索功能），并且效果很好。我想要一个按钮，该按钮将立即仅显示选中素食的行。好吧，现在感谢@peeskillet和@HovercraftFullOfEels提供的
sqlalchemy 筛选

本文向大家介绍sqlalchemy 筛选，包括了sqlalchemy 筛选的使用技巧和注意事项，需要的朋友参考一下示例给定以下模型您可以过滤查询中的列：对于第一种情况，有一个快捷方式：可以使用AND关系通过链接filter方法来构成过滤器：或更灵活地使用重载按位运算符&和|：不要忘记内括号来处理运算符优先级。

筛选表行-使用全选复选框的多个筛选器

共有1个答案

相关问答

相关文章

相关阅读

相关工具

相关文档