jqgrid默认没有提供单选功能,但是提供了多选功能(multiselect),因此可以通过隐藏多选按钮,每次选择的一条记录的时候重置一下选择列表的方式实现单选:
假设你的html部分代码如下:
<table id="gridTable"></table>
<div id="pgridTable"></div>
加载表格的js代码如下:
$(function(){
var mydata = [
{
id: "1",
invdate: "2010-05-24",
name: "test",
note: "note",
tax: "10.00",
total: "2111.00"},
{
id: "2",
invdate: "2010-05-25",
name: "test2",
note: "note2",
tax: "20.00",
total: "320.00"}
];
$("#gridTable").jqGrid({
data: mydata,
datatype: "local",
height: 150,
rowNum: 999999,
scroll: true,
colNames: ['Inv No', 'Date', 'Client', 'Amount', 'Tax', 'Total', 'Notes'],
colModel: [
{
name: 'id',
index: 'id',
width: 60,
sorttype: "int"},
{
name: 'invdate',
index: 'invdate',
width: 90,
sorttype: "date",
formatter: "date"},
{
name: 'name',
index: 'name',
width: 100},
{
name: 'amount',
index: 'amount',
width: 80,
align: "right",
sorttype: "float",
formatter: "number"},
{
name: 'tax',
index: 'tax',
width: 80,
align: "right",
sorttype: "float"},
{
name: 'total',
index: 'total',
width: 80,
align: "right",
sorttype: "float"},
{
name: 'note',
index: 'note',
width: 150,
sortable: false}
],
pager: "#pgridTable",
viewrecords: true,
multiselect: true,
beforeSelectRow: function(rowid, e){
jQuery("#gridTable").jqGrid('resetSelection');
return(true);
}
});
var myGrid = $("#gridTable");
$("#cb_"+myGrid[0].id).hide();
});
</script>
其中,关键部分代码是:
//实现多选
multiselect: true
//实现每次选择之前重置一下选择项
beforeSelectRow: function(rowid, e){
$("#gridTable").jqGrid('resetSelection');
return(true);
}
//移除多选表头上的多选框
var myGrid = $("#gridTable");
$("#cb_"+myGrid[0].id).hide();
示例请参考:jqgrid Single Selection