复制控件

Question

我使用Kendo UI创建了一些控件的界面。这是一个数字，文本框和下拉列表。它的作用是通过按下“+”按钮创建自己的许多副本，并通过按下它的“ - ”按钮删除一行。

{% extends "saloons/templates/base.html" %}
{% from "ui/forms/macro.html" import wtform %}
{% block content %}
  <form method="POST" action="">
    <table>
        <tr>
            <td>{{ form.order_date.label }}</td>
            <td>{{ form.order_date }}</td>
        </tr>
    </table>
  <div id="grid-users"  class="grid-content" style="text-align: center; width: 100%!important">
      <table id="grid">
    <thead>
      <tr>
        <th data-field="number" style="text-align: center">Nro.</th>
        <th data-field="item" style="text-align: center">Articulo</th>
        <th data-field="staff" style="text-align: center">Usuario</th>
        <th data-field="button" style="text-align: center">Añadir/Remover</th>
      </tr>
    </thead>
    <tbody id="pedidos">
      <tr>
        <td>1.</td>
        <td>{{ form.item }}</td>
        <td>{{ form.staff }}</td>
        <td><button type="button" id="add_textbox">+</button></td>
      </tr>
    </tbody>
      </table>
      <center>
     <div class="buttons">{{ form.save }}</div>
      </center>
  </div>
  </form>
<script type="text/javascript">
    $(function() {
        $("#save").attr('class','k-button');
        $("#c0").attr('class', 'k-input');
        var sel = $("#t0").clone();
        var sel2 = $("#c0").clone();
        var i = 1;
        var data = "{{ inventory }}".replace("[", "").replace("]", "");
                var a = data.split(",");
                for(j=0;j<a.length;j++)
                {
                  if(j == 0){
                   a[j] = a[j].substring(2,a[j].length -1);
                  }
                  else
                  {
                    a[j] = a[j].substring(3,a[j].length -1);
                  }
                }
        $("#add_textbox").attr('class', 'k-button');
        $("#add_textbox").live('click', function() {               
            i++;
            $("#pedidos").append('<tr>' +
                        '<td>'+ i +'. </td>' +
            '<td id="c'+ i +'"></td>' +
            '<td id="t'+ i +'"></td>' +
            '<td><button type="button" rel="del" class="k-button">-</button></td>' +
            '</tr>');
            $(sel2).attr('id',"tc"+i);
            $(sel).attr('id',"ts"+i);
            $(sel2).appendTo("#c"+i);
            $(sel).appendTo("#t"+i);
            $("#tc"+i).css('width', 180);
            $("#tc"+i).kendoAutoComplete({
                   dataSource: a
                        });
            sel = $(sel).clone();
            sel2 = $(sel2).clone();
            $("#ts"+i).css('width', 270);
            $("#ts"+i).kendoDropDownList();
        });

                $("button[rel=del]").live('click', function() {
                   $(this).parent().parent().remove();
                   i--;

                   var a2 = 0;
                   $("#pedidos tr").each(function(i){
                      a2++;
                      $(this).find("td:first").html(a2);                     
                   });                  
        });



        $("#order_date").kendoDatePicker({
             min: new Date(),
             value: new Date(),
                     format: "dd/MM/yyyy"
          });
        $("#order_date").attr('disabled','disabled');

        $("#grid").kendoGrid({
          height: 460,
          sortable: false,
          columns: [{field:"number", width:40},
                {field:"item", width:40},
                {field:"staff", width:80, editor: function(container, options){
                  }},
                {field:"button", width:40}]

          });
        $("#t0").css('width', 270);
        $("#t0").kendoDropDownList();

        $("#c0").css('width', 180);
        $("#c0").kendoAutoComplete({
                    dataSource: a
                });
        });
</script>
{% endblock %}

发生在您开始删除行的某个时刻，某些下拉列表和文本框被分配给错误的行。起初我认为这是因为在减号按钮中重新计数时有些ID不匹配，但我已经尝试过了。

请帮忙解决这个问题吗？

Answer 1

通常在使用索引时会出现此类问题。所以在初始绑定中一切都运行良好，但在删除一行后，它们都会混合。

通常解决方案是使用每条记录的一些ID（或其他主键）。

我不确定这是否是您的问题，但我认为值得尝试。