[英]How to uncheck checkbox when clicking on row in jqgrid?
有沒有一種方法可以使帶有類似於此復選框的復選框具有單選按鈕http://www.ok-soft-gmbh.com/jqGrid/SimpleLocalGridWidthRadioButton2.htm的行為,並帶有用於選擇/取消選擇所有復選框的復選框。 可能沒有鏈接該行的選擇和復選框,就像在帶有單選按鈕的示例中一樣。
更新:
這是我的片段:
$("#list").jqGrid({
datatype: "local",
data: mydata,
colNames: ["Client", "Date", "Amount", "Tax", "Total", "Shipped via", "Notes"],
colModel: [
{name: "name", width: 70, frozen: true},
{name: "invdate", width: 80, align: "center", sorttype: "date",
formatter: "date", formatoptions: {newformat: "d-M-Y"}, datefmt: "d-M-Y"},
{name: "amount", width: 75, formatter: "number", sorttype: "number", align: "right"},
{name: "tax", width: 55, formatter: "number", sorttype: "number", align: "right"},
{name: "total", width: 65, formatter: "number", sorttype: "number", align: "right"},
{name: "ship_via", width: 100, align: "center", formatter: "select",
edittype: "select", editoptions: {value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN"}},
{name: "note", width: 70, sortable: false}
],
rowNum: 10,
rowList: [5, 10, 20],
pager: "#pager",
gridview: true,
rownumbers: true,
sortname: "invdate",
viewrecords: true,
sortorder: "desc",
caption: "Handling of changing of chechboxes in the grid",
height: "auto",
multiselect: true,
multiboxonly: true,
beforeSelectRow: function (rowid, e) {
var $target = $(e.target), $td = $target.closest("td"),
iCol = $.jgrid.getCellIndex($td[0]),
colModel = $(this).jqGrid("getGridParam", "colModel");
if (iCol >= 0 && $target.is(":checkbox")) {
return false;
}
return true;
},
onSelectRow: function (rowid, isSelected, event) {
var rowData = $("#list").jqGrid("getRowData", rowid);
var checkbox = jQuery(this).find('#' + rowid + ' input#jqg_list_'+rowid+'[type=checkbox]');
if ($(checkbox).is(':checked')) {
$(checkbox).attr('checked', false);
}
},
});
http://jsfiddle.net/yNw3C/12696/
如您所見,問題是當我單擊之前已選中的行時,它將取消選中該復選框。
單擊該行將不會選中您的復選框,除非有代碼明確地實現了此目的。 因此,我要猜測的是,您遇到的麻煩是單擊復選框時將調用行的onclick處理程序。 為了防止這種情況,請添加stopPropegation():
$('table checkbox').click(function(event) {
event.stopPropagation();
});
也有stopImmediateProgagation(),但stopPropagation()應該足以滿足您的情況。
如果這樣做不能解決問題,請發布JsFiddle或提供實時鏈接,以便更輕松地確切了解您的代碼在做什么。
更新:您的onRowSelect處理程序(第60行)以該行中的所有復選框為目標,如果您更新第64行以將您感興趣的特定復選框作為目標,它將像您期望的那樣工作:
var checkbox = jQuery(this).find('#' + rowid + ' input#jqg_list_'+rowid+'[type=checkbox]');
代替
var checkbox = jQuery(this).find('#' + rowid + ' input[type=checkbox]');
UPDATE2:
是的,這不能完全解決您的問題。 我在您的提琴上嘗試了幾種方法,似乎解決該問題的每種合理方法最終都會使該插件投入太多精力。 根據文檔,“ multiselect:true”和“ multiboxonly:true”選項應該足夠。 我會向插件維護者提交錯誤報告。
$(function () {
$('#toggleAll').click(function (event) {
var checked = event.target.checked;
$("input[name='checkIds']").each(function (e) {
this.checked = checked;
})
event.stopPropagation();
});
}
var chkBoxs = "<input type='checkbox' id='toggleAll' />";
var colNames = [chkBoxs];
當我在jqGrid中使用復選框組件時,也會遇到同樣的麻煩。 上面的代碼段是解決問題的有效方法。 實際上,js的事件機制會帶來麻煩。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.