我之前的问题是this,如果用户选择了'Stock Available = 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”)按钮iff checkedRows []包含至少一条记录。我搜索了上面的bootstrap事件但是无法理解它。
答案 0 :(得分:1)
要取消选中行,如果它有&#39; Stock Available = null或0,我假设您使用的是bootstrap-table by wenzhixin,并且您的数据有一个唯一的ID,就像您提到的行.id 在你的问题中
我的方法是这样的: 1.在加载数据时定义表的唯一ID 2. oncheck:使用row检查Stock_Available是否为null或0 3.如果是,请使用方法
$("#table").bootstrapTable("uncheckBy", { field: "Stock_Available", values: [row.id] })
答案 1 :(得分:0)
看看jQuery on事件如何附加事件
$(SELECTOR).on(EVENT,CALLBACK)
每当您使用EVENT
选择的元素上发生SELECTOR
时,都会调用CALLBACK
函数。 $(document).ready(function(){})
是$(document).on('ready',function(){});
的简写。因此,当ready
事件发生时,调用了回调函数。请注意,'ready'事件仅在页面首次加载时触发一次,因此回调只会被调用一次。现在你在准备好的回调中有你的购物车hiddin按钮逻辑,所以它只被调用一次。
$(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.table
和uncheck.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