I had a lot of difficulty, as explained in my previous post, with rolling out jqGrid 3.8 beta do to newbieness and lack of knowledge. In my last post I reverted to using jqGrid 3.7.2, since the documentation and demos were more complete, and I was able to get that version working.
This week, I went back to jqGrid 3.8 beta to try to figure out what I did wrong. It was much easier to figure out now that I have a little bit of understanding.
To install 3.8:
1. I downloaded and extracted the jqGrid Demo and Source files.
2. I then created folder in my apache htdocs directory called 38beta. Inside this folder I copied over the js and themes directory from the extracted Demo and Source files.
3. I modified my test.htm file for the jqGrid 3.8 format and I used the same database and php files from my previous post. (I know that database is the dumbest thing in the world I could have used grouping on, since everything is unique, but I just wanted to get it working.)
I am going to post my test.htm code below. Remember that you have to view the file from a localhost url as in http://localhost/38beta/test.htm. This will have form edit, delete, add, and search working along with grouping. You also need the three PHP files from my previous post.
<!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>Ticket List</title>
<link rel="stylesheet" type="text/css" media="screen" href="themes/redmond/jquery-ui-1.8.2.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="themes/ui.jqgrid.css" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.js" type="text/javascript"></script>
</head>
<body>
<table id ="list"></table>
<div id = "pager"></div>
</body>
</html>
<script type = "text/javascript">
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
url:'server.php',
datatype: "json",
mtype: 'GET',
colNames:['Inv ID','Inv Date','Client ID','Amount','Tax','Total', 'Note'],
colModel:[
{name:'invid', index:'invid', width:55, align:'center',
searchoptions:{sopt:['eq','ne','lt','le','gt','ge','bw','ew','cn','nc']},
editable:false},
{name:'invdate', index:'invdate', width: 90, align:'center',
searchoptions:{sopt:['eq','ne','lt','le','gt','ge','bw','ew','cn','nc']},
editable:true},
{name:'client_id', index:'client_id', width: 90, align:'center',
searchoptions:{sopt:['eq','ne','lt','le','gt','ge','bw','ew','cn','nc']},
editable:true},
{name:'amount', index:'amount', width:80, align:'center',
searchoptions:{sopt:['eq','ne','lt','le','gt','ge','bw','ew','cn','nc']},
editable:true},
{name:'tax', index:'tax', width:80, align:'center',
searchoptions:{sopt:['eq','ne','lt','le','gt','ge','bw','ew','cn','nc']},
editable:true},
{name:'total', index:'total', width:80, align:'center',
searchoptions:{sopt:['eq','ne','lt','le','gt','ge','bw','ew','cn','nc']},
editable:true},
{name:'note', index:'note', width:150, align:'left',
searchoptions:{sopt:['eq','ne','lt','le','gt','ge','bw','ew','cn','nc']},
editable:true},
],
rowNum: 10,
rowList:[10,20,30],
autowidth: true,
height: "100%",
pager: '#pager',
sortname: 'client_id',
viewrecords: true,
sortorder: "asc",
caption:"My first grid",
grouping: true,
groupingView : {
groupField : ['client_id']
},
editurl:"edit.php"
});
jQuery("#list").jqGrid('navGrid','#pager',{edit:true,add:true,del:true});
});
</script>
i agree fatcow rocks
ReplyDeletewebhostingmasters.com