我有一个包含产品详细信息的gridview,以及我添加的数量文本框 - 它没有连接到任何数据库。 我希望它为每一行显示所有行的成本(价格*数量)和总成本(在下面的标签中)。 我有一些问题。 1.它在数量文本框中输入0,所以我需要一直将数量更新为1,然后计算。
我也知道也许这可以在rowdataboundevent的C#中做得更好,建议将不胜感激。
请帮助我解释出错了什么。 这是代码:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=lblquantity]").val("0");
});
$("[id*=lblquantity]").live("change", function () {
if (isNaN(parseInt($(this).val()))) {
$(this).val('0');
} else {
$(this).val(parseInt($(this).val()).toString());
}
});
$("[id*=lblquantity]").live("keyup", function () {
if (!jQuery.trim($(this).val()) == '') {
if (!isNaN(parseFloat($(this).val()))) {
var row = $(this).closest("tr");
$("[id*=lblTotal]", row).html(parseFloat($(".price", row).html()) * parseFloat($(this).val()));
}
} else {
$(this).val('');
}
var grandTotal = 0;
$("[id*=lblTotal]").each(function () {
grandTotal = grandTotal + parseFloat($(this).html());
});
$("[id*=lblGrandTotal]").html(grandTotal.toString());
$("[id*=hfGrandTotal]").val(grandTotal.toString())
});
</script>
这是ASP.net中gridview的代码。
<asp:HiddenField ID="hfGrandTotal" runat="server" />
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False"
EnableViewState="False" onrowdatabound="GridView2_RowDataBound">
<Columns>
<asp:BoundField DataField="Price" HeaderText="Price" ItemStyle-CssClass="price" >
<ItemStyle CssClass="price"></ItemStyle>
</asp:BoundField>
<asp:TemplateField HeaderText="ProductID">
<ItemTemplate>
<asp:Label ID="lblID" runat="server" Text='<%# Eval("ProductID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="ProductName">
<ItemTemplate>
<asp:Label ID="lblName" runat="server" Text='<%# Eval("ProductName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Summary">
<ItemTemplate>
<asp:Label ID="lblSum" runat="server" Text='<%# Eval("Summary") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="picPath">
<ItemTemplate>
<asp:Label ID="lblPic" runat="server" Text='<%# Eval("picPath") %>' ></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText = "quantity">
<ItemTemplate>
<asp:TextBox ID="lblquantity" runat="server" ></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText = "Total">
<ItemTemplate>
<asp:Label ID="lblTotal" runat="server" ></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
感谢名单
答案 0 :(得分:1)
进行这些更改
步骤1。将价格设为asp:TemplateField
并将类添加到此lblTotal
。数量也应该是你写的标记中的文本框吗?
<asp:TemplateField HeaderText="Price">
<ItemTemplate>
<asp:Label ID="lblPrice" runat="server" CssClass="rowprice"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Quantity">
<ItemTemplate>
<asp:TextBox ID="txtQuantity" runat="server" CssClass="rowqty" Text="1">
</asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Total">
<ItemTemplate>
<asp:Label ID="lblTotal" runat="server" CssClass="rowtotal"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
第二步。下载此numeric plugin并在DOMReady上写下
$(document).ready(function() {
$(".rowqty").numeric({
decimal: false,
negative: false
});
});
这是为了使数量文本框仅接受正整数。
步骤3。
protected void GridView2_RowDataBound(Object sender, GridViewRowEventArgs e)
{
if(e.Row.RowType == DataControlRowType.DataRow)
{
var priceLabel = e.Row.FindControl("lblPrice") as Label;
var quantityTextBox = e.Row.FindControl("txtQuantity") as TextBox;
var totalLabel = e.Row.FindControl("lblPrice") as Label;
var onKeyUpScript = String.Format(
"javascript:CalculateRowTotal('#{0}', '#{1}', '#{2}');",
quantityTextBox.ClientID,
priceLabel.ClientID,
totalLabel.ClientID);
quantityTextBox.Attributes.Add("onkeyup", onKeyUpScript);
}
}
步骤3。使用asp:HiddenField
asp:Label
和ClientIDMode="Static"
<asp:HiddenField ID="hfGrandTotal" runat="server"></asp:HiddenField>
Grand Total: <asp:Label ID="lblGrandTotal" runat="server"></asp:Label>
步骤4。在页面上添加javascript函数
function CalculateRowTotal(qty_id, price_id, total_id) {
var row_quantity = $(qty_id);
var row_price = $(price_id);
var row_total = $(total_id);
var qty = parseInt($.trim($(this).val()), 10);
if (isNaN(qty) || qty === 0) {
qty = 1;
row_quantity.val("1");
}
var totalAmount = parseFloat(row_price.html()) * qty;
row_total.html(totalAmount);
var grandTotal = 0;
$(".rowtotal").each(function() {
grandTotal += parseFloat($(this).html());
});
$("#hfGrandTotal").val(grandTotal);
$("#lblGrandTotal").html(grandTotal);
}
希望这有帮助。
答案 1 :(得分:0)
我不会在JS中这样做,因为这是客户端加载+更慢。
按照你在RowDataBound中的说法填写。你的将在GridView2_RowDataBound中。
只需找到控件并将其转换为正确的控件并填充文本。
((Label)e.Row.FindControl("lblTotal")).Text = (price * quantity);
您可能已经在dataItem中存储了价格和数量。
我认为您还必须将其转换为字符串,因为.Text需要一个字符串。
你可以用
(price * quantity).ToString()
或
Convert.ToString(price * quantity);