Moved all the jqGrid logic into a separate element, in anticipation of moving all lists to jqGrid
git-svn-id: file:///svn-source/pmgr/branches/ledger_transactions_20090605/site@115 97e9348a-65ac-dc4b-aefc-98561f571b83
This commit is contained in:
abijah
@@ -1,25 +1,5 @@
|
|||||||
<?php /* -*- mode:PHP -*- */
|
<?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
|
// Define the table columns
|
||||||
$cols = array();
|
$cols = array();
|
||||||
$cols['ID'] = array('index' => 'Customer.id', 'width' => '30', 'align' => 'center');
|
$cols['ID'] = array('index' => 'Customer.id', 'width' => '30', 'align' => 'center');
|
||||||
@@ -39,99 +19,13 @@ foreach (array_intersect_key($cols, array('Comment'=>1)) AS $k => $v)
|
|||||||
foreach (array_intersect_key($cols, array('Last Name'=>1, 'First Name'=>1)) AS $k => $v)
|
foreach (array_intersect_key($cols, array('Last Name'=>1, 'First Name'=>1)) AS $k => $v)
|
||||||
$cols[$k]['search'] = true;
|
$cols[$k]['search'] = true;
|
||||||
|
|
||||||
// Create the javascript code for jqGrid to create each table column
|
echo $this->element('jqGrid',
|
||||||
$colModels = array();
|
array('jqGridColumns' => $cols));
|
||||||
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>
|
<div>Search By:<BR>
|
||||||
<input type="checkbox" id="autosearch" onclick="enableAutosubmit(this.checked)">Enable Autosearch<BR>
|
<input type="checkbox" id="autosearch" onclick="enableAutosubmit(this.checked)" CHECKED>Enable Autosearch<BR>
|
||||||
|
|
||||||
Last Name<BR>
|
Last Name<BR>
|
||||||
<input type="text" CLASS="filt-text" id="filt_last_name" name="PrimaryContact.last_name" />
|
<input type="text" CLASS="filt-text" id="filt_last_name" name="PrimaryContact.last_name" />
|
||||||
@@ -147,73 +41,3 @@ First Name<BR>
|
|||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div ID="debug"></div>
|
|
||||||
|
|
||||||
<script type="text/javascript"><!--
|
|
||||||
|
|
||||||
var timeoutHnd;
|
|
||||||
function handleFiltKeydown(e){
|
|
||||||
/* $('#debug').append("KEYDOWN: id:"+id+"<BR>"); */
|
|
||||||
|
|
||||||
if (e.which == 8 || e.which == 46 || /* Backspace / Delete */
|
|
||||||
e.which == 32 || /* Space */
|
|
||||||
(65 <= e.which && e.which < 65 + 26) || /* Upper Case */
|
|
||||||
(97 <= e.which && e.which < 97 + 26)) /* Lower Case */
|
|
||||||
{
|
|
||||||
var id = $(this).attr('id');
|
|
||||||
if(timeoutHnd)
|
|
||||||
clearTimeout(timeoutHnd);
|
|
||||||
timeoutHnd = setTimeout(function()
|
|
||||||
{gridFilter(id)},
|
|
||||||
500);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function enableAutosubmit(state) {
|
|
||||||
jQuery(".filt-submit").attr("disabled",state);
|
|
||||||
if (state) {
|
|
||||||
$(".filt-text").keydown(handleFiltKeydown);
|
|
||||||
/* $('#debug').append("BIND: id:"+id+"<BR>"); */
|
|
||||||
}
|
|
||||||
else {
|
|
||||||
$(".filt-text").unbind('keydown', handleFiltKeydown);
|
|
||||||
/* $('#debug').append("UNBIND: id:"+id+"<BR>"); */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function gridRestore() {
|
|
||||||
/* $('#debug').append("RESTORE<BR>"); */
|
|
||||||
$('.filt-text').val('');
|
|
||||||
jQuery("#customer-list").removePostDataItem('filt');
|
|
||||||
jQuery("#customer-list").removePostDataItem('filtField');
|
|
||||||
jQuery("#customer-list").removePostDataItem('filtValue');
|
|
||||||
jQuery("#customer-list")
|
|
||||||
.setGridParam({ page: 1 })
|
|
||||||
.trigger("reloadGrid");
|
|
||||||
}
|
|
||||||
|
|
||||||
function gridFilter(id) {
|
|
||||||
var field = jQuery("#"+id).attr('name');
|
|
||||||
var value = jQuery("#"+id).val();
|
|
||||||
/* $('#debug').append("RELOAD: field:"+field+"; value:"+value+"<BR>"); */
|
|
||||||
jQuery("#customer-list").setPostDataItem('filt', true);
|
|
||||||
jQuery("#customer-list").setPostDataItem('filtField', field);
|
|
||||||
jQuery("#customer-list").setPostDataItem('filtValue', value);
|
|
||||||
|
|
||||||
$('.filt-text').each(function(){
|
|
||||||
if ($(this).attr('id') != id)
|
|
||||||
$(this).val('');
|
|
||||||
});
|
|
||||||
|
|
||||||
jQuery("#customer-list")
|
|
||||||
.setGridParam({ page: 1 })
|
|
||||||
.trigger("reloadGrid");
|
|
||||||
}
|
|
||||||
|
|
||||||
$('.filt-submit').click(function(){
|
|
||||||
gridFilter($(this).attr('id').replace(/^submit_/, ''));
|
|
||||||
});
|
|
||||||
|
|
||||||
|
|
||||||
--></script>
|
|
||||||
|
|
||||||
|
|||||||
210
views/elements/jqGrid.ctp
Normal file
210
views/elements/jqGrid.ctp
Normal file
@@ -0,0 +1,210 @@
|
|||||||
|
<?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';
|
||||||
|
|
||||||
|
if (!isset($gridId))
|
||||||
|
$gridId = $this->params['controller'] . '-jqGrid';
|
||||||
|
|
||||||
|
// 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);
|
||||||
|
|
||||||
|
// Create the javascript code for jqGrid to create each table column
|
||||||
|
$colModels = array();
|
||||||
|
foreach ($jqGridColumns 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"];'), $jqGridColumns);
|
||||||
|
|
||||||
|
// 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('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('#<?php echo $gridId; ?>').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($jqGridColumns)); ?>' ],
|
||||||
|
colModel: [ <?php echo "\n " . implode(",\n ", $colModels); ?> ],
|
||||||
|
pager: jQuery('#<?php echo $gridId; ?>-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_<?php echo $gridId; ?>').height(25).hide() */
|
||||||
|
/* .filterGrid('#<?php echo $gridId; ?>', { */
|
||||||
|
/* gridModel:true, */
|
||||||
|
/* gridToolbar:true, */
|
||||||
|
/* autosearch:true, */
|
||||||
|
/* }); */
|
||||||
|
|
||||||
|
/* jQuery('#<?php echo $gridId; ?>').navGrid('#<?php echo $gridId; ?>-pager', */
|
||||||
|
/* { view:false, */
|
||||||
|
/* edit:false, */
|
||||||
|
/* add:false, */
|
||||||
|
/* del:false, */
|
||||||
|
/* search:false, */
|
||||||
|
/* refresh:false}) */
|
||||||
|
/* .navButtonAdd('#<?php echo $gridId; ?>-pager',{ */
|
||||||
|
/* caption:"Search", */
|
||||||
|
/* title:"Toggle Search", */
|
||||||
|
/* buttonimg:'<?php echo $imgpath; ?>' + '/find.gif', */
|
||||||
|
/* onClickButton:function(){ */
|
||||||
|
/* if(jQuery('#t_<?php echo $gridId; ?>').css("display")=="none") { */
|
||||||
|
/* jQuery('#t_<?php echo $gridId; ?>').css("display",""); */
|
||||||
|
/* } else { */
|
||||||
|
/* jQuery('#t_<?php echo $gridId; ?>').css("display","none"); */
|
||||||
|
/* } */
|
||||||
|
/* } */
|
||||||
|
/* }); */
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
--></script>
|
||||||
|
|
||||||
|
<table id="<?php echo $gridId; ?>" class="scroll"></table>
|
||||||
|
<div id="<?php echo $gridId; ?>-pager" class="scroll" style="text-align:center;"></div>
|
||||||
|
|
||||||
|
<script type="text/javascript"><!--
|
||||||
|
|
||||||
|
/************************************************************************
|
||||||
|
*
|
||||||
|
* Example search boxes that work with the javascript form this element
|
||||||
|
|
||||||
|
<div>Search By:<BR>
|
||||||
|
<input type="checkbox" id="autosearch" onclick="enableAutosubmit(this.checked)">Enable Autosearch<BR>
|
||||||
|
|
||||||
|
Last Name<BR>
|
||||||
|
<input type="text" CLASS="filt-text" id="filt_last_name" name="PrimaryContact.last_name" />
|
||||||
|
<button CLASS="filt-submit" ID="submit_filt_last_name" style="margin-left:30px;">Search</button><BR>
|
||||||
|
|
||||||
|
First Name<BR>
|
||||||
|
<input type="text" CLASS="filt-text" id="filt_first_name" name="PrimaryContact.first_name" />
|
||||||
|
<button CLASS="filt-submit" ID="submit_filt_first_name" style="margin-left:30px;">Search</button><BR>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<button CLASS="filt-clear" ONCLICK="gridRestore()">Clear</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
var timeoutHnd;
|
||||||
|
function handleFiltKeydown(e){
|
||||||
|
/* $('#debug').append("KEYDOWN: id:"+id+"<BR>"); */
|
||||||
|
|
||||||
|
if (e.which == 8 || e.which == 46 || /* Backspace / Delete */
|
||||||
|
e.which == 32 || /* Space */
|
||||||
|
(65 <= e.which && e.which < 65 + 26) || /* Upper Case */
|
||||||
|
(97 <= e.which && e.which < 97 + 26)) /* Lower Case */
|
||||||
|
{
|
||||||
|
var id = $(this).attr('id');
|
||||||
|
if(timeoutHnd)
|
||||||
|
clearTimeout(timeoutHnd);
|
||||||
|
timeoutHnd = setTimeout(function()
|
||||||
|
{gridFilter(id)},
|
||||||
|
500);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function enableAutosubmit(state) {
|
||||||
|
jQuery(".filt-submit").attr("disabled",state);
|
||||||
|
if (state) {
|
||||||
|
$(".filt-text").keydown(handleFiltKeydown);
|
||||||
|
/* $('#debug').append("BIND: id:"+id+"<BR>"); */
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
$(".filt-text").unbind('keydown', handleFiltKeydown);
|
||||||
|
/* $('#debug').append("UNBIND: id:"+id+"<BR>"); */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function gridRestore() {
|
||||||
|
/* $('#debug').append("RESTORE<BR>"); */
|
||||||
|
$('.filt-text').val('');
|
||||||
|
jQuery('#<?php echo $gridId; ?>').removePostDataItem('filt');
|
||||||
|
jQuery('#<?php echo $gridId; ?>').removePostDataItem('filtField');
|
||||||
|
jQuery('#<?php echo $gridId; ?>').removePostDataItem('filtValue');
|
||||||
|
jQuery('#<?php echo $gridId; ?>')
|
||||||
|
.setGridParam({ page: 1 })
|
||||||
|
.trigger("reloadGrid");
|
||||||
|
}
|
||||||
|
|
||||||
|
function gridFilter(id) {
|
||||||
|
var field = jQuery("#"+id).attr('name');
|
||||||
|
var value = jQuery("#"+id).val();
|
||||||
|
/* $('#debug').append("RELOAD: field:"+field+"; value:"+value+"<BR>"); */
|
||||||
|
jQuery('#<?php echo $gridId; ?>').setPostDataItem('filt', true);
|
||||||
|
jQuery('#<?php echo $gridId; ?>').setPostDataItem('filtField', field);
|
||||||
|
jQuery('#<?php echo $gridId; ?>').setPostDataItem('filtValue', value);
|
||||||
|
|
||||||
|
$('.filt-text').each(function(){
|
||||||
|
if ($(this).attr('id') != id)
|
||||||
|
$(this).val('');
|
||||||
|
});
|
||||||
|
|
||||||
|
jQuery('#<?php echo $gridId; ?>')
|
||||||
|
.setGridParam({ page: 1 })
|
||||||
|
.trigger("reloadGrid");
|
||||||
|
}
|
||||||
|
|
||||||
|
jQuery(document).ready(function(){
|
||||||
|
$('.filt-submit').click(function(){
|
||||||
|
gridFilter($(this).attr('id').replace(/^submit_/, ''));
|
||||||
|
});
|
||||||
|
enableAutosubmit(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
--></script>
|
||||||
|
|
||||||
Reference in New Issue
Block a user