jqGrid实现单选功能

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();

 

  • 2
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值