pmgr/views/elements/customers.ctp

<?php /* -*- mode:PHP -*- */

if (!isset($caption))
  $caption = '<H2>'.$this->pageTitle.'</H2>';

if (!isset($limit))
  $limit = 20;

if (!isset($limitOptions))
  $limitOptions = array(10, 20, 50, 200);

if (!isset($height))
  $height = 'auto';

// Do some prework to bring in the appropriate libraries
$imgpath = '/pmgr/site/css/jqGrid/basic/images';
$html->css('jqGrid/basic/grid', null, null, false);
$html->css('jqGrid/jqModal', null, null, false);
$javascript->link('jqGrid/jquery.jqGrid.js', false);
$javascript->link('jqGrid/js/jqModal', false);
$javascript->link('jqGrid/js/jqDnR', false);

// Define the table columns
$cols = array();
$cols['ID']          = array('index' => 'Customer.id',                'width' => '30',  'align' => 'center');
if (isset($customers[0]['ContactsCustomer']))
  $cols['Relationship']  = array('index' => 'ContactsCustomer.type',  'width' => '75', 'align' => 'left');
$cols['Name']        = array('index' => 'Customer.name',              'width' => '150', 'align' => 'left');
$cols['Last Name']   = array('index' => 'PrimaryContact.last_name',   'width' => '100', 'align' => 'left');
$cols['First Name']  = array('index' => 'PrimaryContact.first_name',  'width' => '100', 'align' => 'left');
$cols['Leases']      = array('index' => 'lease_count',                'width' => '60',  'align' => 'center');
$cols['Comment']     = array('index' => 'Customer.comment',           'width' => '300', 'align' => 'left');

// Some of the columns should not be sortable
foreach (array_intersect_key($cols, array('Comment'=>1)) AS $k => $v)
  $cols[$k]['sortable'] = false;

// Some of the columns should be searchable
foreach (array_intersect_key($cols, array('Last Name'=>1, 'First Name'=>1)) AS $k => $v)
  $cols[$k]['search'] = true;

// Create the javascript code for jqGrid to create each table column
$colModels = array();
foreach ($cols AS $col) {
  $col['name'] = $col['index'];
  $colModels[] =
    '{ ' . implode(", ",
		   array_map(create_function
			     ('$k, $v',
			      'return "$k:".($v===false?"false":($v===true?"true":"\'$v\'"));'),
			     array_keys($col),
			     array_values($col))) .
    '}';
}

// Save just the column indices (fields)
$colFields= array_map(create_function('$col', 'return $col["index"];'), $cols);

// Define the URL to fetch data from.
// To prevent having to keep the controller and the view
// in sync on which fields need to be queried by the
// controller in order to be accessible to the view,
// we'll just pass the desired fields to the controller
// as part of the data fetch.

$url = $html->url(array('controller' => 'customers',
			'action'     => 'jqGridData',
			'debug'      => 0,
			));

// OK, now that everything is in place, get out of PHP mode,
// and add the javascript code (along with a touch of HTML)
// to kick this thing off.
?>

<script type="text/javascript"><!--

jQuery(document).ready(function(){ 
  jQuery("#customer-list").jqGrid({
    url: '<?php echo $url; ?>',
    datatype: 'xml',
    mtype: 'GET',
    postData: { action: '<?php echo $action; ?>',
   	        fields: '<?php echo serialize($colFields); ?>' },
    colNames: [ '<?php echo implode("', '", array_keys($cols)); ?>' ],
    colModel: [ <?php echo "\n   " . implode(",\n   ", $colModels); ?> ],
    pager: jQuery('#customer-pager'),
    height: '<?php echo $height; ?>',
    rowNum: <?php echo $limit; ?>,
    rowList: [<?php echo implode(",",$limitOptions); ?>],
    sortname: 'Customer.id',
    sortorder: "ASC",
    viewrecords: true,
    imgpath: '<?php echo $imgpath; ?>',
    caption: <?php echo $caption ? "'$caption'" : "null"; ?>,
    toolbar : [true,"bottom"], 
  }); 

  jQuery("#t_customer-list").height(25).hide()
    .filterGrid("#customer-list", {
      gridModel:true,
	  gridToolbar:true,
	  autosearch:true,
	  });

  jQuery("#customer-list").navGrid('#customer-pager',
				   { view:false,  
				     edit:false,
				       add:false,
				       del:false,
				       search:false,
				       refresh:false})
    .navButtonAdd("#customer-pager",{
      caption:"Search",
	  title:"Toggle Search",
	  buttonimg:'<?php echo $imgpath; ?>' + '/find.gif',
	  onClickButton:function(){
	  if(jQuery("#t_customer-list").css("display")=="none") {
	    jQuery("#t_customer-list").css("display","");
	  } else {
	    jQuery("#t_customer-list").css("display","none");
	  }
	}
      });

});

--></script>

<table id="customer-list" class="scroll"></table> 
<div id="customer-pager" class="scroll" style="text-align:center;"></div> 

<div>Search By:<BR>
<input type="checkbox" id="autosearch" onclick="enableAutosubmit(this.checked)">Enable Autosearch<BR>
Last Name<BR>
<input type="text" id="filt_last_name" onkeydown="doSearch(arguments[0]||event)" />
<button onclick="gridReload()" id="submitButton" style="margin-left:30px;">Search</button> 
</div>

<script type="text/javascript"><!--

var timeoutHnd;
var flAuto = false;
function enableAutosubmit(state) {
   flAuto = state;
   jQuery("#submitButton").attr("disabled",state); 
} 

function doSearch(ev){
  if(!flAuto)
    return;

  if(timeoutHnd)
    clearTimeout(timeoutHnd);

  timeoutHnd = setTimeout(gridReload,500);
}

function gridReload() {
  var str = jQuery("#filt_last_name").val();
  jQuery("#customer-list").setGridParam( {
       url: '<?php echo $url; ?>' + '?filt=1' +
	'&filtField=PrimaryContact.last_name' +
	'&filtString=' + str,
       page:1
	}).trigger("reloadGrid");
}

--></script>