複製控件

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（或其他主鍵）。

我不確定這是否是您的情況的問題，但我認爲這值得嘗試。