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

前端之家收集整理的这篇文章主要介绍了jqgrid实现简单的单行编辑功能前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

1.HTML代码

2.script代码

显示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){
  },//加载完成(初始加载),回调<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>
  loadComplete: function(){ 
   layer.closeAll('loading');
   var page = $('#tableList').getGridParam('page');
   layer.msg('第'+page+'页',{
   time: 1000,//1s后<a href="/tag/zidong/" target="_blank" class="keywords">自动</a><a href="/tag/guanbi/" target="_blank" class="keywords">关闭</a>
   });
 },/*编辑提交时用来对提交的数据进行序列化,如果不<a href="/tag/tianjia/" target="_blank" class="keywords">添加</a>此属
 性,默认提交的是各个可编辑的字段名值对,<a href="/tag/houtai/" target="_blank" class="keywords">后台</a>需要有多个同名
 字段来对应,序列化后,可以只用一个包含各个字段的对象即可接
 收*/
 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,对<a href="/tag/qiantai/" target="_blank" class="keywords">前台</a>数据进行更新
       return true;
      }
     else
     {
     layer.msg("保存失败!",{icon:2});
     //返回false,对<a href="/tag/qiantai/" target="_blank" class="keywords">前台</a>数据不更新
       return false;
     }
    },/*提交的请求地址*/
   url:'recoveryTokenUpdate.action',/*系统发生异常时的回调<a href="/tag/hanshu/" target="_blank" class="keywords">函数</a>*/
   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',true);
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章