محاسبه تعداد کل در حال اجرا GridView با استفاده از jQuery در ASP.Net
با سلام در این مقاله با یک مثال توضیح خواهیم داد ، چگونه می توان Running جمع کل را با استفاده از jQuery در ASP.Net GridView محاسبه کرد.
هر ردیف GridView حاوی Quantity TextBox است که به رویداد handler در OnChange و OnKeyUp اختصاص داده شده است و یک برچسب برای نمایش جمع کل در حال اجرا در ردیف GridView و برچسب زیر GridView برای جمع کل وجود دارد.
کد HTML
کد HTML از GridView با دو ستون BoundField و دو ستون TemplateField تشکیل شده است.
ستون اول TemplateField شامل یک TextBox برای وارد کردن Quantity است در حالی که ستون دوم TemplateField شامل یک برچسب برای نمایش ردیف جمع کل است.
در زیر GridView ، یک برچسب برای نمایش جمع کل وجود دارد.
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
<Columns>
<asp:BoundField DataField="Item" HeaderText="Item" />
<asp:BoundField DataField="Price" HeaderText="Price" ItemStyle-CssClass="price" />
<asp:TemplateField HeaderText="Quantity">
<ItemTemplate>
<asp:TextBox ID="txtQuantity" runat="server"></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Total">
<ItemTemplate>
<asp:Label ID="lblTotal" runat="server" Text="0"></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
Grand Total:
<asp:Label ID="lblGrandTotal" runat="server" Text="0"></asp:Label>
فضا های نام
شما باید نامهای زیر را وارد کنید.
اتصال کنترل GridView
GridView با یک DataTable پویا با برخی از داده های ساختگی در داخل رویداد بارگذاری صفحه جمع شده است.
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Item"), new DataColumn("Price") });
dt.Rows.Add("Shirt", 200);
dt.Rows.Add("Football", 30);
dt.Rows.Add("Bat", 22.5);
GridView1.DataSource = dt;
GridView1.DataBind();
}
محاسبه جمع کل در حال اجرا با استفاده از jQuery
در داخل رویداد handlerبرای ایجاد document jQuery ، به تمام مقدارهای TextBox در GridView مقدار صفر اختصاص داده می شود.
سپس به هر مقدار TextBox در GridView به گردانندگان رویداد OnChange و OnKeyUp اختصاص داده می شود.
در داخل رویداد handler در OnChange و OnKeyUp ، ابتدا مقدار عدد Float معتبر بررسی می شود و اگر معتبر باشد تعداد Float برای دریافت ردیف جمع کل با مقدار ستون قیمت چند برابر است که بعداً در برچسب جمع کل در ردیف GridView مربوطه نمایش داده می شود.
سپس یک حلقه بر روی تمام برچسب ها در GridView اجرا می شود وجمع کل نهایی محاسبه می شود که بعداً در برچسب جمع کل نهایی نمایش داده می شود.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=txtQuantity]").val("0");
});
$("body").on("change keyup", "[id*=txtQuantity]", function () {
//Check whether Quantity value is valid Float number.
var quantity = parseFloat($.trim($(this).val()));
if (isNaN(quantity)) {
quantity = 0;
}
//Update the Quantity TextBox.
$(this).val(quantity);
//Calculate and update Row Total.
var row = $(this).closest("tr");
$("[id*=lblTotal]", row).html(parseFloat($(".price", row).html()) * parseFloat($(this).val()));
//Calculate and update Grand Total.
var grandTotal = 0;
$("[id*=lblTotal]").each(function () {
grandTotal = grandTotal + parseFloat($(this).html());
});
$("[id*=lblGrandTotal]").html(grandTotal.toString());
});
</script>