javascript - jQuery，Asp.net -jAutoCalc:使用jQuery在要添加到表格中的表单上实现自动计算

好吧，我正在做我的小项目的销售和计费部分。左侧表显示库存水平的地方，双击任何行，左侧的表格就会出现，如图所示。

但是用户必须能够指定数量。因此，在插入所需数量时，应自动计算amt列（数量*比率）。

刚开始，我实现了jQuery的“ keyup”功能，但是没有用。然后我尝试实现angularjs，但失败了。然后我发现了这个jAutoCalc插件，它也不起作用。

我用简单的形式测试了所有这三个，它们运行良好。但是，当我对要通过jQuery生成的表单应用相同的逻辑时，基于click事件，它根本不起作用。

自6个小时以来，我一直在为此苦苦挣扎。请帮帮我。如果有任何适当的方法来实现angularjs或jAutoCalc，请告诉我。

@model IEnumerable<FYPPharmAssistant.Models.InventoryModel.Stock>
....
<script src="~/Scripts/jAutoCalc.js"></script>

@using (Html.BeginForm())
{
    <table class="table table-hover" id="maintable">
        <thead>
            ....
        </thead>
        @foreach (var item in Model)
        {
            <tr class="rows">
                <td>@Html.DisplayFor(modelItem => item.ID)</td>
                <td>@Html.DisplayFor(modelItem => item.Item.Name)</td>
                <td>@Html.DisplayFor(modelItem => item.Item.DrugGenericName.GenericName)</td>
                <td>@Html.DisplayFor(modelItem => item.Qty)</td>
                <td>@Html.DisplayFor(modelItem => item.SellingPrice)</td>
            </tr>
        }
    </table>
}

<!-- Rows to be appended using jQuery-->
<table id="tblAppendHere" name="table1" class="table table-condensed">
    <thead>
        ....
    </thead>
    <tbody>

    </tbody>
</table>

剧本

<script type="text/javascript" >
<!--
    function autoCalcSetup() {
        $('form[name=table1]').jAutoCalc('destroy');
        $('form[name=table1] tr[name=row1]').jAutoCalc({ keyEventsFire: true, decimalPlaces: 2, emptyAsZero: true });
        $('form[name=table1]').jAutoCalc({ decimalPlaces: 2 });
    }
    autoCalcSetup();
//-->

//gets data from table row and populates in the form.
document.getElementById('maintable').ondblclick = function (event) {
    event = event || window.event;
    var target = event.target || event.srcElement;
    while (target && target.nodeName != 'TR') {
        target = target.parentElement;
    }
    var cells = target.cells;
    if (!cells.length || target.parentNode.nodeName == 'THEAD') {
        return;
    }

    //appends a table row with for each record dblclick
    var $table = $('#tblAppendHere');
    $table.append(
        '<tr name="row1">' +
        '<td><input type="hidden" name="ID1"  value= "' + cells[0].innerHTML + '"/>#' + '</td>' +
        '<td><input type="hidden" name="Name1"  value= "' + cells[1].innerHTML + '"/>' + cells[1].innerHTML + '</td>' +
        '<td><input type="text" id="qty1" name="Qty1"   style="width:60px;"/>' + '</td>' +
        '<td><input type="hidden" id="rate1" name="Rate1"  value= "' + cells[4].innerHTML + '"/>' + cells[4].innerHTML + '</td>' +
        '<td><input type="text" style="width:90px;" id="amt1"  name="Amount1" value="" jAutoCalc="{Qty} * {Rate}" />' + '</td>' +
        '<td><a href="#" class="glyphicon glyphicon-remove" onclick="removeItem(this)"></a></td>'
        +'</tr>'
    );
}
//removes row
function removeItem(obj) {
    $obj = $(obj).parent().parent().remove();
};

        </script>

最后，在客户端，我想要类似以下内容：
演示链接：http://c17r.github.io/jAutoCalc/sample.html

