Friday, August 20, 2010

JQGrid 3.8 Beta Newbie Installation Guide

I really needed the grouping ability of jqGrid 3.8 beta up and running on my laptop so that I could start working on a project. So I had some time this week to figure out how to get the jqGrid 3.8 beta installed.

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>

1 comment:

  1. i agree fatcow rocks
    webhostingmasters.com

    ReplyDelete