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