我对 JSON DATA 所做的工作很少，并且已经为此苦苦挣扎了好几天。
我的应用程序的一部分 [使用 jquery 数据表] 显示有关服务合同可用资金数量的信息。当我向下钻取时，我想查看对合同的所有修改。我正在使用 ajax 调用来获取这些数据。我已经成功地显示了单行返回的信息，但没有显示多行。
这是我到目前为止所拥有的
我的 JSON 数据 - 我还没有看到在任何地方的任何示例中使用过这样的数据集。
{"SUCCESS":true,
"ERRORS":[],
"DATA":{
"COLUMNS":["REQNUM_ID",
"PORDER_ID",
"REQNUM",
"AWARD_DTE",
"AWARD_AMNT",
"DTE_ENTERED",
"ENTERED_BY",
"DTE_MOD",
"MOD_BY",
"VALID_FLAG",
"MOD_NUM",
"DESCRIPTION",
"PROCRGN"],
"DATA":[
[2,35,"144-12DG-261","October, 25 2011 00:00:00",2155.02,"March, 28 2012 00:00:00",48317,null,null,"Y",1,null,"DG"],
[3,35,"144-12DG-264","November, 14 2011 00:00:00",0,"March, 28 2012 00:00:00",48317,null,null,"Y",2,null,"DG"],
[4,35,"144-12DG-268","December, 09 2011 00:00:00",1000.00,"March, 28 2012 00:00:00",48317,null,null,"Y",3,null,"DG"]
]
}
}
我的代码：下面的代码实际上给了我两行而不是 3 行，但是，它的第一组数据重复了两次。
// the table containing the index data
var oTable_2 = "";
// the select row
var nTargetRow = "";
//
//var poid = #CntModVal.porder_id#; //should from + column
//
var aData = ""; // holds the text for selected row (column position is critical)
/* -----------------------------------------------------------------------
Jquery Ajax action scrpts
----------------------------------------------------------------------- */
// Method retrieves the selected row index id and executes the ajax call
function getModDetails()
{
//alert('getModDetails');
// retrieve the data from the selected row
aData = oTable_2.fnGetData( nTargetRow );
//alert('adata[1] ' + aData[1]);
// build the url for the ajax call to use
var cfcUrl = '#application.ajax_url#';
cfcUrl +='RemoteModDetails.cfc?';
cfcUrl += 'method=getPos';
cfcUrl +='&porderid=' + aData[1] ; // contract id
// make the ajax call
$.ajax(
{
type: "GET",
url: cfcUrl,
cache: false,
contentType: "application/json; charset=utf-8",
data: "{}",
dataType: "json",
success: function (objResponse )
{ //alert('retrieve the data step 3');
if(objResponse.SUCCESS)
{ // alert('success');
openModDetailRow(objResponse.DATA);
}
else
{
ShowErrors(objResponse.ERRORS);
}
},
error : function(jqXHR, textStatus, errorThrown ) {
ajaxErrorHandler( jqXHR, textStatus, errorThrown );
}
});
}
// Function ajaxErrorHandler
// DESCRITPION: Error Handler fir the error message for failed ajax call'
// PARAMETERS:
// jqXHR = The jqXHR (in jQuery 1.4.x, XMLHttpRequest) object,
// textStatus = a string describing the type of error that occurred
// and an optional exception object, if one occurred.
// Possible values for the second argument (besides null) are
// "timeout", "error", "abort", and "parsererror".
// errorThrown = the textual portion of the HTTP status, such as "Not Found"
// or "Internal Server Error."
function ajaxErrorHandler( jqXHR, textStatus, errorThrown)
{
alert('Unable to retieve the requested information due to a server error');
}
// Handle the failed response error
function ShowErrors( statusMsg)
{
alert('Unable to retieve the requested information. Status: ' + statusMsg);
}
// create the indormation row based on the data retruned by the ajax call
function openModDetailRow(indexInfo)
{
var sOut = '<table align="left" width="95%" cellpadding="2" cellspacing="0" border="1" class="hiddenTbl ui-widget-content">';
$.each(indexInfo, function(index,data){
/* Assumes only one row returns; additional rows ignored */
var aReqNumID = indexInfo.DATA [0][0]; //requisition number id Award amount
var aPorderID = indexInfo.DATA [0][1]; // purchase order id
var aRequistionNum = indexInfo.DATA [0][2]; // Requisition number description
var aAwardDte = indexInfo.DATA [0][3]; // award date date entered
var aAwardAmount = indexInfo.DATA [0][4]; // date modifified
var aDteEntered = indexInfo.DATA [0][5]; // entered by
var aEnteredBy = indexInfo.DATA [0][6]; // modified by
var aDteMod = indexInfo.DATA [0][7]; // mod number
var aModBy = indexInfo.DATA [0][8]; //
var aValidFlag = indexInfo.DATA [0][9]; //
var aModNum = indexInfo.DATA [0][10]; //
var aDescription = indexInfo.DATA [0][11]; // valid flag
//alert('pop details step 4 ' + aPorderID + ' poid');
// create the additonal information table
// row 1
sOut += '<tr><td><strong>Mod Number:</strong><br> <strong style="color:##FF0;"> ' + aModNum + '</strong></td>';
sOut += '<td><strong>Requsition Numbeer:</strong><br> ' + aRequistionNum + '</td><td><strong> Award Amount:</strong><br> <strong style="color:##FF0;">$' + aAwardAmount.toFixed(2) + '</strong></td></tr>';
// row 2
sOut += '<tr><td ><strong>Award Date:</strong><br>' + aAwardDte + ' </td><td ><strong>Description:</strong><br> ' + aDescription + '</td><td> </td></tr>';
});
// end of table
sOut += '</table>';
// display the row
//alert(sOut);
//alert(index,data);
oTable_2.fnOpen( nTargetRow, sOut, 'details' );
}
/* -----------------------------------------------------------------------
* Jquery Display scrpt
* ----------------------------------------------------------------------- */
$(document).ready(function()
{//alert('insert details step 1');
/*
* Insert a 'details' column to the table
*/
var nCloneTh = document.createElement( 'th' ); // for header
var nCloneThF = document.createElement( 'th' ); // for footer
var nCloneTd = document.createElement( 'td' ); // for body
nCloneTd.innerHTML = '<img src="./images/details_open.png">';
nCloneTd.className = "center";
// add blank header
$('##MVW thead tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
// add blank footer header
$('##MVW tfoot tr').each( function () {
this.insertBefore( nCloneThF, this.childNodes[0] );
} );
// add icon open/close info rowrow
$('##MVW tbody tr').each( function () {
this.insertBefore( nCloneTd.cloneNode( true ), this.childNodes[0] );
} );
// run the jquery data table script
oTable_2 = $('##MVW');
oTable_2.dataTable({
"aoColumnDefs":
[ { "bSortable": false, "aTargets": [ 0 ] } ],
"aaSorting": [[1, 'asc']],
"iDisplayLength": 5,
"aLengthMenu": [[5,10, 25, 50, 100, -1], [5,10, 25, 50, 100, "All"]],
"bJQueryUI": true
});/* end data table */
/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
$('##MVW tbody td img').live('click', function () {
nTargetRow = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{ //alert('close row');
/* This row is already open - close it */
this.src = "./images/details_open.png";
oTable_2.fnClose( nTargetRow );
}
else
{
//alert('open row step 2');
this.src = "./images/details_close.png";
getModDetails();
}
} );
});
/* end ready */
所以我错过了一些东西，无法弄清楚它是什么。如果我将 .each() 放在表格标签之外，它会破坏代码，我什么也得不到。
如果我把它包裹起来:: oTable_2.fnOpen(nTargetRow, sOut, 'details');
我得到一个单行
建议？？？
谢谢你的时间。