您好,登錄后才能下訂單哦!
本文實(shí)例為大家分享了jqgrid實(shí)現(xiàn)簡單的單行編輯功能的具體代碼,供大家參考,具體內(nèi)容如下
1.html代碼
<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);//保存按鈕添加事件,默認(rèn)不可用 $('.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','數(shù)量'], colModel:[ {name:'id',index:'id',hidden:true}, /*實(shí)現(xiàn)行編輯功能需要添加屬性editable:true,edittype:'text',其中'text'與input中的type屬性對應(yīng), 比如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], //顯示記錄數(shù)的格式 recordtext : "記錄 {0} - {1} 總記錄數(shù) {2}", //頁數(shù)顯示格式 pgtext : "第 {0}頁 共 {1} 頁", viewrecords:true, jsonReader: { // 數(shù)據(jù)行(默認(rèn)為:rows) root:"rows", repeatitems : false, page: "page", // 當(dāng)前頁 records:"records", // 總記錄數(shù) total: "total" }, onSelectRow: function(id){ }, onSelectAll:function(id){ }, //加載完成(初始加載),回調(diào)函數(shù) loadComplete: function(){ layer.closeAll('loading'); var page = $('#tableList').getGridParam('page'); layer.msg('第'+page+'頁', { time: 1000, //1s后自動關(guān)閉 }); }, /*編輯提交時用來對提交的數(shù)據(jù)進(jìn)行序列化,如果不添加此屬 性,默認(rèn)提交的是各個可編輯的字段名值對,后臺需要有多個同名 字段來對應(yīng),序列化后,可以只用一個包含各個字段的對象即可接 收*/ 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" }); } /*編輯行的函數(shù)*/ function updateRowData() { //獲取選中行的id var id=$('#tableList').jqGrid('getGridParam','selrow'); if(id==null) { return; } lastId=id; //存放編輯的id //調(diào)用此方法,使當(dāng)前行變?yōu)榭删庉? $("#tableList").jqGrid('editRow', id); $('.btn-update').attr("disabled",true);//編輯按鈕變?yōu)椴豢捎? //保存和取消按鈕變?yōu)榭捎? $('.btn-save').attr("disabled",false); $('.btn-cancel').attr("disabled",false); } /*保存編輯后的數(shù)據(jù)函數(shù)*/ function saveRowData() { $("#tableList").jqGrid( 'saveRow', lastId,//獲取編輯行的id { /*成功提交到后臺的回調(diào)函數(shù)*/ successfunc: function(response) { //返回到前臺的json字符串 var data = eval('(' + response.responseText + ')'); if(data.resultCode==0) { layer.msg("保存成功!",{icon:1}); //返回true,對前臺數(shù)據(jù)進(jìn)行更新 return true; } else { layer.msg("保存失?。?,{icon:2}); //返回false,對前臺數(shù)據(jù)不更新 return false; } }, /*提交的請求地址*/ url:'recoveryTokenUpdate.action', /*系統(tǒng)發(fā)生異常時的回調(diào)函數(shù)*/ errorfunc:function(){ layer.msg('系統(tǒng)異常!', {time: 2000}); }, /*請求類型post*/ "mtype" : "POST" }); $('.btn-updateToken').attr('disabled',false); $('.btn-saveToken').attr('disabled',true); $('.btn-cancelToken').attr('disabled',true); } /*取消編輯函數(shù)*/ function cancelRowData() { //取消所編輯的行的操作 $('#tableList').jqGrid('restoreRow', lastId); $('.btn-updateToken').attr('disabled',false); $('.btn-saveToken').attr('disabled',true); $('.btn-cancelToken').attr('disabled',true); } </script>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。