画册设计欣赏,中科云华,永无止境第一季
本文实例为大家分享了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",
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);
}
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
JavaScript使用prototype属性实现继承操作示例
JavaScript直接调用函数与call调用的区别实例分析
JavaScript设计模式--简单工厂模式实例分析【XHR工厂案例】
网友评论