Основные шаги
1. Добавлять пустые строки в основном в код loadComplete
2. Установка формы в редактируемое состояние в основном
В виде:
cellEdit: true,
cellsubmit: "clientArray",
В полях формы: редактируемый: true.
3. Не разрешается добавлять или изменять данные выбранной строки, особенно если добавляется пустая строка, первичный ключ имеет нулевое значение и данные не могут быть получены.
Таким образом, при нажатии кнопки передается номер строки значения, а номер строки получается как
форматер: функция (значение, параметры, строка)
options["rowId"] в
Я никогда раньше не использовал опцию, только значение и строку, ха-ха~
Получить данные по количеству строк
var right = $('#jqGrid').jqGrid('getRowData', rowId);
4. После того, как все это сделано, потому что каждый раз, когда нажимается кнопка сохранения, статус редактирования последней ячейки ввода не может быть отменен, и значение также проблематично.Это метка ввода, и очень неудобно отменять редактирование статуса только нажатием на пустое место
Поэтому, когда нажимаются кнопки сохранения и удаления, статус редактирования следующей таблицы изменяется.
$('#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;
}