Я установил демо на этой странице: http://permanaj.net/jqgrid/index.html
код:
<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:
{
"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
]
}
]
}
Например, я изменяю количество Order Qty на 20 для всех элементов, когда я нажимаю Next один раз, а затем нажимаю Back один раз, число в текстовом поле сбрасывается на 0, а не на 20
Как добиться того, чтобы при смене страницы число в текстовом поле оставалось 20