jqGridはラジオ機能を実現する

2518 ワード

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