Working examples of jqGrid, with explanations, can be found here.

Discussion

Osseni Rouse, 2011/01/25 15:46

I'm fairly new to jqGrid. I have creating a few pages using jqGrid and the user's love the look and feel. I've read about the new changes in jqGrid 3.8.2 and would love to use some of them but I'm not exactly sure how to incorporate them. Will the documentation be updated soon with examples?

guibirong, 2012/05/24 04:12

Has filterGrid been removed from jqGrid? I have the latest, v. 4.3.2, and filterGrid is nowhere to be seen, with or without the “Custom” module. Thanks -guibirong.

Haranath N, 2012/07/25 11:35

Hi,

Iam fairly new to the usage of the jqGrid. Iam developing an aplication using Java + Struts1.2 = MySQl database frame work. in the example give it is illustrated with the PHP + Mysql. Could some one help me any documantation available plz

Dawan Hopson, 2012/09/20 18:23, 2012/09/20 18:24

Hi,

Is there a way to set the column property for one cell in the column? I've tried to used 'setCell' but it doesn't give me what i'm looking for. When I use setColProp the change applies to all the row cells in the column. I need to change the formatter attached.

Thanks in advance!

Linh La, 2012/09/28 16:37

Hi, i need help with editing my fields in the select box. Every time, i edit, it returns to the first value in the array. How do i retrieve the last selected value.

<?php $this→headScript()→appendFile($this→baseUrl('/js/jquery.js')); $this→headScript()→appendFile($this→baseUrl('/js/jquery.validate.js')); $this→headScript()→appendFile($this→baseUrl('/antcal/js/servostatus.js')); ?> <div id=“main”> <div align=“right”> <p style=“margin: 10pt 30px 0pt 0pt; padding: 2pt; float: right;”> <a href=”<?php echo $this→baseUrl();?>”><img src=”<?php echo $this→baseUrl();?>/images/16×16/gif/17.gif” width=“22” height=“22” title=“Home Page” alt=“Home Page” /></a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <a href='<?php echo $this→baseUrl();?>/login/index/logout'>Logout</a>&nbsp;<span style=“color: #99CC99;”>&#8226;</span> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </p> </div> &nbsp;&nbsp; <div class=“tabs”><br/> <ul id=“tabs”> <li id=“tab1”><a href=”<?php echo $this→baseUrl()?>/antcal”>Activities From 7-Day Schedule</a></li> <li id=“tab2”><a href=”<?php echo $this→baseUrl()?>/antcal/servostatus”>Status</a></li> <li id=“tab3”><a href=”<?php echo $this→baseUrl()?>/antcal/servoreport”>Report</a></li> <!–<li id=“tab4”><a href=”<?php echo $this→baseUrl()?>/antcal/index/plot”>Z-Correction Plot</a></li>–> </ul> <div id=“tab-2”> <p> <table> <tr> <td><font style=“color:#00BFFF”>COMPLETE</font></td><td bgcolor=”#0B6121”>&nbsp;&nbsp;</td><td>&nbsp;</td> <td><font style=“color:#00BFFF”>Partial Complete (data @ JPL)</font></td><td bgcolor=”#01DF3A”>&nbsp;&nbsp;</td><td>&nbsp;</td> <td><font style=“color:#00BFFF”>In Process-at OE (Data @ OE:incomplete data set)</font></td><td bgcolor=”#FFFF00”>&nbsp;&nbsp;</td><td>&nbsp;</td> <td><font style=“color:#00BFFF”>In Process-at Site (Data @ Site:collecting data)</font></td><td bgcolor=”#F88017”>&nbsp;&nbsp;</td><td>&nbsp;</td> <td><font style=“color:#00BFFF”>No Data</font></td><td bgcolor=”#FF0000”>&nbsp;&nbsp;</td><td>&nbsp;</td> <td><font style=“color:#00BFFF”>Scheduled</font></td><td bgcolor=”#00FFFF”> &nbsp;&nbsp;</td><td>&nbsp;</td> <td><font style=“color:#00BFFF”>Sched in progress</font></td> <td style=“background-color:#FFFFFF; border: solid 1px #000”>&nbsp;&nbsp;</td> <td>&nbsp;</td> </tr> </table> <table id=“jqServoStatus” class=“scroll”></table> <div id=“jqServoStatusPager”></div> </p> </div> </div> </div> <script type=“text/javascript”> jQuery(document).ready(function () { var lastSel = 0; Set up the jquery grid

