主要步骤
1、添加空白行主要在代码loadComplete中
2、表格设置为可编辑状态主要是
表格中：
cellEdit: true,
cellsubmit: "clientArray",
表格字段中：editable:true。
3、不能通过获取选中行的数据新增或修改，不准，尤其是加了空白行，主键是空值更不能获取数据了
所以点击按钮的时候传值行号，获取行号为
formatter: function (value, options, row)
中的options["rowId"]
之前一直没用过option，只用过value和row哈哈~
根据行数获取数据
var ret = $('#jqGrid').jqGrid('getRowData', rowId);
4、这些做完之后因为每次点保存按钮时，最后一次输入单元格的编辑状态取消不了，值也有问题，是一个input标签，只能点空白处才能取消编辑状态很不方便
所以点保存、删除按钮时，更改下表格的编辑状态
$('#jqGrid').jqGrid("saveCell", lastRow, lastCell); //当前单元格退出编辑
这个lastRow和lastCell设置成了全局变量，
每次修改表格时都会给这两个变量赋值这样就不会有问题了
beforeEditCell: function (rowid, cellname, v, iRow, iCol) {
lastRow = iRow; //给全局变量赋值,点保存按钮前推出编辑模式
lastCell = iCol;
},
整体js
var lastRow; //最后修改行号先定义一个全局变量
var lastCell; //最后修改列号
$(function () {
$("#jqGrid").jqGrid({
url: '../app/xxx/list',
datatype: "json",
viewrecords: true,
height: '100%',
rowNum: 1000,
rowList : [1000,2000,3000,4000],
autowidth:true,
altRows: true,
altclass: 'differ',
pager: "#jqGridPager",
cellEdit: true,
cellsubmit: "clientArray", //当单元格发生变化后不直接发送请求、"remote"默认直接发送请求
multiselect: true,
colModel: [
{ label: '行号', name:'id',key: true, width: 40, hidden:true, align:'center' },
{ label: '编号', name:'sequenceid', width: 40, hidden:true,align:'center' },
{ label: '名称', name: 'name2', width: 20, align:'center' , editable:true,sortable : false},
{ label: '手机号1', name: 'number1', width: 35, align:'center' , editable:true,sortable : false},
{ label: '手机号2', name: 'number2', width: 35, align:'center' , editable:true,sortable : false},
{ label: '手机号3', name: 'number3', width: 35, align:'center' , editable:true,sortable : false},
{ label: '手机号4', name: 'number4', width: 35, align:'center' , editable:true,sortable : false},
{ label: '手机号5', name: 'number5', width: 35, align:'center' , editable:true,sortable : false},
{ label: '操作', name: 'updateData', width: 30, align: 'center', formatter: function (value, options, row) {
return '<a onclick="vm.saveOrUpdate(\''+options["rowId"]+'\')" class="label label-primary">保存组</a>' +
'<a onclick="vm.delete(\''+options["rowId"]+'\')"class="label label-danger">删除组</a>';
} }
],
jsonReader : {
root: "data.list",
page: "data.currPage",
total: "data.totalPage",
records: "data.totalCount",
"id":"rn"
},
prmNames : {
page:"page",
rows:"limit",
order: "order"
},
beforeEditCell: function (rowid, cellname, v, iRow, iCol) {
lastRow = iRow; //给全局变量赋值,点保存按钮前推出编辑模式
lastCell = iCol;
},
loadComplete: function(){
//最后一行新增数据
var ids = $("#jqGrid").jqGrid('getDataIDs');
if (ids.length == 0) {
ids = [0];
}
//获得当前最大行号（数据编号）
var rowid = Math.max.apply(Math, ids);
//获得新添加行的行号（数据编号）
var newrowid = rowid + 1;
var dataRow = {};
$("#jqGrid").jqGrid("addRowData", newrowid, dataRow, "last");
}
});
});
var vm = new Vue({
el:'#safenumberapp',
data:{
showList: true,
title:null,
showjqGridPager:true
},
methods: {
///commit end
reload: function (event) {
vm.showList = true;
vm.showResult = true;
var page = $("#jqGrid").jqGrid('getGridParam','page');
$("#jqGrid").jqGrid('setGridParam',{
page:1
}).trigger("reloadGrid");
},
delete: function (rowId) {
//获取选择的菜单
$('#jqGrid').jqGrid("saveCell", lastRow, lastCell); //当前单元格退出编辑
var ret = $('#jqGrid').jqGrid('getRowData', rowId);
if(ret.sequenceid == "" || ret.sequenceid == null || ret.sequenceid == undefined) {alert("空白行无需删除。");return false;}
confirm('确定要删除选中的组？', function(){
$.ajax({
type: "POST",
url: "../app/delete",
data: JSON.stringify(ret.sequenceid),
async: false,
success: function(r){
if(r.status == 200){
alert('操作成功', function(index){
vm.reload();
});
}else{
alert(r.msg);
}
}
});
});
}
saveOrUpdate:function(rowId){
//获取选择的菜单
$('#jqGrid').jqGrid("saveCell", lastRow, lastCell); //当前单元格退出编辑
var ret = $('#jqGrid').jqGrid('getRowData', rowId);
var url = (ret.sequenceid == "" || ret.sequenceid == null || ret.sequenceid == undefined) ? "../app/save" : "../app/update";
if(!isPhone(ret['number1'])){alert('号码1请输入正确的手机号码');return false};
if(!isPhone(ret['number2'])){alert('号码2请输入正确的手机号码');return false};
if(!isPhone(ret['number3'])){alert('号码3请输入正确的手机号码');return false};
if(!isPhone(ret['number4'])){alert('号码4请输入正确的手机号码');return false};
if(!isPhone(ret['number5'])){alert('号码5请输入正确的手机号码');return false};
$.ajax({
type: "POST",
url: url,
data: JSON.stringify(ret),
async: false,
success: function(r){
if(r.status === 200){
alert('操作成功', function(index){
vm.reload();
});
}else{
alert(r.msg);
}
}
});
}
}
});
function isPhone(phone) {
if(!(phone == "" || phone == null || phone == undefined)){
var myreg=/^1[3-9]\d{9}$/;
if (!myreg.test(phone)) {
return false;
}
}
return true;
}