目前我有一个基于过滤器完美加载的网格，该过滤器根据用户输入查询数据库。
我要做的是能够打开一个模态jqgrid，用户可以根据单元格点击进一步深入查看数据。现在我根据调用此函数的链接打开了第二个模态网格：
function initTicketListingWindow(FilterFunctionalArea,TicketListingAO,TicketListingWQ,TicketListingMO,TicketListingSeverity,FilterDateRange, FilterYYYY)
{
var myURL = '../TSLC/newListing.cfm?';
CFWindowCreate('cfTicketListingGrid', 'Ticket Listing', myURL, 2000, 600);
ColdFusion.Window.getWindowObject('cfTicketListingGrid').center();
ColdFusion.Window.show('cfTicketListingGrid');
ColdFusion.Window.onHide('cfTicketListingGrid', cleanUpCFWindow);
}
第一个jqgrid的代码：
function initTslcGrid(){
// Remove any active grid
$("table[id*='_gridtable']").jqGrid('GridUnload');
$("div[id*='_pagerdiv']").remove();
var status_name = $('#tslcStatusName_hidden').val();
var attuid = $('#tslcStatusAttuidAssignBy_hidden').val();
var name = $('#tslcStatusAttuidAssignByName_hidden').val();
$('#TSLCGrid').append('<table id="TSLCGrid_gridtable"></table>');
$('#TSLCGrid').append('<div id="TSLCGrid_pagerdiv"></div>');
if (myPage == 0)
myPage = 1;
var gridParams = $('#tslcStatusGridStorage').val();
if (gridParams !=null && gridParams!="")
{
var gridInfo = $.parseJSON(gridParams);
var myRow = parseInt(gridInfo.rowNum);
var myPage = parseInt(gridInfo.page);
var mySel = gridInfo.selarrrow;
}
else
{
var myRow = 50;
var myPage = 1;
var mySel = new Array();
}
//TSLC Grid Cell Formatters
//WQ Formatter opens a modal grid once an Active Org is clicked from the TSLCGrid
function WQFormatter(cellvalue,options,rowObject)
{
var panel = '';
var activeOrg = rowObject.cell[0];
var activeOrg_URL = '<a href="javascript:void(0);" '
+ 'onclick="initWQGridWindow(\'' + rowObject.cell[0] + '\');"> '
+ activeOrg
+ '</a>';
var output = '<div style="align:middle;">' + activeOrg_URL;
if (activeOrg == '*') {
return '*ALL*'
} else {
return output
}
}
function MOFormatter(cellvalue,options,rowObject)
{
var panel = '';
var managingOrg = rowObject.cell[1];
if (managingOrg == '*') {
return '*ALL*'
} else {
return managingOrg
}
}
//Listing Formatter opens a modal grid that displays ticket data when cells from the Ticket Sales Counts & Ticket Open Day(s) columns are clicked
function QueuedFormatter(cellvalue,options,rowObject)
{
var panel = '';
var queued = rowObject.cell[4];
var ticket_state = 'Queued';
var TicketListingAO = rowObject.cell[0];
var queued_URL = '<a href="javascript:void(0);" '
+ 'onclick="initTicketListingdWindow(\'' + ticket_state + TicketListingAO + '\');"> '
+ queued
+ '</a>';
var output = '<div style="align:middle;">' + queued_URL;
if (queued == 0) {
return queued
} else {
return output
}
}
function ActiveFormatter(cellvalue,options,rowObject)
{
var panel = '';
var active = rowObject.cell[5];
var ticket_state = 'Active'
var active_URL = '<a href="javascript:void(0);" '
+ 'onclick="initTicketListingdWindow(\'' + '\');"> '
+ active
+ '</a>';
var output = '<div style="align:middle;">' + active_URL;
if (active == 0) {
return active
} else {
return output
}
}
function DeferredFormatter(cellvalue,options,rowObject)
{
var panel = '';
var deferred = rowObject.cell[6];
var ticket_state = 'Deferred'
var deferred_URL = '<a href="javascript:void(0);" '
+ 'onclick="initTicketListingdWindow(\'' + '\');"> '
+ deferred
+ '</a>';
var output = '<div style="align:middle;">' + deferred_URL;
if (deferred == 0) {
return deferred
} else {
return output
}
}
function ClearedFormatter(cellvalue,options,rowObject)
{
var panel = '';
var cleared = rowObject.cell[7];
var ticket_state = 'Cleared'
var cleared_URL = '<a href="javascript:void(0);" '
+ 'onclick="initTicketListingdWindow(\'' + '\');"> '
+ cleared
+ '</a>';
var output = '<div style="align:middle;">' + cleared_URL;
if (cleared == 0) {
return cleared
} else {
return output
}
}
function ReadyCloseFormatter(cellvalue,options,rowObject)
{
var panel = '';
var ReadyClose = rowObject.cell[8];
var ticket_state = 'Ready to Close'
var ReadyClose_URL = '<a href="javascript:void(0);" '
+ 'onclick="initTicketListingdWindow(\'' + '\');"> '
+ ReadyClose
+ '</a>';
var output = '<div style="align:middle;">' + ReadyClose_URL;
if (ReadyClose == 0) {
return ReadyClose
} else {
return output
}
}
function CancelRateFormatter(cellvalue,options,rowObject)
{
var panel = ''
var CancelRate = Math.floor(rowObject.cell[9]*100);
var output = CancelRate + '%';
return output
}
function ZeroFormatter(cellvalue,options,rowObject)
{
var panel = '';
var days ='days30 > 0'
var zero = rowObject.cell[18];
var zero_URL = '<a href="javascript:void(0);" '
+ 'onclick="initTicketListingdWindow(\'' + '\');"> '
+ zero
+ '</a>';
var output = '<div style="align:middle;">' + zero_URL;
if (zero == 0) {
return zero
} else {
return output
}
}
function ThirtyOneFormatter(cellvalue,options,rowObject)
{
var panel = '';
var days ='days31_60 > 0'
var ThirtyOne = rowObject.cell[19];
var ThirtyOne_URL = '<a href="javascript:void(0);" '
+ 'onclick="initTicketListingdWindow(\'' + '\');"> '
+ ThirtyOne
+ '</a>';
var output = '<div style="align:middle;">' + ThirtyOne_URL;
if (ThirtyOne == 0) {
return ThirtyOne
} else {
return output
}
}
function SixtyOneFormatter(cellvalue,options,rowObject)
{
var panel = '';
var days ='days61_120 > 0'
var SixtyOne = rowObject.cell[20];
var SixtyOne_URL = '<a href="javascript:void(0);" '
+ 'onclick="initTicketListingdWindow(\'' + '\');"> '
+ SixtyOne
+ '</a>';
var output = '<div style="align:middle;">' + SixtyOne_URL;
if (SixtyOne == 0) {
return SixtyOne
} else {
return output
}
}
function OneTwentyOneFormatter(cellvalue,options,rowObject)
{
var panel = '';
var days ='days120GT > 0'
var OneTwentyOne = rowObject.cell[21];
var OneTwentyOne_URL = '<a href="javascript:void(0);" '
+ 'onclick="initTicketListingdWindow(\'' + '\');"> '
+ OneTwentyOne
+ '</a>';
var output = '<div style="align:middle;">' + OneTwentyOne_URL;
if (OneTwentyOne == 0) {
return OneTwentyOne
} else {
return output
}
}
//Date Formatter converts minutes to d/h/m format
function AvgQActiveFormatter(cellvalue,options,rowObject)
{
var panel = '';
var minutes = Math.floor(rowObject.cell[12]);
var hours = Math.floor(minutes/60);
var days = Math.floor(hours/24);
hours = hours-(days*24);
minutes = minutes-(days*24*60)-(hours*60);
AvgQActive = days + 'd ' + hours + 'h ' + minutes + 'm '
if (minutes == 0, '') {
return ''
} else {
return AvgQActive
}
}
function PctlQActiveFormatter(cellvalue,options,rowObject)
{
var panel = '';
var minutes = Math.floor(rowObject.cell[13]);
var hours = Math.floor(minutes/60);
var days = Math.floor(hours/24);
hours = hours-(days*24);
minutes = minutes-(days*24*60)-(hours*60);
PctlQActive = days + 'd ' + hours + 'h ' + minutes + 'm '
if (minutes == 0, '') {
return ''
} else {
return PctlQActive
}
}
function AvgOpenCloseFormatter(cellvalue,options,rowObject)
{
var panel = '';
var minutes = Math.floor(rowObject.cell[14]);
var hours = Math.floor(minutes/60);
var days = Math.floor(hours/24);
hours = hours-(days*24);
minutes = minutes-(days*24*60)-(hours*60);
AvgOpenClose = days + 'd ' + hours + 'h ' + minutes + 'm '
if (minutes == 0, '') {
return ''
} else {
return AvgOpenClose
}
}
function PctlOpenCloseFormatter(cellvalue,options,rowObject)
{
var panel = '';
var minutes = Math.floor(rowObject.cell[15]);
var hours = Math.floor(minutes/60);
var days = Math.floor(hours/24);
hours = hours-(days*24);
minutes = minutes-(days*24*60)-(hours*60);
PctlOpenClose = days + 'd ' + hours + 'h ' + minutes + 'm '
if (minutes == 0, '') {
return ''
} else {
return PctlOpenClose
}
}
function AvgRestoreFormatter(cellvalue,options,rowObject)
{
var panel = '';
var minutes = Math.floor(rowObject.cell[16]);
var hours = Math.floor(minutes/60);
var days = Math.floor(hours/24);
hours = hours-(days*24);
minutes = minutes-(days*24*60)-(hours*60);
AvgRestore = days + 'd ' + hours + 'h ' + minutes + 'm '
if (minutes == 0, '') {
return ''
} else {
return AvgRestore
}
}
function PctlRestoreFormatter(cellvalue,options,rowObject)
{
var panel = '';
var minutes = Math.floor(rowObject.cell[17]);
var hours = Math.floor(minutes/60);
var days = Math.floor(hours/24);
hours = hours-(days*24);
minutes = minutes-(days*24*60)-(hours*60);
PctlRestore = days + 'd ' + hours + 'h ' + minutes + 'm '
if (minutes == 0, '') {
return ''
} else {
return PctlRestore
}
}
//Get Filter Values
FilterFunctionalArea = $('#tslcStatusFilterFA_hidden').val();
var FilterActiveOrg = encodeURIComponent($('#tslcStatusFilterAO_hidden').val());
var FilterWorkQueue = encodeURIComponent($('#tslcStatusFilterWQ_hidden').val());
var FilterManagingOrg = encodeURIComponent($('#tslcStatusFilterMO_hidden').val());
var FilterSeverity = encodeURIComponent($('#tslcStatusFilterSeverity_hidden').val());
FilterDateRange = $('#tslcStatusFilterDateRange_hidden').val();
FilterYYYY = $('#tslcStatusFilterYYYY_hidden').val();
var explainFilter = "";
if (FilterFunctionalArea)
explainFilter = explainFilter + 'Functional Area: ' + FilterFunctionalArea + '\n';
if (FilterActiveOrg)
explainFilter = explainFilter + 'Active Orgs: ' + decodeURIComponent(FilterActiveOrg) + '\n';
if (FilterWorkQueue)
explainFilter = explainFilter + 'Work Queues: ' + decodeURIComponent(FilterWorkQueue) + '\n';
if (FilterManagingOrg)
explainFilter = explainFilter + 'Managing Orgs: ' + decodeURIComponent(FilterManagingOrg) + '\n';
if (FilterSeverity)
explainFilter = explainFilter + 'Severity: ' + decodeURIComponent(FilterSeverity) + '\n';
if (FilterDateRange)
explainFilter = explainFilter + 'Date Range: ' + FilterDateRange + '\n';
if (explainFilter)
{
$('#Tslc_MessageArea').attr('title','Filter Active:\n' + explainFilter);
}
else
{
$('#Tslc_MessageArea').attr('title','No Filter Applied');
}
/*
//Permissions & Condition
var isUserAdmin = $('#LegalRcaStatusIsAdmin_hidden').val();
var isUserSubListMaster = $('#LegalRcaStatusIsthe_sub_list_master_hidden').val();
var dashboardLocation = $('#LegalRcaStatusdashboardLocation_hidden').val();
*/
var myColNames = ['key'];
if (FilterWorkQueue === "") {
myColNames.push('Active Org');
myColNames.push('Managing Org');
myColNames.push('Severity');
myColNames.push('Queued');
myColNames.push('Active');
myColNames.push('Deferred');
myColNames.push('Cleared');
myColNames.push('Ready Close');
myColNames.push('Cancel Rate');
myColNames.push('Holding');
myColNames.push('Pending');
myColNames.push('0-30');
myColNames.push('31-60');
myColNames.push('61-120');
myColNames.push('121+');
myColNames.push('Avg Q-Active');
myColNames.push('80 Pctl Q-Active');
myColNames.push('Avg Open-Close');
myColNames.push('80 Pctl Open-Close');
myColNames.push('Avg Restore');
myColNames.push('80 Pctl Restore');
} else {
myColNames.push('Work Queue');
myColNames.push('Managing Org');
myColNames.push('Severity');
myColNames.push('Queued');
myColNames.push('Active');
myColNames.push('Deferred');
myColNames.push('Cleared');
myColNames.push('Ready Close');
myColNames.push('Cancel Rate');
myColNames.push('Holding');
myColNames.push('Pending');
myColNames.push('0-30');
myColNames.push('31-60');
myColNames.push('61-120');
myColNames.push('121+');
myColNames.push('Avg Q-Active');
myColNames.push('80 Pctl Q-Active');
myColNames.push('Avg Open-Close');
myColNames.push('80 Pctl Open-Close');
myColNames.push('Avg Restore');
myColNames.push('80 Pctl Restore');
}
// array containing column details
var myColModel = [{name: 'key', index:'key', key:true, hidden:true, align:'center', jsonmap:"ID"}];
if (FilterWorkQueue === "") {
myColModel.push({name: 'Active Org', width:30, align:'center', formatter: WQFormatter});
myColModel.push({name: 'Managing Org', width:30, align:'center', formatter: MOFormatter});
myColModel.push({name: 'Severity', width:25, align:'center', jsonmap:"cell.3"});
myColModel.push({name: 'Queued', width:20, align:'center', formatter: QueuedFormatter});
myColModel.push({name: 'Active', width:20, align:'center', formatter: ActiveFormatter});
myColModel.push({name: 'Deferred', width:20, align:'center', formatter: DeferredFormatter});
myColModel.push({name: 'Cleared', width:20, align:'center', formatter: ClearedFormatter});
myColModel.push({name: 'Ready Close', width:20, align:'center',formatter: ReadyCloseFormatter});
myColModel.push({name: 'Cancel Rate', width:25, align:'center', formatter: CancelRateFormatter});
myColModel.push({name: 'Holding', width:20, align:'center', jsonmap:"cell.10"});
myColModel.push({name: 'Pending', width:20, align:'center', jsonmap:"cell.11"});
myColModel.push({name: '0-30', width:15, align:'center', formatter: ZeroFormatter});
myColModel.push({name: '31-60', width:15, align:'center', formatter: ThirtyOneFormatter});
myColModel.push({name: '61-120', width:15, align:'center', formatter: SixtyOneFormatter});
myColModel.push({name: '121+', width:15, align:'center', formatter: OneTwentyOneFormatter});
myColModel.push({name: 'Avg Q-Active', width:30, align:'center', formatter: AvgQActiveFormatter});
myColModel.push({name: '80 Pctl Q-Active', width:30, align:'center', formatter: PctlQActiveFormatter});
myColModel.push({name: 'Avg Open-Close', width:30, align:'center', formatter: AvgOpenCloseFormatter});
myColModel.push({name: '80 Pctl Open-Close', width:30, align:'center', formatter: PctlOpenCloseFormatter});
myColModel.push({name: 'Avg Restore', width:30, align:'center', formatter: AvgRestoreFormatter});
myColModel.push({name: '80 Pctl Restore', width:30, align:'center', formatter: PctlRestoreFormatter});
} else {
myColModel.push({name: 'Work Queue', width:30, align:'center', jsonmap:"cell.2"});
myColModel.push({name: 'Managing Org', width:30, align:'center', formatter: MOFormatter});
myColModel.push({name: 'Severity', width:25, align:'center', jsonmap:"cell.3"});
myColModel.push({name: 'Queued', width:20, align:'center', formatter: QueuedFormatter});
myColModel.push({name: 'Active', width:20, align:'center', formatter: ActiveFormatter});
myColModel.push({name: 'Deferred', width:20, align:'center', formatter: DeferredFormatter});
myColModel.push({name: 'Cleared', width:20, align:'center', formatter: ClearedFormatter});
myColModel.push({name: 'Ready Close', width:20, align:'center',formatter: ReadyCloseFormatter});
myColModel.push({name: 'Cancel Rate', width:25, align:'center', formatter: CancelRateFormatter});
myColModel.push({name: 'Holding', width:20, align:'center', jsonmap:"cell.10"});
myColModel.push({name: 'Pending', width:20, align:'center', jsonmap:"cell.11"});
myColModel.push({name: '0-30', width:15, align:'center', formatter: ZeroFormatter});
myColModel.push({name: '31-60', width:15, align:'center', formatter: ThirtyOneFormatter});
myColModel.push({name: '61-120', width:15, align:'center', formatter: SixtyOneFormatter});
myColModel.push({name: '121+', width:15, align:'center', formatter: OneTwentyOneFormatter});
myColModel.push({name: 'Avg Q-Active', width:30, align:'center', formatter: AvgQActiveFormatter});
myColModel.push({name: '80 Pctl Q-Active', width:30, align:'center', formatter: PctlQActiveFormatter});
myColModel.push({name: 'Avg Open-Close', width:30, align:'center', formatter: AvgOpenCloseFormatter});
myColModel.push({name: '80 Pctl Open-Close', width:30, align:'center', formatter: PctlOpenCloseFormatter});
myColModel.push({name: 'Avg Restore', width:30, align:'center', formatter: AvgRestoreFormatter});
myColModel.push({name: '80 Pctl Restore', width:30, align:'center', formatter: PctlRestoreFormatter});
}
// jqGrid setup
jQuery("#TSLCGrid_gridtable").jqGrid({
url:'../TSLC/cfcs/getData.cfc?method=getTslcViewData&attuid=' + attuid
+ '&FilterFunctionalArea=' + FilterFunctionalArea
+ '&FilterActiveOrg=' + FilterActiveOrg
+ '&FilterWorkQueue=' + FilterWorkQueue
+ '&FilterManagingOrg=' + FilterManagingOrg
+ '&FilterSeverity=' + FilterSeverity
+ '&FilterDateRange=' + FilterDateRange
+ '&FilterYYYY=' + FilterYYYY,
datatype: "json",
colNames:myColNames,
colModel:myColModel,
jsonReader: { repeatitems : false, root:"rows" },
cmTemplate: { title: false, sortable: true },
rowNum:myRow,
loadui: "block",
rowList:[10,25,50,100],
page:myPage,
pager: '#TSLCGrid_pagerdiv',
sortname: 'Managing_Org',
viewrecords: true,
sortorder: "desc",
hoverrows:false,
toppager: true,
autowidth: true,
//shrinkToFit: true,
height:'100%',
onSelectRow : function (rowid, status) {
//This disables auto-select of checkbox when row is clicked
var elem = document.activeElement;
if (elem.id) {
if (!status){
$('#cb_TSLCGrid_gridtable').attr('checked',false);
}
} else {
$('#TSLCGrid_gridtable').setSelection(rowid, false);
}
},
loadBeforeSend: function () {
var gridIdAsSelector = $.jgrid.jqID(this.id),
$loadingDiv = $("#load_" + gridIdAsSelector),
$gbox = $("#gbox_" + gridIdAsSelector);
$loadingDiv.show().css({
top: (Math.min($gbox.height(), $(window).height()) - $loadingDiv.outerHeight())/2 + 'px',
left: (Math.min($gbox.width(), $(window).width()) - $loadingDiv.outerWidth())/2 + 'px'
});
},
loadComplete: function(data) {
$("tr.jqgrow:odd").css("background", "#F8F8F8");
var myUserData = $('#TSLCGrid_gridtable').jqGrid('getGridParam', 'userData');
$('#Tslc_MessageArea').html('Displaying ' + myUserData.RETURNEDITEMS + '/' + myUserData.totalITEMS + ' record(s)');
if (explainFilter)
{
var help = "<img src ='../one_global/images/help.png' style='height: 15px; width: 15px; vertical-align: -3px;'>";
$('#TSLC_MessageArea').html($('#Tslc_MessageArea').html() + ' ' + help);
$('#Tslc_MessageArea').css('color','red');
}
else
{
$('#Tslc_MessageArea').css('color','green');
}
$('#Tslc_MessageArea').css('font-size','12');
$('#Tslc_MessageArea').css('font-weight','bold');
$('#Tslc_MessageArea').css('vertical-align','1px');
$('#Tslc_MessageArea').css('cursor','help');
},
gridComplete: function(rowid, e) {
//Where a cell contains a tiny table, set the vertical align on it's grandparent (the jqgrid cell)
$('.ui-jqgrid tr.jqgrow td').css('vertical-align','top');
//$('.ui-jqgrid .ui-jqgrid-bdiv').css({'overflow-y': 'scroll'});
//$('.ui-jqgrid tr.jqgrow table.tinytable').parent().css('margin-top','-50%');
}
});
// Making Grouping Headers over the existing column headers
jQuery("#TSLCGrid_gridtable").jqGrid('setGroupHeaders',
{ useColSpanStyle: false,
groupHeaders:[
{startColumnName: 'Active Org', numberOfColumns:3, titleText: 'Drill Down Active Org to Work Queues'},
{startColumnName: 'Queued', numberOfColumns:5, titleText:'Ticket State Counts'},
{startColumnName: 'Cancel Rate', numberOfColumns: 1, titleText: ''},
{startColumnName: 'Holding', numberOfColumns:2, titleText:'Engagement'},
{startColumnName: '0-30', numberOfColumns:4, titleText:'Ticket Open (days)'},
{startColumnName: 'Avg Q-Active', numberOfColumns:6, titleText:'Ticket Lifecyle'}
]
});
jQuery("#TSLCGrid_gridtable").jqGrid('setFrozenColumns');
jQuery("#TSLCGrid_gridtable").jqGrid('navGrid', '#TSLCGrid_pagerdiv',{search: false,edit:false,add:false,del:false,refresh:false});
// Creates gear icon for filter and calls tslcFilter
jQuery("#TSLCGrid_gridtable").jqGrid('navButtonAdd', '#TSLCGrid_pagerdiv',
{
caption:"",
buttonicon:"ui-icon-gear",
title:"Filter",
onClickButton : function() {
initTslcFilterButton();
}
}
);
// Creates refresh icon for filter and calls tslcRefresh
jQuery("#TSLCGrid_gridtable").jqGrid('navButtonAdd', '#TSLCGrid_pagerdiv',
{
caption:"",
cloneToTop:true,
buttonicon:"ui-icon-refresh",
title:"Refresh",
onClickButton : function(){
tslcRefreshButton();
}
}
);
//Clone toolbar buttons to top menu bar
var toolbarClone = $('#TSLCGrid_pagerdiv').clone(true);
$('#TSLCGrid_gridtable_toppager').prepend(toolbarClone);
}
对于我的新网格，我需要使用单击行中的单元格值1,2,3,4作为新参数查询数据库。