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

محاسبه تعداد کل در حال اجرا GridView با استفاده از jQuery در ASP.Net
0 0
محاسبه تعداد کل در حال اجرا 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>

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

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
در داخل رویداد 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>

 


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

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