最佳答案

您当前的实施无法正常运行的原因有很多，其中包括


动态添加输入的第二张表不在
表单元素，因此在您提交时不会回发到控制器
即使您解决了此问题，您创建的控件也会重复
没有索引器的name属性，因此将无法绑定到
您提交的模型（使用FormCollection不会
由于难以匹配值而提供帮助）
由于重复的id属性，您生成的无效html


如果您确实想将其作为单独的表格进行操作，则this answer的第二部分将为您提供有关创建输入的指导，以便正确绑定输入。但是，一种更简单的解决方案是仅在表中为Quantity和Amount添加其他列。创建视图模型进行编辑

public class PurchaseVM
{
  [Display(Name = "Stock ID")]
  public int ID { get; set; }
  public string Item { get; set; }
  [Display(Name = "Generic Name")]
  public string Name { get; set; }
  public int Stock { get; set; }
  [DisplayFormat(DataFormatString = "{0:0.00")]
  public decimal Rate { get; set; }
  public int Quantity { get; set; }
  [DisplayFormat(DataFormatString = "{0:0.00")]
  public decimal Amount { get { return Quantity * Amount; } }
}

在控制器的GET方法中，将数据模型映射到视图模型

public ActionResult Edit()
{
  IEnumerable<Stock> stock = .....
  IEnumerable<PurchaseVM> model = stock.Select(s => new PurchaseVM()
  {
    ID = s.ID,
    Item = s.Item.Name,
    Name = s.Item.DrugGenericName.GenericName,
    Stock = s.Qty,
    Rate = s.SellingPrice
  });
  return View(model);
}

然后创建一个EditorTemplate以显示表中的每一行。在/Views/Shared/EditorTemplates/PurchaseVM.cshtml中

@model yourAssembly.PurchaseVM
<tr>
  <td>@Html.DisplayFor(m => m.ID)</td>
  <td>@Html.DisplayFor(m => m.Item)</td>
  <td>@Html.DisplayFor(m => m.Name)</td>
  <td>@Html.DisplayFor(m => m.Stock)</td>
  <td>@Html.DisplayFor(m => m.Rate)</td>
  <td>
    @Html.HiddenFor(m => m.ID)
    @Html.TextBoxFor(m => m.Quantity, new { @class = "quantity" })
  </td>
  <td>@Html.DisplayFor(m => m.Amount)</td>
</tr>

并认为

@model IEnumerable<yourAssembly.PurchaseVM>
@using (Html.BeginForm())
{
  <table>
    <thead>
      <tr>
        <td>@Html.DisplayNameFor(m => m.ID)</td>
        ..... // other headings
      </tr>
    </thead>
    <tbody id="items">
      @Html.EditorFor(m => m)
    </tbody>
    <tfoot>
      <tr>
       <td>Total<td>
       ....
       <td id="total"><td>
      </tr>
    </tfoot>
  </table>
  <input type="submit" />
}

并添加脚本以更新金额和总金额

var rows = $('.items tr');
var totalCell = $('#total');
$('.quantity').change(function() {
  var cells = $(this).closest('tr').children('td');
  var quantity = Number($(this).val());
  var stock = Number(cells.eq(3).text());
  var rate = Number(cells.eq(4).text());
  // prevent entering a quantity greater than the available stock
  if(quantity > available) {
    $(this).val(available);
    quantity = available;
  }
  // calculate the total
  var amount = (quantity * rate).toFixed(2);
  cells.eq(6).text(amount);
  var total = Number();
  $.each(rows, function(index, item) {
    total += Number($(this).children('td').eq(6).text());
  });
  totalCell.text(total.toFixed(2));
});

最后，您的POST方法

public ActionResult Edit(IEnumerable<PurchaseVM> model)
{
  var purchasedItems = model.Where(m => m.Quantity > 0);
  // save the data and redirect
}

有关脚本如何工作的示例，请参见this fiddle