I'm trying to get a basic datagrid for simple tabular input. The server will send the column information and render the corresponding table for the user to input records into and they post it back to the server.
I'm trying to get jqGrid to just save the data as ArrayData and not use a database so I've done the following code to test it out:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My First Grid</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/custom-theme/jquery-ui-1.7.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<style>
html, body {
margin: 0;
padding: 0;
font-size: 75%;
}
</style>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
datatype: "local",
colNames:['Inv No','Date', 'Amount','Tax','Total','Notes'],
colModel :[
{name:'invid', index:'invid', width:55, editable:true,editoptions:{size:10}},
{name:'invdate', index:'invdate', width:90, editable:true},
{name:'amount', index:'amount', width:80, align:'right', editable:true},
{name:'tax', index:'tax', width:80, align:'right', editable:true},
{name:'total', index:'total', width:80, align:'right', editable:true},
{name:'note', index:'note', width:150, sortable:false, editable:true}
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'invid',
sortorder: 'desc',
viewrecords: true,
caption: 'My first grid',
}).navGrid('#pager', {add:true, del:true});
myfirstrow = {
invid:"1",
invdate:"2007-10-01",
note:"note",
amount:"200.00",
tax:"10.00",
total:"210.00"}
jQuery("#list").addRowData("1", myfirstrow);
});
</script>
</head>
<body>
<table id="list"></table>
<div id="pager"></div>
</body>
</html>
After clicking add row and filling in the form, selecting submit pops up with a "No URI set message", does anyone know how I can get round this so I can just input table data on the client side and then just send all the data at once back to the server?
Thanks