このページのグリッドを 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