jQuery("#jqServoStatus").jqGrid( {		
	url: base_url + "servostatus/displaystatus",
	datatype: 'json',
	mtype: 'POST',
	colNames:[/*'Actions',*/ 'ID','DSS','Data Time Frame','Overall Status','Status_Date',
			  'Position Loop Status','Rate Loop Status','System ID Status','Comments'],   	
	colModel:[//{name:'act',index:'act', width:75,sortable:false},
			  //editrules:{edithidden:true, required:true}, 
			  {name:'ServoStatusID',index:'ServoStatusID',width:50,sortable:true, align:'center'},		
			  {name:'DSS',index:'DSS',width:30,sortable:true,align:'center'
				,editable:true/*,editrules:{edithidden:true,required:true}*/,edittype:'select'
				,editoptions:{
					value:"14:14;15:15;24:24;25:25;26:26;27:27;34:34;43:43;45:45;54:54;55:55;63:63;65:65"}},
			  {name:'Data_Time_Frame',index:'Data_Time_Frame',width:150,sortable:true,align:'center'
			    ,editable:true,edittype:'select'
				,editoptions:{
					value:"Early 2012:Early 2012;Late 2012:Late 2012"}},		
			  {name:'Overall_Status',index:'Overall_Status',width:120, sortable:true, align:'center', 
				editable:true, edittype:"select",editoptions:{
					value:"COMPLETE:COMPLETE;Partial Complete:Partial Complete;In Process-at OE:In Process-at OE;In Process-at Site:In Process-at Site;No Data:No Data;Scheduled:Scheduled;Sched in progress:Sched in progress;Not Applicable:Not Applicable"}},
			  {name:'Status_Date',index:'Status_Date',width:100,sortable:true,align:'center',editable:true,editoptions: {dataInit: function(elem) {$(elem).datepicker({dateFormat:'yy-mm-dd'})}}},								
			  {name:'Position_Loop_Status',index:'Position_Loop_Status',width:150,sortable:true,align:'center',
				editable:true, edittype:'select',editoptions:{
					value:"COMPLETE:COMPLETE;Partial Complete:Partial Complete;In Process-at OE:In Process-at OE;In Process-at Site:In Process-at Site;No Data:No Data;Scheduled:Scheduled;Sched in progress:Sched in progress;Not Applicable:Not Applicable"}},
			  {name:'Rate_Loop_Status',index:'Rate_Loop_Status',width:130,sortable:true,align:'center',
				editable:true, edittype:'select',editoptions:{
					value:"COMPLETE:COMPLETE;Partial Complete:Partial Complete;In Process-at OE:In Process-at OE;In Process-at Site:In Process-at Site;No Data:No Data;Scheduled:Scheduled;Sched in progress:Sched in progress;Not Applicable:Not Applicable"}},				 
			  {name:'System_ID_Status',index:'System_ID_Status',width:130,sortable:true,align:'center', 
				editable:true, edittype:'select',editoptions:{
					value:"COMPLETE:COMPLETE;Partial Complete:Partial Complete;In Process-at OE:In Process-at OE;In Process-at Site:In Process-at Site;No Data:No Data;Scheduled:Scheduled;Sched in progress:Sched in progress;Not Applicable:Not Applicable"}},
			  {name:'Comments',index:'Comments',width:400,sortable:true,align:'center',editable:true}						
	],										
	// pager, defines that we want to use a pager bar to navigate through the records. This must be a 
	// valid html element; in our example we gave the div the id of pager, but any name is acceptable. 
	// Note that the Navigation layer (the pager div) can be positioned anywhere you want, determined 
	// by your html; in our example we specified that the pager will appear after the Body layer.
	// pager of the grid
	pager: '#jqServoStatusPager',
	
	// rowNum, Sets how many records we want to view in the grid. This parameter is passed to the url 
	// for use by the server routine retrieving the data
	// Number of rows per page
	rowNum:20,
	
	// rowList, an array to construct a select box element in the pager in which we can change the number 
	// of the visible rows. When changed during the execution, this parameter replaces the rowNum parameter 
	// that is passed to the url
	rowList:[20,40,60,80],

	// sortname, sets the initial sorting column. Can be a name or number. This parameter is added to the 
	// url for use by the server routine
	// Initial sorting column
	sortname: 'ServoStatusID',
		
	// Specifying either 'asc' or 'desc' for this property will set the initial sort order. (Default : asc)
	// Initial sorting direction
	sortorder: "asc",
	
	altRows: true,	
	ignoreCase: true,			
	
	// viewrecords, Defines whether we want to display the number of total records from the query in the 
	// pager bar
	// Enable to display total records count
	viewrecords: true,
	
	gridview: true,
	
	shrinkToFit :false,
	
	// The width of the grid in px 
	width: 1200,
		
	// The height of the grid in px			
	// height: 300,
	height: 'auto',
	rownumbers: true,
	rownumWidth: 40,
	/*
	onSelectRow: function (id) 
	{
		if (id && id !== lastSel)
		{
			jQuery('#jqServoStatus').restoreRow(lastSel);	// restore last grid row
			jQuery('#jqServoStatus').editRow(id,true);		// show form elements for the row selected to enable updates
			lastSel = id;												// save current row ID so that when focus is gone it can be restored
		} 		
	},
	*/
	//editurl: base_url + "index/update",
	
	//emptyrecords: 'No records to display...',
	
	// imgpath, the path to the images needed for the grid.  The path should not end with '/'
	// imgpath: 'themes/basic/images',
	
	// Sets the caption for the grid. If this parameter is not set the Caption layer will be not visible
	//caption: '<font size="3" face="verdana">Servo Status</font><br/><font color=green><u>E</u></font>dit; <font color=green><u>S</u></font>ave; <font color=green><u>C</u></font>ancel editing</font>'
	caption:  'Servo Status'	
});

