削除ボタンを含む cfGrid セットアップがあります。グリッドの残りの機能、アップロードされたスプレッドシートからのデータの読み込み、およびデータの編集はすべて正常に機能します。ただし、削除ボタンの動作は非常に奇妙です。行は削除されず、グリッドに対して行ったすべての更新が取り消されているように見えます。
コードの関連部分の一部を次に示します。
<script>
<!--- This converts the query (which was generated by the XLS file) into a WDDX object, which can be easily edited by JS and easily serialized for submission to the processing cfm. --->
<cfwddx action="cfml2js" input="#xlsData#" topLevelVariable="xlsData">
<!--- Each time the grid is updated this JS function updates the WDDX object in memory. --->
function gridChange(cfgridaction, cfgridrow, cfgridchanged) {
for (var element in cfgridchanged) {
xlsData.setField(cfgridrow.CFGRIDROWINDEX-1, element, cfgridchanged[element])
}
}
<!--- Upon submission we serialize the WDDX object into a string, add it to a hidden form field, and then pass it to the processing template to be inserted into the database. --->
function storeArrayForSubmit() {
wddxSerializer = new WddxSerializer();
wddxPacket = wddxSerializer.serialize(xlsData);
document.getElementById('gridData').value = wddxPacket;
document.getElementById('updateForm').submit();
}
</script>
<!--- This form is only for the grid. We do not keep everything in the same form as we would then be double submitting data, once in the grid and once in the WDDX string. --->
<cfform action="">
<cfgrid name="thisGrid"
format="html"
query="xlsData"
title="Edit Uploaded Data"
striperows="yes"
selectmode="edit"
delete="yes"
onchange="javaScript:gridChange({cfgridaction},
{cfgridrow},
{cfgridchanged})">
<cfloop list="#gridColumns#" index="fieldName">
<cfgridcolumn name="#fieldName#" header="#fieldName#" width="200" select="Yes" />
</cfloop>
</cfgrid>
<p>
<input type="button" value="Save Changes" name="submit" onClick="storeArrayForSubmit();" />
</cfform>
<!--- This form actually submits the data to the action page --->
<form id="updateForm" action="manualUploadComplete.cfm" method="post">
<input type="hidden" id="uploadedFileName" name="uploadedFileName" value="#uploadedFileName#" />
<input type="hidden" id="table" name="table" value="#form.table#" />
<input type="hidden" id="columnList" name="columnList" value="#form.columnList#" />
<input type="hidden" id="tableColumnList" name="tableColumnList" value="#form.tableColumnList#" />
<input type="hidden" id="primaryKeyList" name="primaryKeyList" value="#form.primaryKeyList#" />
<input type="hidden" id="gridData" name="gridData" value="" />
</form>
この時点では、データベースの関与はありません。xls ファイルがアップロードされて読み取られ、そのデータが編集用に画面に表示されます。次に、すべてのデータベースの挿入と更新を行う次のページにすべてを一度に送信します。
削除ボタンが押されると、行は選択解除されますが、グリッドからは削除されません。グリッドで行われたすべての更新は、グリッドが最初にロードされた時点に戻ります。ただし、wddx オブジェクトのデータは更新を保持するため、正しいデータがアクション ページに送信されます。