توضیحات و دانلود

استفاده از jQuery در محاسبه مجموع ردیف و مجموع کل در GridView با ASP.Net
0 0
استفاده از jQuery در محاسبه مجموع ردیف و مجموع کل در GridView با ASP.Net

با سلام در این مقاله با مثال توضیح خواهیم داد که چگونه مجموع ردیف و مجموع کل را با استفاده از jQuery در ASP.Net GridView محاسبه کنید.
هر ردیف GridView حاوی یک مقدار TextBox است که تعیین کننده رویداد OnChange و OnKeyUp است و یک برچسب برای مجموع ردیف و یک برچسب GridView برای مجموع کل وجود دارد.
کد HTML
کد HTML شامل یک GridView با دو ستون BoundField و دو ستون TemplateField است.
ستون اول TemplateField شامل یک TextBox برای وارد کردن مقدار است در حالی که ستون دوم 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>

فضاهای نام
شما باید فضای نامی را وارد کنید.

using System.Data;

اتصال به کنترل 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
درون جعبه ابزار document ready برای جی کوئری، تمام TextBox ها در GridView مقدار صفر تعیین می شوند.
سپس هر مقدار TextBox در GridView در کنترل های رویداد OnChange و OnKeyUp قرار می گیرد.
درون رویداد OnChange, handler  و OnKeyUp ابتدا مقدار برای اعداد شناور معتبر بررسی می شود .
سپس یک حلقه بر روی تمام برچسب ها در GridView اجرا می شود و مقدار Grand Total محاسبه می شود که بعدا در کل برچسب بزرگ نمایش داده می شود.

<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>

 


دانلود
  • لینک های دانلود دوره های آموزشی تا پایان دوره قابل دانلود می باشد.
  • برای خارج کردن فایل ها از حالت فشرده از ورژن جدید نرم افزار winrar استفاده کنید.
  • برای خارج کردن فایل ها از حالت فشرده لینک های دانلودی که چندین قسمت می باشند فقط قسمت اول را از حالت فشرده خارج کنید.
  • لطفا توضیحات نوشته شده برای مطالب را با دقت بخوانید.
  • برای نمایش فیلم ها می توانید از نرم افزار هایی مانند Km Player , VLC Player یا Media Player Classic استفاده کنید.

ارسال نظر
ارسال پیام به :