jqgrid默认没有提供单选功能,但是提供了多选功能(multiselect),因此可以通过隐藏多选按钮,每次选择的一条记录的时候重置一下选择列表的方式实现单选:
假设你的html部分代码如下:
<table id="jqGrid"></table>
<div id="jqGridPager"></div>
加载表格的js代码如下:
$(function () {
$("#jqGrid").jqGrid({
url: baseURL + 'business/tdevice/list',
datatype: "json",
colModel: [
{ label: '设备id', name: 'deviceId', index: 'device_id', key: true },
{ label: '设备序列号', name: 'deviceNum', index: 'device_num' },
{ label: '设备名称', name: 'deviceName', index: 'device_name'},
{ label: '设备状态', name: 'deviceStatus', index: 'device_status', formatter: function(value, row, index){
if(value==="0"){return '<span class="label label-success">新建</span>';}
else if(value==="1"){return '<span class="label label-info">使用中</span>';}
else {return '<span class="label label-danger">无效</span>';}
} },
{ label: '注册时间', name: 'createTime', index: 'create_time'},
],
viewrecords: true,
height: 385,
rowNum: 10,
rowList : [10,30,50],
rownumbers: true,
rownumWidth: 25,
autowidth:true,
multiselect: true,
pager: "#jqGridPager",
jsonReader : {
root: "page.list",
page: "page.currPage",
total: "page.totalPage",
records: "page.totalCount"
},
prmNames : {
page:"page",
rows:"limit",
order: "order"
},
beforeSelectRow: function(rowid, e){
jQuery("#jqGrid").jqGrid('resetSelection');
return(true);
},
gridComplete:function(){
//隐藏grid底部滚动条
$("#jqGrid").closest(".ui-jqgrid-bdiv").css({ "overflow-x" : "hidden" });
}
});
var myGrid = $("#jqGrid");
$("#cb_"+myGrid[0].id).hide();
});
其中,关键部分代码是:
//实现多选
multiselect: true
//实现每次选择之前重置一下选择项
beforeSelectRow: function(rowid, e){
$("#jqGrid").jqGrid('resetSelection');
return(true);
}
//移除多选表头上的多选框
var myGrid = $("#jqGrid");
$("#cb_"+myGrid[0].id).hide();