Skip to content

Instantly share code, notes, and snippets.

@gratzc
Created February 11, 2014 11:50
Show Gist options
  • Save gratzc/8933462 to your computer and use it in GitHub Desktop.
Save gratzc/8933462 to your computer and use it in GitHub Desktop.
<cfif thisTag.executionMode is "start">
<cfsilent>
<!------------------------------------------------------------------------
Author : Curt Gratz
Date : 7/9/2010
Description :
Custom tag to render script sections of the jqGrid.
Needs to be inside
$(document).ready(function(){
)};
Usage:
<cf_jqGridScript
url="/someURL/someCFC.cfc?method=someMethod"
colName = "
'ID',
'Test'
"
colModel = "
{name: 'id', index:'id', width:0, sorttype:'int', hidden:true},
{name: 'Test', index:'Test', width:21, align:'center'},
"
caption="Test"
>
Width:
Column widths must total...
962 pixels to fill full body area with no sidebar
863 pixels to fill uniform area with no sidebar
773 pixels to fill full body area with sidebar
761 pixels to fill accordion area with sidebar
680 pixels to fill uniform area with sidebar
------------------------------------------------------------------------->
<cfparam name="attributes.gridID" default="list">
<cfparam name="attributes.url" default="">
<cfparam name="attributes.datatype" default="json">
<cfparam name="attributes.postData" default="">
<cfparam name="attributes.colNames" default="">
<cfparam name="attributes.colModel" default="">
<cfparam name="attributes.pagerID" default="pager">
<cfparam name="attributes.recordtext" default="{0} to {1} of {2}">
<cfparam name="attributes.emptyrecords" default="">
<cfparam name="attributes.emptyDataText" default="Sorry, there are no records to display.">
<cfparam name="attributes.hidegrid" default="false">
<cfparam name="attributes.rowNum" default="10">
<cfparam name="attributes.cellEdit" default="false">
<cfparam name="attributes.cellsubmit" default="remote">
<cfparam name="attributes.cellurl" default="">
<cfparam name="attributes.reloadAfterEdit" default="false">
<cfif attributes.rowNum GT 10>
<cfparam name="attributes.toppager" default="true">
<cfelse>
<cfparam name="attributes.toppager" default="false">
</cfif>
<cfparam name="attributes.rowList" default="5,10,25,50,100">
<cfparam name="attributes.pagerpos" default="right">
<cfparam name="attributes.recordpos" default="center">
<cfparam name="attributes.sortorder" default="asc">
<cfparam name="attributes.sortname" default="">
<cfparam name="attributes.viewrecords" default="true">
<cfparam name="attributes.pgbuttons" default="true">
<cfparam name="attributes.pginput" default="true">
<cfparam name="attributes.height" default="auto">
<cfparam name="attributes.width" default="">
<cfparam name="attributes.caption" default="">
<cfparam name="attributes.onSelectRow" default="">
<cfparam name="attributes.gridComplete" default="">
<cfparam name="attributes.jsonReader" default="
root: 'ROWS', //our data
page: 'PAGE', //current page
total: 'TOTAL', //total pages
records: 'RECORDS', //total record
cell: '',
id: '0' //will default first column as ID
">
</cfsilent>
<cfoutput>
var colModelArray = [#attributes.colModel#];
var debugMode = false;
if(debugMode){ console.log(colModelArray); }
<!---if we don't have a width passed in don't do the work to calculate column widths--->
<cfif len(attributes.width)>
var gridWidthTotal = #attributes.width#;
var remainingWidth = gridWidthTotal;
var autoColumns = [];
var actionNonTouchWidth = 21;
var actionTouchWidth = 55;
if(debugMode){ console.log("Grid Width: " + gridWidthTotal); }
//touch or not?
if ($('html').hasClass('touch')) {
var touch = true;
} else {
var touch = false;
}
if(debugMode){
if(touch){
console.log("Touch enabled and action width set to " + actionTouchWidth);
} else {
console.log("Touch disabled and action width set to " + actionNonTouchWidth);
}
}
var totalVisibleColumns = 0;
//loop through the array of objects
for (var i in colModelArray) {
if(debugMode){ var debugInfo = {} }
//set the column object to the current array element
var columnObj = colModelArray[i];
if(debugMode){ debugInfo.Name = columnObj['name'] }
//if the current column is an 'auto' width column
if (columnObj['width'] == 'auto') {
if(debugMode){ debugInfo.Width = columnObj['width'] }
//if the column has a hidden property
if (columnObj.hasOwnProperty('hidden')) {
//if it is not hidden add it to our auto columns
if (columnObj['hidden'] == false) {
autoColumns.push(i);
if(debugMode){ debugInfo.Hidden = "No" }
}
} else {
autoColumns.push(i);
if(debugMode){
console.log("'" + columnObj['name'] + "' added to list of automatically calulated columns");
debugInfo.Hidden = "No";
}
}
totalVisibleColumns = totalVisibleColumns + 1;
} else {
//if the column has a hidden property
if (columnObj.hasOwnProperty('hidden')) {
//if it is not hidden subtract the total from the width
if (columnObj['hidden'] == false) {
if(debugMode){ debugInfo.Hidden = "No" }
if (columnObj.hasOwnProperty('action')) {
if(debugMode){ debugInfo.Action = "Yes" }
if (touch) {
colModelArray[i]['width'] = actionTouchWidth;
remainingWidth = remainingWidth - colModelArray[i]['width'];
} else {
colModelArray[i]['width'] = actionNonTouchWidth;
remainingWidth = remainingWidth - colModelArray[i]['width'];
}
if(debugMode){ debugInfo.Width = colModelArray[i]['width'] }
}
totalVisibleColumns = totalVisibleColumns + 1;
} else {
colModelArray[i]['width'] = 0;
}
//if it is not hidden subtract the total from the width
} else if (columnObj.hasOwnProperty('action')) {
if(debugMode){ debugInfo.Action = "Yes" }
if (touch) {
colModelArray[i]['width'] = actionTouchWidth;
remainingWidth = remainingWidth - colModelArray[i]['width'];
} else {
colModelArray[i]['width'] = actionNonTouchWidth;
remainingWidth = remainingWidth - colModelArray[i]['width'];
}
totalVisibleColumns = totalVisibleColumns + 1;
if(debugMode){ debugInfo.Width = colModelArray[i]['width'] }
} else {
if (columnObj.hasOwnProperty('width')) {
remainingWidth = remainingWidth - columnObj['width'];
if(debugMode){ debugInfo.Width = columnObj['width'] }
} else {
autoColumns.push(i);
if(debugMode){
console.log("'" + columnObj['name'] + "' added to list of automatically calulated columns");
}
}
totalVisibleColumns = totalVisibleColumns + 1;
}
}
if(debugMode){ console.log( debugInfo ); }
}
//if there is one or more auto columns set the values
if (autoColumns.length) {
//remove 5 pixels per column and 1 pixel overall (padding and border widths?)
remainingWidth = remainingWidth - ((totalVisibleColumns * 5) - 1);
if(debugMode){
console.log( "Total Visible Columns: " + totalVisibleColumns);
console.log( "Remaining Width: " + remainingWidth);
}
var remainder = remainingWidth % autoColumns.length;
if(debugMode){ console.log( "Remainder: " + remainder); }
for (var i = 0; i < autoColumns.length; i++) {
//set the auto column(s) to the remaining width
if (autoColumns.length-1 == i) {
colModelArray[autoColumns[i]]['width'] = Math.floor(remainingWidth / autoColumns.length) + remainder;
} else {
colModelArray[autoColumns[i]]['width'] = Math.floor(remainingWidth / autoColumns.length);
}
if(debugMode){ console.log( "Auto column '" + colModelArray[autoColumns[i]]['name'] + "' width set to " + colModelArray[autoColumns[i]]['width'] ); }
}
}
if(debugMode){ console.log(colModelArray) }
</cfif>
$("###attributes.gridID#").jqGrid({
shrinkToFit: false,
url: '#attributes.url#',
datatype: '#attributes.datatype#',
colNames: [#attributes.colNames#],
colModel: colModelArray,
pager: $('###attributes.pagerID#'),
pgbuttons: #attributes.pgbuttons#,
pginput: #attributes.pginput#,
recordtext: '#attributes.recordtext#',
toppager: #attributes.toppager#,
emptyrecords: '#attributes.emptyrecords#',
emptyDataText: '#attributes.emptyDataText#',
hidegrid: #attributes.hidegrid#,
rowNum: #attributes.rowNum#,
rowList: [#attributes.rowList#],
pagerpos: '#attributes.pagerpos#',
recordpos: '#attributes.recordpos#',
sortorder: '#attributes.sortorder#',
sortname: '#attributes.sortname#',
height: '#attributes.height#',
<cfif len(attributes.width)>width: '#attributes.width#',</cfif>
sortorder: '#attributes.sortorder#',
viewrecords: #attributes.viewrecords#,
caption: '#attributes.caption#',
<cfif len(attributes.onSelectRow)>onSelectRow: #attributes.onSelectRow#,</cfif>
cellEdit: #attributes.cellEdit#,
cellsubmit: '#attributes.cellsubmit#',
cellurl: '#attributes.cellurl#',
<cfif attributes.reloadAfterEdit EQ true>
afterSubmitCell : function(rowid,cellname,value,iRow,iCol) {
$("###attributes.gridID#").trigger("reloadGrid");
},
</cfif>
gridComplete:
function ()
{
#attributes.gridComplete#
}
,
loadComplete:
function ()
{
if ($('###attributes.gridID#').getGridParam('records') == 0) { // are there any records?
var grid = $('###attributes.gridID#');
var emptyText = grid.getGridParam('emptyDataText'); // get the empty text
var container = grid.parents('.ui-jqgrid-view'); // find the grid's container
container.find('.ui-jqgrid-hdiv, .ui-jqgrid-bdiv').hide(); // hide the column headers and the cells below
container.find('.no-records').hide();
container.find('.ui-jqgrid-titlebar').after('<div class="no-records">' + emptyText + '</div>'); // insert the empty data text
} else {
var grid = $('###attributes.gridID#');
var emptyText = grid.getGridParam('emptyDataText'); // get the empty text
var container = grid.parents('.ui-jqgrid-view'); // find the grid's container
container.find('.ui-jqgrid-hdiv, .ui-jqgrid-bdiv').show();
container.find('.no-records').hide();
}
//add span to icons anchors so we can make them touch capable
$('html.touch .ui-icon').wrapInner('<span />');
}
,
jsonReader: {
#attributes.jsonReader#
}});
$.jgrid.formatter.integer = {thousandsSeparator: ","};
</cfoutput>
</cfif>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment