Grid Panel in Jquery

Implementing the Grid Panel with JSON ordered data  with Load once technique done  here with the JQuery jgrid plugin. We can see here dynamically fetching the data on the selected keywords and update the grid with the new list of records.

This post sending keywords is done in the last post, You can refer  the last post to get details on the keywords,

The demo on the Jgrid is available from below link as,

                         http://trirand.com/jqgrid/jqgrid.html

Including the CSS & JS:

<link rel=”stylesheet” type=”text/css” media=”screen” title=”basic” href=”js/themes/basic/grid.css” />
<link rel=”alternate stylesheet” type=”text/css” href=”js/themes/coffee/grid.css” title=”coffee” media=”screen” />

 <script type=”text/javascript” src=”js/jquery-1.3.2.js”></script>
  <script type=”text/javascript” src=”js/jquery.jqGrid.js”></script>

Layout:

<table id=”list3″ class=”scroll” cellpadding=”0″ cellspacing=”0″></table>
<div id=”pager3″ class=”scroll” style=”text-align:center;”></div>

Jquery part:

$(document).ready(function() {

var gridimgpath = ‘js/themes/basic/images’;

   jgrid=jQuery(“#list3”).jqGrid({
  
url:’server.php?q=2&note=’+document.getElementById(‘CityAjax’).value,
   datatype: “json”,
   colNames:[‘Inv No’,’Date’, ‘Client’, ‘Amount’,’Tax’,’Total’,’Notes’],
   colModel:[
      {name:’idd’,index:’idd’, width:60, sorttype:”int”},
      {name:’invdate’,index:’invdate’, width:90, sorttype:”date”},
      {name:’name’,index:’name’, width:100},
      {name:’amount’,index:’amount’, width:80, align:”right”,sorttype:”float”}, {name:’tax’,index:’tax’, width:80, align:”right”,sorttype:”float”},
      {name:’total’,index:’total’, width:80,align:”right”,sorttype:”float”}, {name:’note’,index:’note’, width:150, sortable:false}
     ],
   rowNum:20,
   rowList:[10,20,30],
   imgpath: gridimgpath,
   pager: jQuery(‘#pager3’),
   sortname: ‘idd’,
   viewrecords: true,
   sortorder: “desc”,
   loadonce: true,
   caption: “Load Once”
   });

});

On Updating the Record grid List  by the  typeing the keyword in the input box  done by calling the bleow to update the grid,

var gridimgpath = ‘js/themes/basic/images’;

   jQuery.ajax({
  
url:’server.php?note=’+document.getElementById(‘CityAjax’).value,  
   datatype: “json”,
   complete: function (jsondata,stat){  
     //alert(jsondata.responseText);
     if(stat==”success”){
      var thegrid = jQuery(“#list3”)[0];
      thegrid.addJSONData(eval(“(“+jsondata.responseText+”)”));
     }
      else{
      //alert(“no”);
                    }
               } // end complete
   });   
}

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: