نمایش نتایج 1 تا 13 از 13

نام تاپیک: تغییر مقدار یه ستون جدول بدون رفرش شدن صفحه

Hybrid View

پست قبلی پست قبلی   پست بعدی پست بعدی
  1. #1

    تغییر مقدار یه ستون جدول بدون رفرش شدن صفحه

    سلام دوستان

    دوستان من یه جدول دارم که تو هر ستون یه مقداری هست.یکی از ستونها یه تکست باکس هست که مقدارش هر بار تغییر میکنه میخام زمانیکه این مقدار تغییر کرد مقدار جدید محاسبه بشه و تو ستون بعدی نمایش داده بشه.ولی صفحه رفرش نشه
    اینم از کد صفحه من:

    @using (Html.BeginForm("AddGroup", "Admin", FormMethod.Post, new { id = "myForm" }))
    {
    <section id="content">
    <div class="container">
    <div class="row">
    <div class="col-lg-12">
    <table class="table-full table-total">
    <tr>
    <th>
    @Html.DisplayName("قیمت واحد")
    </th>
    <th>
    @Html.DisplayName("تعداد")
    </th>
    <th>
    @Html.DisplayName("قیمت نهایی")
    </th>
    </tr>
    @foreach (var item in Model)
    {
    <tr>
    <td>
    @item.Product.Price.ToString().Trim('0').Trim('.') .ToPrice() تومان
    </td>
    <td>
    @Html.TextAreaFor(modelItem => item.Count, new { @class = "txtCountProduct", style = "width: 40px; ", productid = item.Product.Id })
    </td>
    <td id="total_sum_value">
    @((@item.Count * @item.Product.Price).ToString().Trim('0').Trim('.' ).ToPrice()) تومان
    </td>
    </tr>
    }
    </table>
    </div>
    </div>
    </div>
    </section>
    }



    اینم از کد ajax برای گرفتن تعداد:
     @section Scripts{
    <script src="~/Scripts/AutoNumeric/jquery-price.js"></script>
    <script>
    $(function () {
    $(".txtCountProduct").price();
    $(".deleteProduct").click(function () {
    var id = $(this).attr("productid");
    var img = $(this);
    $.ajax({
    url: "/Home/RemoveCart",
    data: { Id: id },
    type: "Post",
    dataType: "Json",
    success: function (result) {
    if (result.Success) {
    img.parent().parent().hide();
    $("#CartItems").html(result.Html);
    }
    eval(result.Script);
    },
    error: function () {
    alert("خطا!");
    }
    });
    });
    $(".txtCountProduct").change(function () {
    var count = $(this).val();
    var id = $(this).attr("productid");
    $.ajax({
    url: "/Home/AddToCart",
    data: { Id: id, Count: count,t:1 },
    type: "Post",
    dataType: "Json",
    success: function (result) {
    if (result.Success) {
    $("#CartItems").html(result.Html);

    }
    eval(result.Script);
    },
    error: function () {
    alert("خطا!");
    }
    });
    });
    });


    </script>
    }

    عکس های ضمیمه عکس های ضمیمه
    • نوع فایل: jpg ddd.jpg‏ (14.8 کیلوبایت, 43 دیدار)

  2. #2

    نقل قول: تغییر مقدار یه ستون جدول بدون رفرش شدن صفحه

    با استفاده از Angular :
    https://jsfiddle.net/MoienTajik/jvpujfzm/

  3. #3

    نقل قول: تغییر مقدار یه ستون جدول بدون رفرش شدن صفحه

    ممنون
    من برنامه رو طبق کدهای شما تغییر دادم و تا زمانیکه یه کالا هست درست کار میکنه اما اگر چندتا کالا باشه تعداد کالاها به تعداد کالای اول تغییر پیدا میکنه
    ممنون میشم راهنمایی کنید
    کدی که تغییر دادم اینجوریه:
     @Html.TextBoxFor(modelItem => item.Count, new { @class = "txtCountProduct", ng_model = "txtcount", data_ng_init = "txtcount=" + item.Count, style = "width: 40px;", productid = item.Product.Id })
    </td>
    <td id="total_sum_value">
    {{txtcount * @item.Product.Price}}
    </td>


    ddd.jpg

  4. #4

    نقل قول: تغییر مقدار یه ستون جدول بدون رفرش شدن صفحه

    خب شما باید txtcount رو به ازای هر کالا عوض کنید تا در صفحه هر کدوم unique باشن که باهم قاطی نشن ، با یه for میتونید اینکار رو مدیریت کنید ، به txtcount به تعداد کالا ها یک عدد اضافه کنید.

  5. #5

    نقل قول: تغییر مقدار یه ستون جدول بدون رفرش شدن صفحه

    ممنون
    اما من متوجه نمیشم باید چیکار کنم؟اخه تو ویو چطور میتونم این کاری که شما میگین کنترل کنم؟

     @{int i = 1;}
    @foreach (var item in Model)
    {

    <tr>

    <td>
    @item.Product.Price.ToString().Trim('0').Trim('.') .ToPrice() تومان
    </td>
    <td>
    @Html.TextBoxFor(modelItem => item.Count, new { @class = "txtCountProduct", ng_model = "txtCount"+i, data_ng_init = "txtCount"+i+"="+item.Count, style = "width: 40px;", productid = item.Product.Id })
    </td>
    <td id="total_sum_value">
    {{txtCount@(i) * @item.Product.Price}}

    </td>
    </tr>
    i++;
    }


    منظورتون اینجوریه؟داره درست چواب میده ولی واقعیتش منطق کار خودمو نمیفهمم.درسته؟
    آخرین ویرایش به وسیله sara_t : چهارشنبه 22 دی 1395 در 11:29 صبح

  6. #6

    نقل قول: تغییر مقدار یه ستون جدول بدون رفرش شدن صفحه

    نقل قول نوشته شده توسط sara_t مشاهده تاپیک
    ممنون
    اما من متوجه نمیشم باید چیکار کنم؟اخه تو ویو چطور میتونم این کاری که شما میگین کنترل کنم؟

     @{int i = 1;}
    @foreach (var item in Model)
    {

    <tr>

    <td>
    @item.Product.Price.ToString().Trim('0').Trim('.') .ToPrice() تومان
    </td>
    <td>
    @Html.TextBoxFor(modelItem => item.Count, new { @class = "txtCountProduct", ng_model = "txtCount"+i, data_ng_init = "txtCount"+i+"="+item.Count, style = "width: 40px;", productid = item.Product.Id })
    </td>
    <td id="total_sum_value">
    {{txtCount@(i) * @item.Product.Price}}

    </td>
    </tr>
    i++;
    }


    منظورتون اینجوریه؟داره درست چواب میده ولی واقعیتش منطق کار خودمو نمیفهمم.درسته؟
    بله درسته ، دلیلش هم اینه که هر input باید در صفحه unique باشه تا بشه روش محاسبه کرد ، اگر 2 input با name مشابه وجود داشته باشه تشخیص نمیده که برای کدوم محاسبه انجام بشه ، شما با قرار دادن for میاید و هر input رو بهش 1 عدد اضافه میکنید تا مشابه در صفحه نداشته باشه .

    حالا اگر من بخام جمع کل ستون
    <td id="total_sum_value">

    {{txtCount@(i) * @item.Product.Price}}



    </td>
    رو به روش angular بدست بیارم باید چیکار کنم؟ممنون میشم راهنمایی کنید
    یک مثال شبیه چیزی که میخواستید نوشتم براتون :
    http://uplod.ir/97rukckbuifh/ShopTest.zip.htm

  7. #7

    نقل قول: تغییر مقدار یه ستون جدول بدون رفرش شدن صفحه

    حالا اگر من بخام جمع کل ستون
    <td id="total_sum_value">

    {{txtCount@(i) * @item.Product.Price}}



    </td>
    رو به روش angular بدست بیارم باید چیکار کنم؟ممنون میشم راهنمایی کنید

  8. #8

    نقل قول: تغییر مقدار یه ستون جدول بدون رفرش شدن صفحه

    واقعا عالی بود ممنونم

  9. #9

    نقل قول: تغییر مقدار یه ستون جدول بدون رفرش شدن صفحه

    سلام
    من میخاستم زمان حذف کالا هم صفحه رفرش نشه.و کد زیر رو براش نوشتم اما الان زمانیکه یه کالا رو حذف میکنم مجموع خرید رو نمیتونم با آنگولار کنترل کنم ممنون میشم راهنمایی کنید:
    <td>
    <img src="~/Content/img/delete.png" alt="حذف محصول" style="cursor:pointer;" class="deleteProduct" productid="@item.Product.Id" type="deletepr" />
    </td>


    کد HTML:
       $(".deleteProduct").click(function () {
                   
                    var id = $(this).attr("productid");
                    var img = $(this);
                    $.ajax({
                        url: "/Home/RemoveCart",
                        data: { Id: id },
                        type: "Post",
                        dataType: "Json",
                        success: function (result) {
                            if (result.Success) {
                                img.parent().parent().hide();                            
                                $("#CartItems").html(result.Html);
                                location.reload();
                                
                            }
                            
                            eval(result.Script);
                        },
                        error: function () {
                            alert("خطا!");
                        }
                    });
                });
    الان برای درست کار کردن برنامه یه reload اضافه کردم که فکر کنم کار جالبی نباشه.یعنی هر بار یه کالا حذف میشه صفحه رو رفرش میکنم تا مجموع درست بشه

  10. #10

    Thumbs up نقل قول: تغییر مقدار یه ستون جدول بدون رفرش شدن صفحه

    میتونید در رویداد onclick برای دکمه حذف یک function بنویسید شبیه مثالی که فرستادم براتون ; وقتی روی دکمه حذف کلیک شد ، دوباره مجموع رو حساب کنه ( دریافت مجموع فعلی و کم کردن قیمت کالای کلیک شده برای حذف ازش ) و html مجموع رو با jquery تغییر بده .

  11. #11

    نقل قول: تغییر مقدار یه ستون جدول بدون رفرش شدن صفحه

     <script>
    $(document).ready(function(){
    $("#myTable").on('click','.deleteProduct',function (){
    var currentRow=$(this).closest("tr");
    var col4=currentRow.find("td:eq(4)").html();
    var lresult= $("#lastResult").text();
    lresult=lresult-col4;
    $("#lastResult").text(lresult)
    });
    });
    </script>


    اینجوری مشکل رو حل کردم ممنون

  12. #12

    نقل قول: تغییر مقدار یه ستون جدول بدون رفرش شدن صفحه

    فقط یه سوال
    من برای هر فرخوانی هی هر بار یه اسکریپت مینویسم.از اونجایی که تازه کارم این روشم درسته؟
    من کد کامل اسکریپتهام رو میذارم.بنظرتون شلوغ و بد نیس؟راهی برای درست شدن داره؟منظورم از لحاظ درست نوشتن و سرعت کار هست
    @section Scripts
    {
    <script src="~/Scripts/angular.js">
    </script>
    <script src="~/Scripts/AutoNumeric/jquery-price.js"></script>
    <script>
    $(function () {
    $(".txtCountProduct").price();
    $(".deleteProduct").click(function () {
    var id = $(this).attr("productid");
    var img = $(this);

    $.ajax({
    url: "/Home/RemoveCart",
    data: { Id: id },
    type: "Post",
    dataType: "Json",
    success: function (result) {
    if (result.Success) {
    img.parent().parent().hide();
    $("#CartItems").html(result.Html);
    // location.reload();

    }
    eval(result.Script);
    },
    error: function () {
    alert("خطا!");
    }
    });
    });
    $(".txtCountProduct").change(function () {
    var count = $(this).val();
    var id = $(this).attr("productid");
    $.ajax({
    url: "/Home/AddToCart",
    data: { Id: id, Count: count,t:1},
    type: "Post",
    dataType: "Json",
    success: function (result) {
    if (result.Success) {
    $("#CartItems").html(result.Html);
    }
    eval(result.Script);
    },
    error: function () {
    alert("خطا!");
    }
    });
    });
    });

    </script>
    <script>
    $(document).ready(function() {
    function checkSum() {
    var sum = 0;
    var lastItemId = @Model.Count;
    for (var i = 1; i <= lastItemId; i++) {

    sum += Number($("#lastPrice" + i).text());
    }

    $("#lastResult").text(sum);
    }
    checkSum();
    $("input[type='number']").click(function() {
    checkSum();
    });
    $("input[type='number']").keyup(function() {
    checkSum();
    });
    });
    var app = angular.module("shopApp", []);
    app.controller("HomeController", function($scope) {
    });
    </script>
    <script>
    $(document).ready(function(){
    $("#myTable").on('click','.deleteProduct',function (){
    var currentRow=$(this).closest("tr");
    var col4=currentRow.find("td:eq(4)").html();
    var lresult= $("#lastResult").text();
    lresult=lresult-col4;
    $("#lastResult").text(lresult)
    });
    });
    </script>
    }


  13. #13

    نقل قول: تغییر مقدار یه ستون جدول بدون رفرش شدن صفحه

    درست هست اشکال نداره ، میتونید برای مرتب شدن بیشتر کدتون ، کدهارو داخل یه فایل js دیگه بریزید و جدا فراخانی کنید .
    برای سرعت هم minify و bundling یادتون نره .

تاپیک های مشابه

  1. سوال: تغيير Theme بدون رفرش شدن صفحه
    نوشته شده توسط bftarane در بخش jQuery
    پاسخ: 12
    آخرین پست: یک شنبه 18 فروردین 1392, 10:19 صبح
  2. سوال: تغییر عکس بصورت خودکار بدون رفرش شدن صفحه
    نوشته شده توسط modern_amin در بخش ASP.NET Web Forms
    پاسخ: 8
    آخرین پست: سه شنبه 03 آبان 1390, 08:11 صبح
  3. گرفتن اطلاعات از فرم بدون رفرش شدن صفحه
    نوشته شده توسط .fatemeh در بخش JavaScript و Framework های مبتنی بر آن
    پاسخ: 2
    آخرین پست: دوشنبه 06 دی 1389, 00:03 صبح
  4. سوال: رفرش شدن عکس روی سرور بدون رفرش شدن صفحه
    نوشته شده توسط khazaie01 در بخش طراحی وب (Web Design)
    پاسخ: 16
    آخرین پست: شنبه 24 مرداد 1388, 16:21 عصر
  5. نمایش تعداد پیغام های رسیده بدون رفرش شدن صفحه
    نوشته شده توسط jannati در بخش ASP.NET Web Forms
    پاسخ: 4
    آخرین پست: چهارشنبه 05 مهر 1385, 13:33 عصر

قوانین ایجاد تاپیک در تالار

  • شما نمی توانید تاپیک جدید ایجاد کنید
  • شما نمی توانید به تاپیک ها پاسخ دهید
  • شما نمی توانید ضمیمه ارسال کنید
  • شما نمی توانید پاسخ هایتان را ویرایش کنید
  •