kendo-ui - 是否可以为网格重新排序调用不同的数据源更新方法?
问题描述
我正在使用 Kendo Sortable 来启用网格中行的拖放重新排序(类似于此示例。我的网格还允许行内联编辑。
在以下任何一种情况下都会调用相同的数据源更新方法:在内联编辑后单击更新,或拖放行以重新排序。
是否可以让拖放重新排序调用不同的数据源更新方法?
这是网格代码:
@(Html.Kendo().Grid<BSS.WebMvc.ViewModels.SuggestionViewModel>()
.Name("gridSuggestions")
.Columns(columns =>
{
columns.Bound(p => p.DisplayOrder).Hidden(true);
columns.Bound(p => p.Item);
columns.Bound(p => p.Quantity);
columns.Command(command => { command.Edit(); command.Destroy(); });
})
.ToolBar(toolbar => toolbar.Create().Text("Add New Suggestion"))
.Editable(editable => editable.Mode(GridEditMode.InLine))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Events(events => events.Error("gridSuggestions_error_handler"))
.Model(model =>
{
model.Id(p => p.ID);
model.Field(p => p.DisplayOrder).DefaultValue(0);
model.Field(p => p.Item).DefaultValue(new BSS.WebMvc.ViewModels.ResultEntryViewModel());
model.Field(p => p.Quantity).DefaultValue(1);
})
.Create(update => update.Action("Suggestions_Create", "Items", new { parentItemId = Model.ID }))
.Read(read => read.Action("Suggestions_Read", "Items", new { id = Model.ID }))
.Update(update => update.Action("Suggestions_Update", "Items", new { parentItemId = Model.ID }))
.Destroy(update => update.Action("Suggestions_Delete", "Items", new { parentItemId = Model.ID }))
.ServerOperation(false)
.Sort(s => s.Add(m => m.DisplayOrder))
)
.Events(events => events.DataBound("gridSuggestions_dataBound").Edit("gridSuggestionEditOrCreate").SaveChanges("gridSuggestionSaveChanges").Cancel("gridSuggestionCancel").Save("gridSuggestionSave"))
)
以及带有相关 javascript 函数的可排序代码:
@(Html.Kendo().Sortable()
.Name("gridSuggestionSortable")
.For("#gridSuggestions")
.Filter("table > tbody > tr:not(.k-grid-edit-row):not(.blockDragDuringEdit):not(.preventDrag):not(.k-detail-row)")
.Cursor("move")
.HintHandler("hint")
.Axis(SortableAxis.Y)
.PlaceholderHandler("placeholder")
.ContainerSelector("#gridSuggestions tbody")
.Events(events => events.Change("onGridSuggestionsOrderChange"))
)
<script>
function onGridSuggestionsOrderChange(e) {
let grid = e.sender.element.data("kendoGrid"),
oldIndex = e.oldIndex,
newIndex = e.newIndex,
view = grid.dataSource.view(),
dataItem = grid.dataSource.getByUid(e.item.data("uid"));
dataItem.DisplayOrder = newIndex;
dataItem.dirty = true;
if (oldIndex < newIndex) {
for (let i = oldIndex + 1; i <= newIndex; i++) {
view[i].DisplayOrder--;
view[i].dirty = true;
}
} else {
for (let i = oldIndex - 1; i >= newIndex; i--) {
view[i].DisplayOrder++;
view[i].dirty = true;
}
}
grid.dataSource.sync();
}
</script>
解决方案
您可以在更改处理程序中调用不同的方法:
function onGridSuggestionsOrderChange(e) {
...
dataItem.DisplayOrder = newIndex;
const updated = [dataItem.toJSON()];
if (oldIndex < newIndex) {
for (let i = oldIndex + 1; i <= newIndex; i++) {
view[i].DisplayOrder--;
updated.push(view[i].toJSON());
}
} else {
for (let i = oldIndex - 1; i >= newIndex; i--) {
view[i].DisplayOrder++;
updated.push(view[i].toJSON());
}
}
$.ajax({
type: "POST",
url: REORDER_UPDATE_URL,
contentType: 'application/json',
data: JSON.stringify(updated)
});
}
推荐阅读
- triggers - Zabbix 5 - 只能在特定情况下监控项目吗?
- c# - 在 DataGridViewComboBoxColumn 中使用来自 AutoComplete 的键入文本,即使该值不在组合框数据源中
- azure - 为什么我不能在 Azure 函数中使用计时器触发时的输出绑定?
- c# - 输入参数为空时如何跳过 EF Take?
- javascript - 提取所有以数字开头的单词
- java - 无法使用 Randoop 生成测试类
- vim - 将所有匹配行移到某个字符串第一次出现的后面
- php - 为什么添加 PHP 表单验证码后我的联系表单无法显示?
- php - 从某些数组位置复制数据并将它们添加到数组的开头
- binding - 是否有一些模型可用于理解 Raku 中的容器、引用、原始、rw、\?