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

2023-09-23 19:01:16 59

varlastId;//行编辑时用来存放行的id $(function(){ showTable();//显示jqgrid表格 $('.btn-update').click(updateRowData);//编辑按钮 $('.btn-save').click(saveRowData);//保存按钮添加事件，默认不可用 $('.btn-cancel').click(cancelRowData);//取消按钮，取消编辑操作 }); functionshowTable(){ 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'); varpage=$('#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" }); } /*编辑行的函数*/ functionupdateRowData() { //获取选中行的id varid=$('#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); } /*保存编辑后的数据函数*/ functionsaveRowData() { $("#tableList").jqGrid( 'saveRow', lastId,//获取编辑行的id { /*成功提交到后台的回调函数*/ successfunc:function(response){ //返回到前台的json字符串 vardata= eval('('+response.responseText+')'); if(data.resultCode==0) { layer.msg("保存成功！",{icon:1}); //返回true，对前台数据进行更新 returntrue; } else { layer.msg("保存失败！",{icon:2}); //返回false，对前台数据不更新 returnfalse; } }, /*提交的请求地址*/ 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); } /*取消编辑函数*/ functioncancelRowData() { //取消所编辑的行的操作 $('#tableList').jqGrid('restoreRow',lastId); $('.btn-updateToken').attr('disabled',false); $('.btn-saveToken').attr('disabled',true); $('.btn-cancelToken').attr('disabled',true); }

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

热门推荐

随机推荐