jqgrid编辑php,实例详解jqgrid实现简单的单行编辑功能

本文主要介绍了jqgrid实现简单的单行编辑功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。

本文实例为大家分享了jqgrid实现简单的单行编辑功能的具体代码，供大家参考，具体内容如下

1.html代码

2.script代码

var lastId;//行编辑时用来存放行的id

$(function(){

showTable(); //显示jqgrid表格

$('.btn-update').click(updateRowData);//编辑按钮

$('.btn-save').click(saveRowData);//保存按钮添加事件，默认不可用

$('.btn-cancel').click(cancelRowData);//取消按钮，取消编辑操作

});

function showTable(){

layer.load(2);

$("#tableList").jqGrid({

url:'myList.action',

mtype: "POST",

styleUI : 'AmazeUI',

datatype: "json",

height:"auto",

autowidth:true,

rownumbers: true,

multiselect: true,

colNames:['id','数量'],

colModel:[

{name:'id',index:'id',hidden:true},

/*实现行编辑功能需要添加属性editable:true,edittype:'text',其中'text'与input中的type属性对应，

比如checkbox,radio，password等*/

{name:'num',index:'num',align: "center",editable: true, edittype: 'text'}

],

sortable:true,

sortname:'bc.serialNumber',

sortorder:'asc',

rowNum:10,

rowList:[10,20,30,90],

//显示记录数的格式

recordtext : "记录 {0} - {1} 总记录数 {2}",

//页数显示格式

pgtext : "第 {0}页 共 {1} 页",

viewrecords:true,

jsonReader: {

// 数据行(默认为：rows)

root:"rows",

repeatitems : false,

page: "page", // 当前页

records:"records", // 总记录数

total: "total"

},

onSelectRow: function(id){

},

onSelectAll:function(id){

},

//加载完成(初始加载)，回调函数

loadComplete: function(){

layer.closeAll('loading');

var page = $('#tableList').getGridParam('page');

layer.msg('第'+page+'页', {

time: 1000, //1s后自动关闭

});

},

/*编辑提交时用来对提交的数据进行序列化，如果不添加此属

性，默认提交的是各个可编辑的字段名值对，后台需要有多个同名

字段来对应，序列化后，可以只用一个包含各个字段的对象即可接

收*/

serializeRowData: function(postdata) {

return {'entity.id':postdata.id,'entity.num':postdata.num};

},

prmNames:

{rows:"pageInfo.pageSize",page:"pageInfo.page",

sort:"pageInfo.sidx",order:"pageInfo.sord",

search: "pageInfo._search"},

pager:"#tablePager"

});

}

/*编辑行的函数*/

function updateRowData()

{

//获取选中行的id

var id=$('#tableList').jqGrid('getGridParam','selrow');

if(id==null)

{

return;

}

lastId=id; //存放编辑的id

//调用此方法，使当前行变为可编辑

$("#tableList").jqGrid('editRow', id);

$('.btn-update').attr("disabled",true);//编辑按钮变为不可用

//保存和取消按钮变为可用

$('.btn-save').attr("disabled",false);

$('.btn-cancel').attr("disabled",false);

}

/*保存编辑后的数据函数*/

function saveRowData()

{

$("#tableList").jqGrid(

'saveRow',

lastId,//获取编辑行的id

{

/*成功提交到后台的回调函数*/

successfunc: function(response) {

//返回到前台的json字符串

var data =

eval('(' + response.responseText + ')');

if(data.resultCode==0)

{

layer.msg("保存成功！",{icon:1});

//返回true，对前台数据进行更新

return true;

}

else

{

layer.msg("保存失败！",{icon:2});

//返回false，对前台数据不更新

return false;

}

},

/*提交的请求地址*/

url:'recoveryTokenUpdate.action',

/*系统发生异常时的回调函数*/

errorfunc:function(){

layer.msg('系统异常！', {time: 2000});

},

/*请求类型post*/

"mtype" : "POST"

});

$('.btn-updateToken').attr('disabled',false);

$('.btn-saveToken').attr('disabled',true);

$('.btn-cancelToken').attr('disabled',true);

}

/*取消编辑函数*/

function cancelRowData()

{

//取消所编辑的行的操作

$('#tableList').jqGrid('restoreRow', lastId);

$('.btn-updateToken').attr('disabled',false);

$('.btn-saveToken').attr('disabled',true);

$('.btn-cancelToken').attr('disabled',true);

}

相关推荐：