Question

我正在尝试每隔30秒左右在此页面上重新创建网格。我做什么清空div“网格用户”并打电话给服务器。它返回一个包含重建表的JSON（但是有更新的行），所以我把它放回div中。

该表显示了find，但是在同一个setInterval块中，一旦表格返回div，我就会尝试在Kendo上创建网格及其控件。

{% extends "saloons/templates/base.html" %}
{% from "ui/forms/macro.html" import wtform %}
{% block content %}
    <form id="form1" method="POST" action="">
      <br/><br/>
      <div id="total" align="right">Total de pedidos en soles: S/.<div id="num" style="display:inline"></div></div>
      <div id="fecha" align="left">Fecha: <input type="text" id="search_date" name="search_date" />
      <button  id="filter" name="filter" type="submit">Filtrar</button>
      </div>
      <br/><br/><br/><br/>
      <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="requester" style="text-align: center">Solicitante</th>
            <th data-field="client" style="text-align: center">Cliente</th>
            <th data-field="price" style="text-align: center">Precio</th>
            <th data-field="date" style="text-align: center">Fecha del Pedido</th>
            <th data-field="status" style="text-align: center">Estado</th>
            <th data-field="save" style="text-align: center">Guardar Estado</th>
            </tr>
        </thead>
        <tbody id="pedidos">
            {% for i in orders %}
            <tr id="{{ i.id }}">
            <td>{{loop.index}}</td>
            <td>{{ i.ItemName }}</td>
            <td>{{i.user()}}</td>
            <td>{{i.tab.user}}</td>
            {% if i.isInventory %}
            <td>S/. {{ i.ItemPrice }}</td>
            {% else %}
            <td><input type="text" id="price{{ i.id }}" value="{{ i.ItemPrice }}"/></td>
            {% endif %}
            <td>{{ i.dateOrder }}</td>
            <td>
            <select id="cmb{{ i.id }}">
                <option value="PENDIENTE" selected="true">PENDIENTE</option>
                <option value="ATENDIDO">ATENDIDO</option>
                <option value="DENEGADO">DENEGADO</option>
            </select>
            </td>
            <td><a href="#" id="{{ i.id }}" rel="save">Grabar</a></td>
            </tr>
            {% endfor %}   
        </tbody>

        </table>
      </div>
    </form>
    <script>            
        $(function() {                
           $("a[rel=save]").live('click', function() {
            var id = $(this).attr('id');

            var p = $(this).parent().parent().find("td:eq(4)").html();
            var p2 = p.substring(4, p.length);
            var p3 = parseFloat(p2);

            if (isNaN(p3) == true)
            {
            p3 = $("#price"+id).val();
            }
            var a = $("#cmb"+id).val();
            if (a == 'PENDIENTE')
            {
              alert('Debe cambiar el estado del pedido');
            }
            else
            {
              var res = confirm("Está seguro de este cambio de estado?");
              if (res){
              $.post("check_order",{status : a, cod : id, price : p3, flag : true}, function(data) {
                var d = JSON.parse(data);
                if (!d.cancel){
                $("#cmb"+id).parent().parent().parent().remove();
                $("#pedidos tr").each(function(i, v){                            
                    if (i+1 > 0) {
                    $(this).find("td:first").html(i+1);
                    }
                   });
                $("#num").text(d.total);
                }
                else{
                  alert("El pedido que trata de actualizar ha sido cancelado. Refrescando pagina...");
                  parent.location.href = parent.location.href;
                }
              });
              }
            }
            return false;
           });


          $("#fecha").attr('class', 'k-header');
          $("#fecha").css({'width' : '290px',
                  'float' : 'left'});

          var f = new Date("{{ f }}");

          $("#search_date").kendoDatePicker({
             value: new Date(f),
             format: "dd/MM/yyyy",
             name: "search_date"
        });

          $("#search_date").attr('readonly', 'readonly');
          $("#grid").kendoGrid({
          height: 460,
          sortable: false,
          columns: [{field:"number", width:40},
                {field:"item", width:80},
                {field:"requester", width:80},
                {field:"client", width:80},
                {field:"price", width:100},
                {field:"date", width:100},
                {field:"status", width:120},
                {field:"save", width:80}]

          });

          var arr = [];
          $('a[rel=save]').each(function(){
           arr.push($(this).attr('id'));
           });

          for(i =0; i<arr.length;i++)
          {
         $("#pedidos tr")
            .find("td:eq(4)")
            .children("#price" + arr[i])
            .kendoNumericTextBox({
            min:0,
            max:150,
            decimals:2,
            upArrowText:"Aumentar",
            downArrowText:"Disminuir",
            format: "c"
            });
          }

         $("#total").css({'border-style' : 'solid',
                 'border-width': '3px',
                 'padding' : '10px',
                 'width' : '300px',
                 'float' : 'right',
                 'font-size' : '16px',
                 'font-weight' : 'bold'});
         $("#num").text("{{ total_orders }}");
         $("#total").attr('class', 'k-header');
          //FIXME: El combo en KendoUI debe integrar las opciones originales del combo
          $("#pedidos tr").each(function(i,v) {
           $(this).find("td:eq(6)").children("select").kendoDropDownList();
        });

          setInterval(function(){
        $("#grid-users").empty();
        $.getJSON("/cafe/uco", function(json){
            $("#grid-users").html(json.ord);
          });

          console.log($("#grid"));
          $("#grid").kendoGrid({
          height: 460,
          sortable: false,
          columns: [{field:"number", width:40},
                {field:"item", width:80},
                {field:"requester", width:80},
                {field:"client", width:80},
                {field:"price", width:100},
                {field:"date", width:100},
                {field:"status", width:120},
                {field:"save", width:80}]

          });

          var arr2 = [];
          $('a[rel=save]').each(function(){
           arr2.push($(this).attr('id'));
           });

          for(i =0; i<arr2.length;i++)
          {
         $("#pedidos tr")
            .find("td:eq(4)")
            .children("#price" + arr[i])
            .kendoNumericTextBox({
            min:0,
            max:150,
            decimals:2,
            upArrowText:"Aumentar",
            downArrowText:"Disminuir",
            format: "c"
            });
          }

          $("#pedidos tr").each(function(i,v) {
           $(this).find("td:eq(6)").children("select").kendoDropDownList();
          });

          },10000);
        });
    </script>
{% endblock %}

出于某种原因，一旦重建表格，网格和控件就不会到达Kendo。有人可以告诉我为什么吗？难道我做错了什么？ = S

Answer 1

收到新数据时是否缺少read（）或refresh（）？

刷新：http://www.kendoui.com/documentation/ui-widgets/grid/methods.aspx

阅读：http://www.kendoui.com/forums/mvc/grid/grid-ajax-jquery-refresh.aspx

添加或删除网格（KendoUI）

1 个答案: