[英]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.