0

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が一致しなかったためだと思っていましたが、すでに試しました。

これを手伝ってくれませんか？

4

1 に答える 1

0

通常、このような問題は、インデックスを使用しているときに発生します。したがって、最初のバインドではすべてがうまく機能しますが、行を削除するとすべてが混在します。

通常、解決策は、各レコードのID（または他の主キー）を使用することです。

これがあなたの場合の問題かどうかはわかりませんが、試してみる価値はあると思います。

于 2012-09-25T15:24:04.320 に答える