//全局变量设置
两个变量分别用来统计被选中的个数以及将被选中的行对应的id值放入对应的数组
var countSelect = 0;
var SELECTIDS=[];
/*查询数据*/
function loadMapLinkOrderGrid(){
var queryUrl = “”;
$("#mapGridLinkOrderGrid").jqGrid({
url: queryUrl,
datatype: "local", //数据来源
mtype: "POST",//提交方式
height:'auto',
shrinkToFit:false,
loadonce: true,//进行分页跳转
loadui: 'disable',
styleUI : 'Bootstrap',
ajaxGridOptions: {
timeout: 60000
},
colNames : ['','标题','网管ID','类型','是否有效','级别'],
colModel : [
{
name : 'ID_',
index : 'ID_',//工单类型
width : 180,
align : 'center',
sortable : false,
hidden: true
},
{
name : 'ALARM_TITLE',
index : 'ALARM_TITLE',//工单类型
width : 240,
align : 'center',
sortable : false
}, {
name : 'ALARMID',
index : 'ALARMID',//工单类型
width : 225,
align : 'center',
sortable : false
}, {
name : 'TYPE_',
index : 'TYPE_',//工单类型
width : 210,
align : 'center',
sortable : false,
formatter:function(v, opt, rec){
var recdate=rec['TYPE_'];
if(recdate=='0'){
recdate="场景类告警"
}else if(recdate=='1'){
recdate="感知类告警"
}else if(recdate=='2'){
recdate="家宽类告警"
}
return recdate;
}
}, {
name : 'YXBZ',
index : 'YXBZ',//工单类型
width : 210,
align : 'center',
sortable : false,
formatter:function(v, opt, rec){
var recdate=rec['YXBZ'];
if(recdate=='0'){
recdate="无效"
}else if(recdate=='1'){
recdate="有效"
}
return recdate;
}
}, {
name : 'ALARM_LEVEL',
index : 'ALARM_LEVEL',//工单类型
width : 216,
align : 'center',
sortable : false/*,
formatter:function(v, opt, rec){
var recdate=rec['operator_time'];
recdate=dateformat(recdate);
return recdate;
}*/
}
],
jsonReader : {
root : "data.elements",
page : "data.pageNo",
records : "data.total",
total: "data.pageNum",
repeatitems: false
},
beforeRequest:function(){
showLoading(true);
},
multiselect: true,//复选框
// multiboxonly:true,
autoScroll: true,
rownumbers:false,//添加左侧行号
rownumWidth:50,//设置列宽
viewrecords: true,//是否在浏览导航栏显示记录总数
rowNum:10,//每页显示记录数
//pginput:true,
rowList:[10,30,50],//用于改变显示行数的下拉列表框的元素数组。
pager:$('#mapGridLinkOrderGridPager'),
gridComplete: function() {
showLoading(false)
countSelect = 0;//每一次刷新grid加载数据之后,需要将countSelect清零,重新计算复选框
var queryGrid = $("#mapGridLinkOrderGrid");
var ids = queryGrid.jqGrid('getDataIDs');// 获取表格中所有id
if(ids.length > 0){
for(var i=0; i<ids.length; i++) {//解决jqGrid复选框样式问题
var id = ids[i];
// console.log(id)
var curChk = $("#" + id + "").find(":checkbox");
curChk.attr('class', 'cbox');
}
}
// hideLoading()
},
onSelectAll: function(rowIds,status,e){
console.log("复选框选中事件:"+ rowIds+" "+status)
if(rowIds.length === 0){
$("#edit_btn").attr("disabled",true);
$("#delete_btn").attr("disabled",true);
countSelect = 0;
SELECTIDS=[];
}else if(rowIds.length === 1){
if(status){
$("#edit_btn").removeAttr("disabled");
$("#delete_btn").removeAttr("disabled");
SELECTIDS=rowIds;
countSelect = rowIds.length;
}else{
$("#edit_btn").attr("disabled",true);
$("#delete_btn").removeAttr("disabled");
SELECTIDS=[];
countSelect = 0;
}
}else{
if(status) {
$("#edit_btn").attr("disabled", true);
$("#delete_btn").removeAttr("disabled");
SELECTIDS=rowIds;
countSelect = rowIds.length;
}else {
$("#edit_btn").attr("disabled", true);
$("#delete_btn").attr("disabled",true);
SELECTIDS=[];
countSelect = 0;
}
}
},
onSelectRow: function(rowId,status){
if(status){
countSelect++;
SELECTIDS.push(rowId)
}else{
countSelect--;
/*for (var i = 0; i <SELECTIDS.length ; i++) {
var m=i+1;
if (rowId==m){
SELECTIDS.remove(i)
}
}*/SELECTIDS.remove(rowId)
}
console.log("被选中行数:"+countSelect+";第"+rowId+"行 "+status)
if(countSelect > 0){
$("#edit_btn").removeAttr("disabled");
$("#delete_btn").removeAttr("disabled");
if(countSelect > 1){
$("#edit_btn").attr("disabled",true);
}
}else{
$("#edit_btn").attr("disabled",true);
$("#delete_btn").attr("disabled",true);
}
}
});
$("#mapGridLinkOrderGrid").jqGrid('navGrid', '#mapGridLinkOrderGridPager', {edit : false,add : false,del : false,search:false,refresh:false});
$("#mapGridLinkOrderGridPager_left").css('width', '5%');
};
$("#edit_btn").attr("disabled",true); $("#delete_btn").attr("disabled",true);分别为编辑按钮和删除按钮,对应事件请自行按需撰写,注意及时清空全局变量数据哦,不然出错别怪我没提醒
SELECTIDS在获取到被选中的行号,从而利用下面的方式获取对应的行数据可进行相应编辑操作
删除操作获取数据实例:
var deleteIds = [];
/* console.log("被选中的Ids:"+SELECTIDS+"----------------")*/
if(SELECTIDS.length > 0){
for(var i=0; i<SELECTIDS.length; i++){
var gridData= queryGrid.jqGrid("getRowData",SELECTIDS[i]);//获取选中行数据
deleteIds.push(gridData['ID_']);
}
/* console.log("要删除的id内容:"+deleteIds)*/
}
后台接参示例:
@RequestBody String[] deleteIds
编辑数据获取操作示例:
var queryGrid = $("#mapGridLinkOrderGrid");
for (var i = 0; i <1 ; i++) {
var gridData= queryGrid.jqGrid("getRowData",SELECTIDS[i]);//获取选中行数据
$("#A_id").val(gridData['ID_']);
$("#ATitle").val(gridData['ALARM_TITLE']);
$("#AID").val(gridData['ALARMID']);
$("#AType").val(gridData['TYPE_']);
$("#AYxbz").val(gridData['YXBZ']);
$("#ALevel").val(gridData['ALARM_LEVEL']);
/* console.log("要修改的id及其内容:"+gridData['ID_']+";"+gridData['ALARMID']+"; "+gridData['ALARMID']+"; "+gridData['TYPE_']+"; "
+gridData['YXBZ']+"; "+gridData['ALARM_LEVEL'])*/
}
直接用实体类进行接参即可 如:USER user;
本文介绍了如何使用JavaScript实现复选框功能,包括计数被选中的工单和存储ID,以便于编辑、删除操作。通过jqGrid插件展示告警数据,并演示了获取选中行数据和处理编辑、删除请求的方法。

被折叠的 条评论
为什么被折叠?



