这几天遇到这样一个需求,列表显示如下:
要求输入费用的同时,右下角动态显示当前费用总和。
最后一行是在绑定列表时拼接的一行,代码如下:
if (dv.Table.Rows.Count > 0)
{
int count = this.lpdgPlanFeeList.Rows.Count;
this.lpdgPlanFeeList.Rows[count - 1].Cells[0].Text = "借用总额: " + ds.Tables["RSumFee"].Rows[0]["SumPlanFee"].ToString() + " 元";
this.lpdgPlanFeeList.Rows[count - 1].Cells[0].ID = "totalFee";
this.lpdgPlanFeeList.Rows[count - 1].Cells[1].Visible = false;
this.lpdgPlanFeeList.Rows[count - 1].Cells[2].Visible = false;
this.lpdgPlanFeeList.Rows[count - 1].Cells[3].Visible = false;
this.lpdgPlanFeeList.Rows[count - 1].Cells[4].Visible = false;
this.lpdgPlanFeeList.Rows[count - 1].Cells[0].ColumnSpan = lpdgPlanFeeList.Columns.Count+1;
this.lpdgPlanFeeList.Rows[count - 1].Cells[0].HorizontalAlign = HorizontalAlign.Right;
this.lpdgPlanFeeList.Rows[count - 1].Cells[0].ForeColor = System.Drawing.Color.Red;
}
源文件中显示如下:
该列表前台代码如下:
<asp:TemplateField HeaderText="预计费用(元)" ItemStyle-HorizontalAlign="Center">
<HeaderTemplate>
预计费用(元)<span style="color: Red;">*</span>
</HeaderTemplate>
<ItemStyle Width="15%" HorizontalAlign="Center" />
<ItemTemplate>
<asp:TextBox ID="tbPlanFee" runat="server" class="kpms-textbox-money" EnableTheming="false"
Text='<%#Eval("PlanFee","{0:F2}") %>' CausesValidation="False" onchange="return TotaleFee();"></asp:TextBox>
<asp:Label ID="lbParamFeeTypeID" runat="server" Visible="false" Text='<%#Eval("ParamFeeTypeID")%>'></asp:Label>
<asp:RegularExpressionValidator ID="revtbPlanFee" runat="server" ErrorMessage="费用必须为数字"
ControlToValidate="tbPlanFee" ValidationExpression="^([0-9]{0,6})(\.\d{1,6})?$">*</asp:RegularExpressionValidator>
</ItemTemplate>
</asp:TemplateField>
当费用信息改变时调用js函数:
<script type="text/javascript" language="javascript">
<script type="text/javascript" language="javascript">
function TotaleFee() {
var i = 0;
var j = 0;
var totalFee = 0.0;
var feeList = document.getElementById("<%=lpdgPlanFeeList.ClientID %>");
var tag = feeList.getElementsByTagName("input");
while (i < tag.length) {
if (tag[i].type == "text") {
if (tag[i].id.indexOf("tbPlanFee") > 0) {
if (parseFloat(tag[i].value)>0) { //若不添加此判断,则当有些行的费用列为空时,费用总和显示为NaN
totalFee += parseFloat(tag[i].value);
}
}
}
i++;
}
var tagtd = feeList.getElementsByTagName("td");
while (j < tagtd.length) {
if (tagtd[j].id.indexOf("totalFee") > 0) {
tagtd[j].innerText = "借用总额: " + totalFee + " 元";
}
j++;
}
}
</script></script>