我正在使用jQuery Datatable插件用于网格目的。当我单击网格中的一行时，我想将行的详细信息绑定到同一页面上的输入，具体取决于存储在行中的ID。你能给我一个clickevent吗？以下是我的代码。当我点击一行时，我得到以下错误“元素的绑定值：expenseList.value必须是一个简单的值。找不到元素：ID”
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mo Rentals using CFGRID</title>
<link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
<link rel="stylesheet" type="text/css" href="css/dataTableStyles.css" />
<link type="text/css" href="css/jquery-ui-1.8.4.custom.css" rel="stylesheet" />
$(document).ready( function () { $('#expenseList').dataTable(); } );
</head>
<body>
Filter From: To:
Date Machine Operator Name Income Expenditure Profit
image #DATEFORMAT(results.hireDate, "mm/dd/yyyy")# #results.machineNumber# #results.fullname# UGX #NumberFormat(results.revenue, ',')# UGX #NumberFormat(results.expense, ',')# UGX #NumberFormat(results.subTotal, ',')# image
<cfform> Distance Moved: <cfinput type="text" name="distanceMoved" id="distanceMoved" readonly="true"> </cfform>
// The plugin function for adding a new filtering routine
$.fn.dataTableExt.afnFiltering.push(
function(oSettings, aData, iDataIndex)
{
var dateStart = parseDateValue($("#dateStart").val());
var dateEnd = parseDateValue($("#dateEnd").val());
// aData represents the table structure as an array of columns, so the script access the date value
// in the first column of the table via aData[0]
var evalDate= parseDateValue(aData[1]);
if (evalDate >= dateStart && evalDate <= dateEnd) { return true; } else { return false; }
});
// Function for converting a mm/dd/yyyy date value into a numeric string for comparison (example 08/12/2010 becomes 20100812
function parseDateValue(rawDate) {
var dateArray= rawDate.split("/");
var parsedDate= dateArray[2] + dateArray[0] + dateArray[1];
return parsedDate;
}
$(function()
{
// Implements the dataTables plugin on the HTML table
var $dTable= $("table.dataTablesTable").dataTable( { "iDisplayLength": 200, "bStateSave": false, "oLanguage": { "sLengthMenu": 'Show <select>2550100200 entries' }, "aaSorting": [[0,'asc']], "aoColumns": [ { "sType": "date" }, null, null ] });
// The dataTables plugin creates the filtering and pagination controls for the table dynamically, so these
// lines will clone the date range controls currently hidden in the baseDateControl div and append them to
// the feedbackTable_filter block created by dataTables $dateControls=
$("#baseDateControl").children("div").clone();
$("#feedbackTable_filter").prepend($dateControls);
// Implements the jQuery UI Datepicker widget on the date controls
$('.datepicker').datepicker( {showOn: 'button', buttonImage: 'assets/dateIcon.png', buttonImageOnly: true} );
// Create event listeners that will filter the table whenever the user types in either date range box or
// changes the value of either box using the Datepicker pop-up calendar
$("#dateStart").keyup ( function() { $dTable.fnDraw(); } );
$("#dateStart").change( function() { $dTable.fnDraw(); } );
$("#dateEnd").keyup ( function() { $dTable.fnDraw(); } );
$("#dateEnd").change( function() { $dTable.fnDraw(); } );
});
<cfajaxproxy bind="javascript:getExpense({expenseList@click})"> <cfajaxproxy cfc="CFCs.crud" jsclassname="dataproxy">
function getExpense() { var ID = ColdFusion.getElementValue("ID") if(isNaN(ID)) return dataService.getExpense(ID) } function showData(d) { //convert into a struct var data = {} for(var i=0; i < d.COLUMNS.length; i++) { data[d.COLUMNS[i]] = d.DATA[0][i] } document.getElementById('distanceMoved').value = data["distanceMoved"] } var dataService = new dataproxy() dataService.setCallbackHandler(showData)
</body>
</html>