I have set up a demo on this page : http://permanaj.net/jqgrid/index.html
code:
<html>
<head>
<title>JqGrid</title>
<link rel="stylesheet" type="text/css" href="smoothness/jquery-ui-1.8.16.custom.css" />
<link href="jqgrid/ui.jqgrid.css" type="text/css" rel="stylesheet" />
<script src="jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>
<script type="text/javascript" src="jqgrid/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="jqgrid/jquery.jqGrid.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/* test save cart */
$('#test-save').click(function(){
var qtyOrder = new Array(), tmpVal, tmpKdProd;
$('.qty-order').each(function(k, v){
tmpVal = $(v).val();
tmpKdProd = '';
if (tmpVal > 0) {
tmpKdProd = $(v).attr('title');
qtyOrder.push( tmpKdProd+'='+tmpVal);
}
});
console.log('Recap Order : ' + qtyOrder.join(','));
return false;
});
/* jqgrid */
function qadQuantityFormatter(cellvalue, options, rowObject){
return '<input type="text" class="qty-order" value="'+cellvalue+'" class="text" title="'+rowObject[3]+'" id="qty-'+rowObject[3]+'"/>';
}
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
$('#the-grid').jqGrid({
url: 'data.json',
datatype: 'json',
mtype: 'GET',
colNames: ['Produk Line', 'Produk Group', 'Satuan Ukuran', 'Kode Produk', 'Nama Produk', 'Harga', 'Order Qty.'],
colModel: [
{name:'NAMA_PRODUK_LINE', index: 'NAMA_PRODUK_LINE', width:200, jsonmap: 'cell.NAMA_PRODUK_LINE'},
{name:'NAMA_PRODUK_GROUP', index: 'NAMA_PRODUK_GROUP', width:200, jsonmap: 'cell.NAMA_PRODUK_GROUP'},
{name:'SATUAN', index: 'SATUAN', width:200, jsonmap: 'cell.SATUAN'},
{name:'KODE_PRODUK', index: 'KODE_PRODUK', width:200, jsonmap: 'cell.KODE_PRODUK'},
{name:'NAMA_PRODUK', index: 'NAMA_PRODUK', width:200, jsonmap: 'cell.NAMA_PRODUK'},
{name:'HARGA', index: 'HARGA', width:200, jsonmap: 'cell.HARGA'},
{name:'order', index: 'order', width:200, jsonmap: 'cell.order', formatter: qadQuantityFormatter}
],
rowNum: 10,
rowList: [10, 20, 30],
pager: '#the-grid-pager',
sortname: 'NAMA_PRODUK_LINE',
sortorder: 'ASC',
caption: 'Daftar Produk',
viewrecords: true,
loadonce: true,
height: 250,
autowidth: true,
onPaging : function(but) {
//alert("Button: "+but + " is clicked");
}
});
$('#the-grid').jqGrid('navGrid','#the-grid-pager',{edit:false,add:false,del:false});
/* cart quantity */
$('#the-grid').delegate('.qty-order', 'blur', function(){
console.log('Order Quantity : ' + $(this).val());
});
});
</script>
</head>
<body>
<div id="wrapper">
<table id="the-grid"></table>
<div id="the-grid-pager"></div>
</div>
</body>
json data:
{
"page":1,
"total":38,
"records":375,
"rows":[
{
"id":"MA0201001",
"cell":[
"Additives",
"MA02",
"KILOGRAM",
"MA0201001",
"Hal Color Black HC 969.50",
"0.00",
0
]
},
{
"id":"MA0202002",
"cell":[
"Additives",
"MA02",
"KILOGRAM",
"MA0202002",
"CaCO3 BAP-800 Bukit Ashar",
"0.00",
0
]
},
{
"id":"MA0202004",
"cell":[
"Additives",
"MA02",
"KILOGRAM",
"MA0202004",
"CaCo3 OM 1 TGD",
"0.00",
0
]
},
{
"id":"MA0204001",
"cell":[
"Additives",
"MA02",
"KILOGRAM",
"MA0204001",
"Stab CRC Power ex Taiwan",
"0.00",
0
]
},
{
"id":"MA0205001",
"cell":[
"Additives",
"MA02",
"KILOGRAM",
"MA0205001",
"Dioxtyl Ptalate Oil",
"0.00",
0
]
},
{
"id":"MA0206002",
"cell":[
"Additives",
"MA02",
"KILOGRAM",
"MA0206002",
"PX 105 ex Malaysia",
"0.00",
0
]
},
{
"id":"MA0206026",
"cell":[
"Additives",
"MA02",
"KILOGRAM",
"MA0206026",
"Rikemal AS-005 ex Malaysia",
"0.00",
0
]
},
{
"id":"MA0208003",
"cell":[
"Additives",
"MA02",
"KILOGRAM",
"MA0208003",
"Tribasic Chemson Naftovin T3A ex China",
"0.00",
0
]
},
{
"id":"MA0208004",
"cell":[
"Additives",
"MA02",
"KILOGRAM",
"MA0208004",
"Naftomix GRD 19043-I Chemson ex China",
"0.00",
0
]
},
{
"id":"MA0208005",
"cell":[
"Additives",
"MA02",
"KILOGRAM",
"MA0208005",
"Tribasic Naftovin T3 Chemson ex UK",
"0.00",
0
]
},
{
"id":"MA0208006",
"cell":[
"Additives",
"MA02",
"KILOGRAM",
"MA0208006",
"Naftomix PRD 2088 Chemson RRC",
"0.00",
0
]
},
...
{
"id":"MA0103003",
"cell":[
"Resin",
"MA01",
"KILOGRAM",
"MA0103003",
"PVC Resin K-65 ST",
"0.00",
0
]
}
]
}
For example, I change the number of Order Qty to 20 for all items, when I click Next once and then click Back once, the number on textfield is reset to 0, not 20
How to achieve when page change, the number on textfield is still 20
Since the quantity field is populated from the remote ajax data,
I think you can only use the
onPagingevent to save the changes at server side first before the page changes.Probably using the
saveRowmethod offered.