jqgrid inline edit

a basic jqgrid with inline editing capability. Click on each cell to edit it.

by abubelinha

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.14/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://trirand.com/blog/jqgrid/themes/ui.jqgrid.css">
<script src="http://trirand.com/blog/jqgrid/js/i18n/grid.locale-en.js"></script>
<script src="http://trirand.com/blog/jqgrid/js/jquery.jqGrid.min.js"></script>
<table id="grid"></table>
<div id="pager"></div>

JavaScript

var mydata = [{
    name: "Toronto",
    country: "Canada",
    continent: "North America"
}, {
    name: "New York City",
    country: "USA",
    continent: "North America"
}, {
    name: "Silicon Valley",
    country: "USA",
    continent: "North America"
}, {
    name: "Paris",
    country: "France",
    continent: "Europe"
}]

$("#grid").jqGrid({
    data: mydata,
    datatype: "local",
    colNames: ["Name", "Country", "Continent"],
    colModel: [{
        name: 'name',
        index: 'name',
        editable: true,
    }, {
        name: 'country',
        index: 'country',
        editable: true,
    }, {
        name: 'continent',
        index: 'continent',
        editable: true,
    }],
    pager: '#pager',
    'cellEdit': true,
    'cellsubmit' : 'clientArray',
    editurl: 'clientArray'
});