【问题标题】:Uncheck table row in bootstrap table on specific condition在特定条件下取消选中引导表中的表行
【发布时间】:2015-08-28 07:57:49
【问题描述】:

我之前的问题是this,如果用户选择的行具有“可用库存=null 或 0”,我想取消选中选中行。现在我的jQuery代码是:

$(document).ready(function()
{
    $("#add_cart_btn").hide();
    var json;
    var checkedRows = [];
    $('#table-style').on('check.bs.table', function (e, row) {
      checkedRows.push({id: row.id});
      $("#add_cart_btn").show();
    });

    $('#table-style').on('uncheck.bs.table', function (e, row) {
      $.each(checkedRows, function(index, value) {
        if (value.id === row.id) {
          checkedRows.splice(index,1);
        }
      });
    });
     /*if(checkedRows.length < 0) {
        // does not exist
        $("#add_cart_btn").hide();
      }
      else {
        // does exist
        $("#add_cart_btn").show();
      }*/

});

在这里,我还试图显示 $("#add_cart_btn") 按钮,如果 checkRows[] 至少包含一条记录。我在上面搜索了引导事件,但无法理解。

【问题讨论】:

    标签: jquery twitter-bootstrap checkbox bootstrap-table


    【解决方案1】:

    关于取消选中行,如果它有 'Stock Available=null 或 0,我假设您使用的是 bootstrap-table by wenzhixin,并且您的数据具有您提到的唯一 ID row.id 在你的问题中

    我的方法是这样的: 1.在加载数据时定义表的唯一ID 2. oncheck : 使用 row 检查 Stock_Available 是 null 还是 0 3.如果是的话使用方法

    $("#table").bootstrapTable("uncheckBy", { field: "Stock_Available", values: [row.id] })
    

    这里是解决方案http://jsfiddle.net/pacitwizere/xjvp8xq0/5/

    【讨论】:

      【解决方案2】:

      看看jQueryon事件是如何附加事件的

      $(SELECTOR).on(EVENT,CALLBACK)
      

      只要EVENT 发生在您使用SELECTOR 选择的元素上,就会调用CALLBACK 函数。 $(document).ready(function(){})$(document).on('ready',function(){}); 的简写。因此,当ready 事件发生时,回调 get 被调用。请注意,“就绪”事件仅在页面首次加载时触发一次,因此回调只会被调用一次。现在你的购物车隐藏按钮逻辑在就绪回调中,所以它只被调用一次。

         $(document).('on',function(){
         var checkedRows = [];
         //[].length === 0
         if(checkedRows.length === 0) {
          // does not exist
          $("#add_cart_btn").hide();
        }
        else {
          // does exist
          $("#add_cart_btn").show();
        }
        });
      

      它将评估checkedRows 为空并隐藏购物车按钮。此代码不会再次调用,因此购物车按钮将永远不会显示。您正在侦听的两个引导事件是 check.bs.tableuncheck.bs.table,它们在发生检查/取消检查时触发。请注意,这些事件仅在用户交互后发生,因此在第一次加载页面时不会调用这两个回调。

      $(SELECTOR).on(EVENT,CALLBACK)
      $('#table-style').on('check.bs.table', function (e, row) {
          //This event fires every time a checkbox is checked
      });
      $('#table-style').on('uncheck.bs.table', function (e, row) {
          //This event fires every time a checkbox is unchecked
      });
      

      所以你的算法会是这样的:

      on page load:no checkboxes are checked so hide the cart button
      on check: a checkbox is checked so show the cart button
      on uncheck: if the checkedRows array is empty hide the cart button
      

      【讨论】:

      • 好的,知道了。但是第一行问题中的“Stock Available=null or 0”呢?
      猜你喜欢
      • 2022-01-27
      • 1970-01-01
      • 1970-01-01
      • 2022-06-01
      • 1970-01-01
      • 2018-08-18
      • 1970-01-01
      • 2022-12-07
      • 1970-01-01
      相关资源
      最近更新 更多