[英]How do I remove a row from a Kendo Grid
我有一个非常简单的设置,一个名为#list 的网格,其中包含一个填充了要显示的记录的数据源。
我在每一行上都有一个按钮,带有一个调用此函数的 onClick 事件:
// Soft-Delete person
var processURL = crudServiceBaseUrl + '?method=deletePerson';
function deletePerson(id){
if (confirm('#getResource("person.detail.confirmdel")#')) {
$.ajax({
type: 'POST',
url: processURL,
data: {
PERS_KY: id
},
success: function (data){
var thingToDelete = "tr:eq("+id+")";
var grid = $("#list").data("kendoGrid");
grid.removeRow(thingToDelete);
},
error: function (xhr, textStatus, errorThrown){
alert("Error while deleting person"+ "\n"+ xhr + "\n"+ textStatus + "\n" + errorThrown);
}
});
}
}
The server-side stuff works fine, the interaction with the database is good. However, the row does not disappear from the grid.
Anyone?
==============================================================================
In answer to the comments below, here is the revised function:
var processURL = crudServiceBaseUrl + '?method=deletePerson';
function deletePerson(id, row){
if (confirm('#getResource("person.detail.confirmdel")#')) {
$.ajax({
type: 'POST',
url: processURL,
data: {
PERS_KY: id
},
success: function (data){
var thingToDelete = row;
var grid = $("#list").data("kendoGrid");
grid.removeRow(thingToDelete);
},
error: function (xhr, textStatus, errorThrown){
alert("Error while soft-deleting person"+ "\n"+ xhr + "\n"+ textStatus + "\n" + errorThrown);
}
});
}
}
这一切正常,数据库已填充并且 grid.removeRow() 使行淡出,但随后页面重新加载,这是我不想要的。
知道如何停止页面重新加载吗?
下面的代码显示了如何使用自定义删除命令删除行。
$("#grid").kendoGrid({
columns: [
{
command: [{ name: "edit" }, {
name: "Delete", imageClass: "k-icon k-i-close", click: function (e) {
e.preventDefault();
var dataItem = this.dataItem($(e.target).closest("tr"));
if (confirm('Do you really want to delete this record?')) {
var dataSource = $("#grid").data("kendoGrid").dataSource;
dataSource.remove(dataItem);
dataSource.sync();
}
}
}], title: " ", width: "200px"
}
]
});
希望这可能有所帮助
网格已经支持创建,更新和删除记录。 你不应该试图自己实现它。
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
}
}
您也可以打开删除确认
editable: {
confirmation: "Are you sure that you want to delete this record?"
}
编辑:为了有条件地显示删除按钮,您可以连接网格的DataBound-Event。 您还需要一些指示或不显示按钮。 我在我的例子中使用了一个名为HideButton的属性。 也许你必须调整类.k-grid-delete其余应该工作。
$("#grid").kendoGrid({
... other configuration ...
dataBound: onDataBound
});
function onDataBound(e) {
var grid = this;
var ds = grid.dataSource;
var max = ds.data().length;
for (var i = 0; i < max; i++) {
var currentUid = ds.at([i]).uid;
var currentRow = grid.table.find("tr[data-uid='" + currentUid + "']");
if (ds.at(i).HideButton) {
var editButton = $(currentRow).find(".k-grid-delete");
editButton.hide();
}
}
}
使用kendo ui删除行的其他方法
$("#grid").kendoGrid({
columns: [
{
command: [
{
name: "remove",
text: '',
iconClass : 'k-icon k-i-delete',
click: (e) => {
e.preventDefault();
const row = $(e.target).closest('tr')[0];
const grid = $(e.target).closest('#grid').data("kendoGrid");
grid.removeRow(row);
//grid.saveChanges(); //if you need to immediately push changes on the server
}
},
]
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.