Javascript 如何从剑道网格中删除一行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/31183593/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I remove a row from a Kendo Grid
提问by Junglefish
I have a very simple setup, a grid called #list with a datasource populated with records to display.
我有一个非常简单的设置，一个名为#list 的网格，其中包含一个填充了要显示的记录的数据源。
I have a button on each row with an onClick event that calls this function:
我在每一行上都有一个按钮，带有一个调用此函数的 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);
}
});
}
}
This all works fine, the database is populated and grid.removeRow() makes the row fade out, but then the page reloads, which I don't want.
这一切正常，数据库已填充， grid.removeRow() 使行淡出，但随后页面重新加载，这是我不想要的。
Any idea how to stop the page reloading?
知道如何停止页面重新加载吗？
回答by Abbas Galiyakotwala
below code show how to delete rows using custom delete command.
下面的代码显示了如何使用自定义删除命令删除行。
$("#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"
}
]
});
Hope this may help
希望这可能会有所帮助
回答by Vanice
The grid already supports create, update and deleting of records. You should not try to implement it on your own.
网格已经支持创建、更新和删除记录。你不应该试图自己实现它。
You need to define destroy on your datasource like here
transport: {
read: {
url: crudServiceBaseUrl + "/Products",
},
destroy: {
url: crudServiceBaseUrl + "/Products/Destroy",
}
}
Also you can turn on a delete confirmation
您也可以打开删除确认
editable: {
confirmation: "Are you sure that you want to delete this record?"
}
EDIT:In order to conditionally show delete buttons you can hook up the DataBound-Event of the grid. You also need some indication wheter or not to show the button. I used a property called HideButton in my example. Maybe you have to adjust the class .k-grid-delete the rest should work.
编辑：为了有条件地显示删除按钮，您可以连接网格的 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();
}
}
}
