小程序怎么才能制作_jqgrid完成简略的单行修改功

jqgrid实现简单的单行编辑功能       这篇文章主要介绍了jqgrid实现简单的单行编辑功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

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

<代码

 table id="tableList" /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 

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