<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>http://stackoverflow.com/q/16369684/315935</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.5/css/ui.jqgrid.css" />
<style type="text/css">
html, body { font-size: 75%; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.5/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript">
$.jgrid.no_legacy_api = true;
$.jgrid.useJSON = true;
</script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.4.5/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript">
$(function () {
"use strict";
var mydata = [
{id:"1", idcustomers: "x", firstname: "y", lastname: "z"},
{id:"44", idcustomers: "x", firstname: "y", lastname: "z"},
{id:"22", idcustomers: "x", firstname: "y", lastname: "z"},
{id:"33", idcustomers: "x", firstname: "y", lastname: "z"},
{id:"4", idcustomers: "x", firstname: "y", lastname: "z"},
{id:"3", idcustomers: "x", firstname: "y", lastname: "z"},
{id:"2", idcustomers: "x", firstname: "y", lastname: "z"}
];
$("#list").jqGrid({
datatype: "local",
data: mydata,
height: "auto",
colNames:['idcustomers','firstname', 'lastname','address1','address2','city','state','zip','phone','email','cell'],
colModel :[
{name:'idcustomers', index:'idcustomers', width:55},
{name:'firstname', index:'firstname', width:90, editable: true},
{name:'lastname', index:'lastname', width:90, editable: true},
{name:'address1', index:'address1', width:90, editable: true},
{name:'address2', index:'address2', width:90, editable: true},
{name:'city', index:'city', width:90, editable: true},
{name:'state', index:'state', width:90, editable: true},
{name:'zip', index:'zip', width:90, editable: true},
{name:'phone', index:'phone', width:90, editable: true},
{name:'email', index:'email', width:90, editable: true},
{name:'cell', index:'cell', width:90, editable: true}
],
pager: '#pager',
rowNum:10,
height:120,
multiselect :true,
rowList:[10,20,30],
sortname: 'idcustomers',
sortorder: 'asc',
viewrecords: true,
loadComplete: function () {
$("#cb_" + this.id).click();
},
gridview: true,
caption: 'Customers',
cellEdit: true,
cellsubmit: 'clientArray',
afterSaveCell: function(rowid,name,val,iRow,iCol) {
alert("alert1!");
},
afterEditCell: function (id,name,val,iRow,iCol){
e = jQuery.Event("keydown");
e.keyCode = $.ui.keyCode.ENTER;
edit = $(".edit-cell > *");
edit.blur(function() {
edit.trigger(e);
});
}
});
$("p").click(function(){
saveEdits();
var Ids = jQuery("#list").jqGrid('getGridParam','selarrrow');
for(var i=0;i<Ids.length; i++) {
var selecteddatais = $("#list").jqGrid('getRowData',Ids[i]);
alert(selecteddatais.lastname);
}
alert("The paragraph was clicked.");
var Ids = jQuery("#list").jqGrid('getGridParam','selarrrow');
for(var i=0;i<Ids.length; i++) {
var selecteddatais = $("#list").jqGrid('getRowData',Ids[i]);
}
});
function saveEdits() {
var $input = $("#list").find(".edit-cell input");
if ($input.length == 1) {
var e = $.Event("keydown");
e.which = 13;
e.keyCode = 13;
$input.trigger(e);
}
}
});
</script>
</head>
<body>
<table id="list"><tr><td></td></tr></table>
<div id="pager"></div>
<p>Click on this paragraph.</p>
</body>
</html>