//The function navGrid has the parameter for searching before the parameter for viewing
jQuery("#jqServoStatus").jqGrid('navGrid','#jqServoStatusPager', 
	{	
	<?			
		if($this->accessFlag) {
	?>	
			edit:true,edittext:"Edit",								
			add:true,addtext:"Add",
			del:true,deltext:"Delete",								
	<?
		}
		else {
	?>		
			edit:false,		
			add:false,	
			del:false,								
	<?
		}
	?>
		search:true,searchtext:"Find", 
		view:true,viewtext:'View' },					
	
	{url:base_url + "servostatus/updatestatus",closeAfterEdit:true,
		beforeShowForm:function(formid) { 
			$("#tr_ServoStatusID", formid).hide(); 
			//Function below is commented out due to error "too many recursions..."
			//$("#Measurement_Date").datepicker(); 
		}			
	}, 		// edit options	
	/*
	{url:base_url + "servostatus/updatestatus",closeAfterAdd:true,
		beforeShowForm:function(formid) { 
			$("#tr_ServoStatusID", formid).hide(); 
			//Function below is commented out due to error "too many recursions..."
			//$("#Measurement_Date").datepicker(); 
		}
	}, 	// add options
	{url:base_url + "servostatus/updatestatus",closeAfterDelete:true,
		beforeShowForm:function(formid) { 
			$("#tr_ServoStatusID", formid).hide(); 
			// get the value of the type
		}		
	},		// del options												
	*/
	// search options
	{multipleSearch:true,multipleGroup:true,showQuery:true,overlay:false,closeOnEscape:true},									
	{caption:"View Status",title:"View Details Selected Row",width:400,jqModal:false,closeOnEscape:true} 		// view options
	//{closeOnEscape:true} 		// view options :: allow the view dialog to be closed when user press ESC key
);
	
/*
// For more than one grouping
jQuery("#chngroup").change(function() {
	var vl = $(this).val();
	if(vl) {
		if(vl == "clear") {
			jQuery("#jqServoStatus").jqGrid('groupingRemove',true);
		} else {
			jQuery("#jqServoStatus").jqGrid('groupingGroupBy',vl);
		}
	}
});	
*/

// add custom button to export the data to excel
jQuery("#jqServoStatus").jqGrid('navButtonAdd','#jqServoStatusPager',{
caption:"Export", 
onClickButton : function () { 
   exportExcel();
}
});
	
function exportExcel(){			
	html="\n";  // end of line at the end
	var form = "<form name='statusexportform' action='servostatus/exportstatusdata' method='post'>";
	form = form + "<input type='hidden' name='statusBuffer' value='"+html+"'>";
	form = form + "</form><script>document.statusexportform.submit();</sc"+"ript>";
	OpenWindow=window.open('', '');
	OpenWindow.document.write(form);
	OpenWindow.document.close();
}
						

}); jQuery to return and display Servo Status (Second Tab) </script>

David, 2012/10/23 13:20
  1. Ordered List Item

ñl *


You could leave a comment if you were logged in.