【适用范围】:web系统中的页面对应含有对象区表格数据选择
1.记录翻页后前页的所选行状态
2.点击非含复选框单元格的单元格触发单击事件
3.点击含复选框的单元格为多选模式
4.单选后对应行复选框状态为选中状态,可以触发单击事件,复选框状态只有操作复选框才可执行反选,多选时不触发任何事件(包括最后一次单选状态),但保证页面操作时能获取到所选中的id集合
实现的js代码如下:
var current_id = -1;//当前单选选中的id
var _arrGlobalData = new Array(); //全局的缓存变量,存储所选的id
var isClick = true;
$("#jq_table").jqGrid('GridUnload');
jQuery("#jq_table").jqGrid({
data:data,
datatype : "local",
colNames : [ 'id','Item1', 'Item2' ,......],
colModel : [
{name : 'id',index : 'id',width:70, hidden:true},
{name : 'item1',index : 'item1',sortable:true,width:70},
{name : 'item2',index : 'item2',width:70},
........
],
rowNum : 5,
rowList : [ 5,10,15 ],
width: '244',
height : autoHeight,
pager : '#jq_table_jqpager',
autoScroll: true,
multiselect: true, //控制多选
viewrecords: false,
gridComplete:function(){
var allData = $(this).jqGrid('getDataIDs');//获取当页所有行的id
var oldData = _arrGlobalData ;
for(var i = 0; i < allData.length; i++){
for(var j = 0; j < oldData.length; j++){
if(allData[i]==oldData[j]){
$('#jq_table').jqGrid('setSelection', allData[i], false);
break;
}
}
}
var rowid = $(this).jqGrid('getGridParam', 'selarrrow');
if(allData.length == rowid.length){
$('#leftMeterPanel').find("#cb_meter_jq_table").prop('checked',true);
}
//加载数据完成后执行
if(current_id==-1)
//移除能保持最后一个单选行的样式
$('#meter_jq_table').find("tr[role='row']").removeClass('sys-ui-status-highlight');
$("#"+current_id).addClass('sys-ui-status-highlight');//保持最后一个单选行的样式
for(var i=0;i<rowid.length;i++){
if(rowid[i]!=current_id){
$("#"+rowid[i]).addClass('sys-ui-status-multi');
}
}
},
onCellSelect:function(id,status){
//移除能保持最后一个单选行的样式
$(this).find("tr[role='row']").removeClass('sys-ui-status-highlight');
if(iCol){//单选
//覆盖默认样式,保持原样不变
$(this).find("tr[role='row']").addClass('sys-ui-status-multi');
$("#"+id).removeClass('sys-ui-status-multi');//启用默认样式
//isClick确保$("#"+id).click();执行一次
if($("#jqg_meter_jq_table_"+id).is(":checked") && isClick){
isClick = false;
$("#"+id).click();//jQuery触发行点击事件
}else{
isClick = true;
current_id = id;
if(_arrGlobalData .indexOf(id)==-1){
_arrGlobalData .push(id);
}
//这里可以写点击触发事件
meterObjEvent(id);
}
}else{//多选
$("#"+current_id).addClass('sys-ui-status-highlight');//保持最后一个单选行的样式
if(id != current_id){
$("#"+id).addClass('sys-ui-status-multi');//覆盖默认样式,保持原样不变
}
}
},
onSelectRow:function(id,status){
var rowid = $(this).jqGrid('getGridParam', 'selarrrow');
if(status==false){
$("#"+id).removeClass('sys-ui-status-multi'); //移除多选当前行样式
_arrGlobalData .splice(_arrGlobalData .indexOf(id),1);
}
for(var i=0;i<rowid.length;i++){
if(_arrGlobalData .indexOf(rowid[i])==-1){
_arrGlobalData .push(rowid[i]);
}
}
},
onSelectAll: function(ids,status){
$("#"+current_id).addClass('sys-ui-status-highlight');//保持最后一个单选行的样式
if(status==false){
for(var k=0;k<ids.length;k++){
_arrGlobalData .splice(_arrGlobalData .indexOf(ids[k]),1);
if(ids[i]!=current_id){
$("#"+ids[i]).removeClass('sys-ui-status-multi');
}
}
}else{
for(var i=0;i<ids.length;i++){
if(_arrGlobalData .indexOf(ids[i])==-1){
_arrGlobalData .push(ids[i]);
}
if(ids[i]!=current_id){
$("#"+ids[i]).addClass('sys-ui-status-multi');
}
}
}
},
caption : "实现翻页"
});
附加样式:
.sys-ui-status-multi {
border: 1px solid #A6C9E2 !important;
background: #FEFFFF !important;
color: #363636;
}
.sys-ui-status-highlight{
border: 1px solid #fad42e !important;
background: #fbec88 !important;
color: #363636;
}