jqGrid实现单选功能

jqgrid默认没有提供单选功能,但是提供了多选功能(multiselect),因此可以通过隐藏多选按钮,每次选择的一条记录的时候重置一下选择列表的方式实现单选:

假设你的html部分代码如下:

加载表格的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 '新建';}
			else if(value==="1"){return '使用中';}
			else {return '无效';}

          } },
		{ 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();

 

你可能感兴趣的:(jqGrid实现单选功能)