当前,我使用的是free-jqgrid 4.15.4,我需要在页面上选择多行,向参与者发送电子邮件,然后一次性重置“选择”。
为此,我在函数的ajax回调中使用multiselect: true,multiPageSelection: true, $('#grid').jqGrid('resetSelection');
。
但是我认为resetSelection
代码不适用于多个页面,而仅适用于当前页面(删除所有选中的框)。
这是fiddle,显示了resetSelection
在网格中的实现。
代码如下:
$(function () {
"use strict";
var mydata = [
{ Id: "10", FirstName: "test", LastName: "TNT", Gender: "Male" },
{ Id: "11", FirstName: "test2", LastName: "ADXC", Gender: "Male" },
{ Id: "12", FirstName: "test3", LastName: "SDR", Gender: "Female" },
{ Id: "13", FirstName: "test4", LastName: "234", Gender: "Male" },
{ Id: "14", FirstName: "test5", LastName: "DAS", Gender: "Male" },
];
$("#list").jqGrid({
data: mydata,
colNames: ['',/*'Id',*/ 'First Name', 'Last Name', 'Gender'],
colModel: [
{
name: "act", template: "actions",
formatoptions: {
delbutton: false
}
},
/*{
label: "Id",
name: 'Id',
hidden: true,
search: false,
},*/
{
//label: "FirstName",
name: 'FirstName',
searchoptions: {
searchOperators: true,
sopt: ['eq', 'ne', 'lt', 'le','ni', 'ew', 'en', 'cn', 'nc'],
}, search: true,
},
{
//label: "LastName",
name: 'LastName',
searchoptions: {
searchOperators: true,
sopt: ['eq', 'ne', 'lt', 'ni', 'ew', 'en', 'cn', 'nc'],
}, search: true,
},
{
//label: "Gender",
name: 'Gender',
//search: true,
edittype: "select", editable: true,
editoptions: {
value: "Male:Male;Female:Female" //"Male:Male;Female:Female;" ,
},
stype: "select",
editrules: {
custom: true,
custom_func: function (value, colName, iCol) {
alert("The value to validate: " +value);
return [true];
}
}
},
],
/*onSelectRow: function (id) {
if (id && id !== lastsel) {
jQuery('#list').restoreRow(lastsel);
jQuery('#list').editRow(id, true);
lastsel = id;
}
},*/
afterSaveCell: function (rowid, cmName, value, iRow, iCol) {
var $self = $(this);
if (cmName === "Gender") {
$self.jqGrid("getGridParam", "selarrrow").forEach(function (id) {
var item = $self.jqGrid("getLocalRow", id);
if (id !== rowid && item.Gender !== value) {
$self.jqGrid("setCell", id, iCol, value, false, false, true);
}
});
}
},
loadComplete: function (id) {
var $self = $(this);
if ($self.getGridParam('records') === 0) {
//$('#grid tbody').html("<div style='padding:6px;background:#D8D8D8;'>No records found</div>");
/*} else {
var lastsel = 0;
if (id && id !== lastsel) {
$self.restoreRow(lastsel);
$self.editRow(id, true);
lastsel = id;
}*/
}
},
pager: true, //jQuery('#pager'),
//loadonce: true,
viewrecords: true,
//gridview: true,
//width: 'auto',
height: 450, // '450px',
iconSet: "fontAwesome",
multiselect: true,
multiPageSelection: true,
cellEdit:true,
rowNum: 2,
emptyrecords: "No records to display",
jsonReader: {
repeatitems: false,
id: "Id" //Id: "Id"
},
localReader: { id: "Id" },
prmNames: { id: "Id" }
});
$('#list').jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn", multipleSearch: true, searchOperators: true, search: true, loadFilterDefaults: true });
$('#list').jqGrid('navGrid', "#pager", {
search: true, // show search button on the toolbar
add: true,
edit: false,
del: false,
refresh: true,
reloadGridOptions: { fromServer: true }
});
$("#list").jqGrid("navButtonAdd", {
caption: "",
buttonicon: "fa fa-eraser",
title: "Clear Selection",
onClickButton: function (e) {
var myGrid = $('#list');
myGrid.jqGrid('resetSelection');
}
});
});
我看到的唯一变化是我在实际的jqgrid中使用了data: json
。