我只想使用多选框而不是点击行来选择行。我读this answer但是onSelectRow没有被触发。在我的应用程序中点击行时，一些数据显示（master和details struct） 但是因为onSelectRow没有被解雇。 我想通过点击选择行并显示数据，但只需点击框复选框设置。请帮助我:(
grid.jqGrid({
url: 'jqGridHandler.ashx',
datatype: 'json',
width: $("#parentDiv").width(),
height: a,
direction: "rtl",
colNames: ['Action', 'A', 'W', 'Date', 'Num', 'Sender', 'F', 'EOSysNum', 'PctIndNum', 'Subject', 'PctAssignSubject', 'PctAssignType', '', 'Date2', 'Assign', '', 'PctTabName', 'Andicator', '', 'Datetime of Show', 'SysCode', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '', '','','','','','','','','',''],
colModel: [
{
name: 'act',
width: ($.browser.webkit ? 25 : 25),
align: 'center',
sortable: false,
formatter: 'actions',
formatoptions: {
keys: true,
delOptions: myDelOptions,
delbutton: false,
editbutton: false
}
},
{
name: 'IsAttach',
width: 5,
sortable: false,
search: false,
template: ActionTemplate,
formatter: function (cellval, opts, rowObject, action) {
return (cellval == 'True' ? "<span class='ui-icon icon-Attachment' style='float:left'></span>" : "");
}
},
{
name: 'IsContent',
width: 6,
sortable: false,
search: false,
template: ActionTemplate,
formatter: function (cellval, opts, rowObject, action) {
return (cellval == 'True' ? "<span class='ui-icon icon-Word' style='float:left'></span>" : "");
}
},
{
name: 'PctLettDate',
width: 30,
sortable: true,
template: CenterTemplate,
// formatter: function (cellvalue, options, rowObject) {
//return (rowObject["PctViewDate"] == '' ? '<font style="font-weight:bold">' + cellvalue + '</font>' : cellvalue)
// return (rowObject["PctViewDate"] == '' ? '<font style="font-weight:bold">' + cellvalue + '</font>' : cellvalue);
//}
},
{
name: 'PctLettNum',
width: 30,
sortable: true,
// template: numberTemplate,
// formatter: function (cellvalue, options, rowObject) {
// return (rowObject["PctViewDate"] == '' ? '<font style="font-weight:bold">' + cellvalue + '</font>' : cellvalue);
// }
},
{
name: 'PctAssignPrs',
width: 80,
sortable: true,
// formatter: function (cellvalue, options, rowObject) {
// return (rowObject["PctViewDate"] == '' ? '<font style="font-weight:bold">' + cellvalue + '</font>' : cellvalue)
//}
},
{
name: 'PctAssignImi',
width: 15,
sortable: true,
template: CenterTemplate,
// formatter: function (cellvalue, options, rowObject) {
// return (rowObject["PctViewDate"] == '' ? '<font style="font-weight:bold">' + cellvalue + '</font>' : cellvalue)
//}
},
{ name: 'EOSysNum', width: 30, sortable: true, hidden: true },
{ name: 'PctIndNum', width: 140, sortable: false, hidden: true },
{
name: 'PctLettSubject',
width: 140,
sortable: true,
// formatter: function (cellvalue, options, rowObject) {
//return (rowObject["PctViewDate"] == '' ? '<font size="3" color="#0072C6" style="font-weight:bold">' + cellvalue + '</font>' : cellvalue)
//}
},
{ name: 'PctAssignSubject', width: 100, sortable: false, hidden: true },
{ name: 'PctAssignType', width: 100, sortable: false, hidden: true },
{ name: 'PctType', width: 100, sortable: false, hidden: true },
{ name: 'PctStartDate', width: 100, sortable: true, hidden: true },
{ name: 'PctRecDate', width: 100, sortable: true, hidden: true },
{ name: 'PctAssignDate', width: 100, sortable: true, hidden: true },
{ name: 'PctAssignTime', width: 100, sortable: true, hidden: true },
{ name: 'PctTabName', width: 100, sortable: true, hidden: true },
{ name: 'PctIndCode', width: 100, sortable: true, hidden: true },
{ name: 'PctViewDate', width: 100, sortable: true, hidden: true },
{ name: 'PctViewTime', width: 100, sortable: true, hidden: true },
{ name: 'SysCode', width: 100, sortable: true, hidden: true },
{ name: 'PctIsTerminate', width: 100, sortable: true, hidden: true },
{ name: 'PctIsConfirm', width: 100, sortable: true, hidden: true },
{ name: 'PctAssignerSysNum', width: 100, sortable: true, hidden: true },
{ name: 'pctAssignmentNum', width: 100, sortable: true, hidden: true },
{ name: 'PctAssignPrivate', width: 100, sortable: true, hidden: true },
{ name: 'PctIsInFolder', width: 100, sortable: true, hidden: true },
{ name: 'PctAssignPhysics', width: 100, sortable: true, hidden: true },
{ name: 'PctConfirmRecLettPhysics', width: 100, sortable: true, hidden: true },
{ name: 'pctAssignmentPhysicsNum', width: 100, sortable: true, hidden: true },
{ name: 'PctDeputyEOSysNum', width: 100, sortable: true, hidden: true },
{ name: 'PctDeputySysCode', width: 100, sortable: true, hidden: true },
{ name: 'PctRequestStatus', width: 100, sortable: true, hidden: true },
{ name: 'PctIsTerminateByAssign', width: 100, sortable: true, hidden: true },
{ name: 'PctPosSysCode', width: 100, sortable: true, hidden: true },
{ name: 'PctAssignerPosSysCode', width: 100, sortable: true, hidden: true },
{ name: 'PctTabName1', width: 100, sortable: true, hidden: true },
{ name: 'HasAccessAssignLetter', width: 100, sortable: true, hidden: true },
{ name: 'HasAccessContentLetter', width: 100, sortable: true, hidden: true },
{ name: 'HasAccessAttachLetter', width: 100, sortable: true, hidden: true },
{ name: 'HasAccessCCLetter', width: 100, sortable: true, hidden: true },
{ name: 'HasAccessPhysicsLetter', width: 100, sortable: true, hidden: true },
{ name: 'HasAccessFoldersLetter', width: 100, sortable: true, hidden: true },
{ name: 'HasAccessDocRelatedLetter', width: 100, sortable: true, hidden: true },
{ name: 'HasAccessTreeLetter', width: 100, sortable: true, hidden: true },
{ name: 'HasAccessEmailLetter', width: 100, sortable: true, hidden: true },
{ name: 'AssignedPerson', width: 100, sortable: true, hidden: true }
],
rowNum: 20,
loadonce: true,
rowList: [5, 10, 20],
recordpos: "left",
ignoreCase: true,
toppager: true,
viewrecords: true,
multiselect: true,
sortorder: "desc",
scrollOffset: 1,
editurl: 'clientArray',
multiboxonly: true,
jsonReader:
{
repeatitems: false,
},
gridview: true,
rowattr: function (rd) {
return { "class": (rd["PctViewDate"] == '') ? "myRowClassNoRead" : "myRowClass" };
},
ondblClickRow: function (id) {
$(this).jqGrid('editRow', id, true, null, null, 'clientArray');
},
onSelectRow: function (id) {
rowData = jQuery(this).getRowData(id);
window.selectedRow = id,
doShowInformationOfSelectedRow(rowData, window.activeTab);
if (id && id !== lastSel) {
if (typeof lastSel !== "undefined") {
$(this).jqGrid('restoreRow', lastSel);
}
lastSel = id;
}
},
beforeSelectRow: function(rowid, e) {
var cbsdis = $("tr#" + rowid + ".jqgrow > td > input.cbox:disabled", grid);
if (cbsdis.length === 0) {
i = grid.getCellIndex($(e.target).closest('td')[0]),
cm = grid.jqGrid('getGridParam', 'colModel');
return (cm[i].name === 'cb');
return true; // allow select the row
} else {
return false; // not allow select the row
}
},
onSelectAll: function(aRowids, status) {
if (status) {
// uncheck "protected" rows
var cbs = $("tr.jqgrow > td > input.cbox:disabled", grid[0]);
cbs.removeAttr("checked");
//modify the selarrrow parameter
//grid[0].p.selarrrow = grid.find("tr.jqgrow:has(td > input.cbox:checked)")
//.map(function() { return this.id; }) // convert to set of ids
//.get(); // convert to instance of Array
}
},
loadComplete: function () {
$('#navGridfrom').datepicker({
isRTL: true,
onSelect: function (dateText, inst) {
$('#navGridto').datepicker('option', 'minDate', new JalaliDate(inst['selectedYear'], inst['selectedMonth'], inst['selectedDay']));
}
});
$("#navGridto").datepicker();
var iCol = getColumnIndexByName(grid, 'act');
var iColhasAccessAssignLetterIndex = getColumnIndexByName(grid, 'HasAccessAssignLetter');
var iColhasAccessFoldersLetterIndex = getColumnIndexByName(grid, 'HasAccessFoldersLetter');
$(this).find(">tbody>tr.jqgrow>td:nth-child(" + (iCol + 1) + ")")
.each(function () {
var valueAccessAssignLetter = this.parentElement.cells[iColhasAccessAssignLetterIndex].innerHTML;
var valueAccessFoldersLetter = this.parentElement.cells[iColhasAccessFoldersLetterIndex].innerHTML;
$(this.parentElement).find("td > input.cbox").attr("disabled",(valueAccessFoldersLetter=="False"? true:false));
$("<div>", {
title: "Archive",
mouseover: function () {
$(this).addClass(valueAccessFoldersLetter == "True" ? 'ui-state-hover':'');
},
mouseout: function () {
$(this).removeClass('ui-state-hover');
},
click: function (e) {
if (valueAccessFoldersLetter == "True") {
alert("'Custom' button is clicked in the rowis=" +
$(e.target).closest("tr.jqgrow").attr("id") + " !");
}
}
}
).css({ "margin-right": "5px", "float": "left", "cursor": "pointer" })
.addClass(valueAccessFoldersLetter == "True" ? "ui-pg-div ui-inline-custom":"")
.append(valueAccessFoldersLetter == "True" ? '<span class="ui-icon icon-archive "></span>' : '<span class="ui-icon icon-archive ui-state-disabled">')
.prependTo($(this).children("div"));
$("<div>", {
title: "Assign",
mouseover: function () {
$(this).addClass(valueAccessAssignLetter == "True" ?'ui-state-hover':'');
},
mouseout: function () {
$(this).removeClass(valueAccessAssignLetter == "True" ?'ui-state-hover':'');
},
click: function(e) {
if (valueAccessAssignLetter == "True") {
alert("'Custom' button is clicked in the rowis=" +
$(e.target).closest("tr.jqgrow").attr("id") + " !");
}
}
}
).css({ "margin-right": "10px", "float": "left", cursor: "pointer" })
//.addClass("ui-pg-div ui-inline-custom")
.append(valueAccessAssignLetter == "True" ? '<span class="ui-icon icon-refrence" disabled></span>' : '<span class="ui-icon icon-refrence ui-state-disabled"></span>')
.prependTo($(this).children("div"));
});
$("tr.jqgrow", this).contextMenu('myMenu1', {
direction: 'rtl',
bindings: {
'edit': function (trigger) {
// trigger is the DOM element ("tr.jqgrow") which are triggered
grid.editGridRow(trigger.id, editSettings);
},
'add': function (/*trigger*/) {
grid.editGridRow("new", addSettings);
},
'del': function (trigger) {
if ($('#del').hasClass('ui-state-disabled') === false) {
// disabled item can do be choosed
grid.delGridRow(trigger.id, delSettings);
}
}
},
onContextMenu: function (event/*, menu*/) {
var rowId = $(event.target).closest("tr.jqgrow").attr("id");
//grid.setSelection(rowId);
// disable menu for rows with even rowids
$('#del').attr("disabled", Number(rowId) % 2 === 0);
if (Number(rowId) % 2 === 0) {
$('#del').attr("disabled", "disabled").addClass('ui-state-disabled');
} else {
$('#del').removeAttr("disabled").removeClass('ui-state-disabled');
}
return true;
}
});
},
答案 0 :(得分：3)
要求
我希望通过单击选择行并显示数据，但仅选中框复选框
与jqGrid中multiselect: true选项的含义相矛盾。您可以更改选择的行为。例如，您可以通过单击多选复选框来选择行。你想要的是选择行而不检查多选复选框。该要求与multiselect: true选项的含义相矛盾。
如果您的网格中需要一些基于您的自定义算法检查的chechbox，您可以添加formatter: "checkbox", formatoptions: { disabled: false }列。
我建议您从onSelectRow回调中的beforeSelectRow回调中移动代码。
此外，我建议您减少使用的隐藏列数。我正确地计算出你有40个（!!!）隐藏列，网格中只有8个可见列。每个隐藏的列都发生在页面的DOM上，并使网格缓慢地工作。你需要的只是拥有代表行的所有属性的对象。对于隐藏列的使用，JavaScript变量的使用非常快。人们可以通过多种方式做到这一点。例如，可以在userdata内填充beforeProcessing内的完整数据，这些数据与the answer中的项目几乎完全相同。
更新：例如，如果您使用jsonReader: { repeatitems: false }且列syscode包含您数据的唯一ID，那么您应该
key: true列的定义中包含syscode属性或使用jsonReader: { repeatitems: false, id: "syscode" }。我建议两者都做。 beforeProcessing回调，用于填写服务器响应中的userdata属性。例如beforeProcessing: function (data) {
var rows = data.rows, l = rows.length, i, item, itemBySysCode = {};
for (i = 0; i < l; i++) {
item = rows[i];
if (item.syscode) {
itemBySysCode[item.syscode] = item;
}
}
data.userdata = itemBySysCode;
}
现在，您可以访问colModel和colNames中的所有隐藏行。如果您需要完整项目对象，则不应立即使用getRowData方法（jQuery(this).getRowData(id)）。您可以使用的方法仅获取非隐藏属性。要访问隐藏的属性，您可以使用$(this).jqGrid("getGridParam", "userData")[id]。如果userData将从服务器加载原始数据，jQuery(this).getRowData(id)或$(this).jqGrid("getGridParam", "data")将在修改后获取当前数据（您的代码包含本地编辑数据）。