jqgrid实现简单的单行编辑功能

2020-05-24 21:43:36易采站长站整理

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

1.html代码


<table id="tableList" style="text-align:center;"></table>
<div id=tablePager></div>

2.script代码


<script type="text/javascript">
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",