我尝试使用 Kendo Grid,但发现了一些问题。
当我单击时,按钮操作“编辑”和“删除”什么都不做,但是如果我将“创建”命令放入传输中,当我单击删除或单击编辑时,网格会发送大量用于创建 URL 命令的帖子 >取消(更新按钮也不做任何事情)。
我做错了什么?
我的代码:
<div id="grid"></div>
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<input type="number" min="0" id="item-id" maxlength="10" />
<input type="text" id="name" class="k-textbox" placeholder="..." />
<button style="width: 100px" id="btn-grid-filtrar" class="k-button" >Filter</button>
</div>
</script>
<script>
$(document).ready(function() {
var dataSource = new kendo.data.DataSource(
{
schema:
{
data: "data",
total: "total",
model:
{
id: "data",
fields:
{
id: { editable: false, nullable: false },
nome: { type: "string", validation: { required: true} },
ativo: { type: "boolean" }
}
}
},
transport:
{
read:
{
url: "page",
dataType: "json",
type: "POST",
data: additionalData
},
update: {
url: "update",
dataType: "jsonp"
},
destroy: {
url: "delete",
dataType: "jsonp"
}
/*,
create: {
url: "add",
dataType: "jsonp"
}
*/
},
pageSize: 5,
serverSorting: true,
serverPaging: true,
});
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
sortable: true,
pageable: {
input: true,
numeric: false
},
batch: true,
columns: [
{ field: "id", title: "#", width: "60px" },
{ field: "nome", title: "Nome" },
{ field: "ativo", title: "Ativo", width: "60px", template: "#= ativo ? 'Sim' : 'Não' #" },
{ command: ["edit", "destroy"], title: "Ações", width: "200px" }
],
editable: "inline",
toolbar: kendo.template($("#template").html()),
});
kendo.bind($(".toolbar"));
$("#id").kendoNumericTextBox({
format: "##########",
placeholder: "..."
});
$("#btn-grid-filtrar").click(function() {
grid.data("kendoGrid").dataSource.read();
});
});
function additionalData() {
return {
filtro_id: $("#item-id").val(),
filtro_nome: $("#name").val()
};
}
</script>