我们有一个包含删除按钮的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对象中的数据会保留更新,因此将正确的数据提交到操作页面。