网格集成
你可以使用剑道UI可排序组件通过拖放对网格中的项重新排序。
先决条件
重新排序可排序的项目
Sortable对HTML DOM元素重新排序。它不会自动更新DataSource中项目的顺序。这意味着您必须显式地实现所需的行为。
重新排序网格表行
控件上的Sortable初始化，以重新排序网格的表行表格元素网格。通常情况下,过滤器属性选择所有tr表的直接子元素tbody元素，例如，过滤器:">tbody >tr"．
在AngularJS应用程序中，将Sortable初始化为父指令。的
过滤器配置选项全选tr元素的子元素.k-grid包装。
设置网格中的提示
的提示元素追加到身体< >元素。因此，它的宽度不同于网格的宽度。
的样式提示元素，所以它看起来像行当前拖动的元素。
在可编辑网格中重新排序
如果启用了Grid的编辑功能，请使用更具体的筛选器选择器排除当前处于编辑模式的项，例如:.filter(“tbody > > tr:没有(.k-grid-edit-row)”)．这样，Sortable功能就不会干扰网格的编辑特性。
如果将Grid配置为显示详细信息，请使用只匹配主Grid行的选择器，例如:Filter: ">tbody >tr.k-master-row"．这样，细节行就不能拖动了。
有关可排序事件的详细信息，请参阅关于可排序事件的JavaScript API文章和集成可排序和网格的演示．
剑道UI网格的编辑功能是通过其内联，弹出,或批处理编辑模式。内联和弹出模式比批处理编辑模式更常见，也更容易实现。
在内联和弹出式编辑模式下使用网格
如果使用内联或弹出式编辑模式，请设置更具体的筛选器，以排除当前处于编辑模式的项目。
.filter(“tbody > > tr:没有(.k-grid-edit-row)”)在批处理编辑模式下使用网格
排序表的可拖动功能可防止mousedown事件。结果，改变编辑器输入的事件未触发，这反过来阻止MVVM保存更新的值。
如果使用批处理(单元格)编辑模式，则应用于内联和弹出式编辑模式的前一个示例中的代码将不起作用。要解决这个问题，使用自定义编辑并将它们配置为更新时输入事件触发默认情况下，框架监听改变事件。要实现该解决方案，请添加data-value-update = "输入"属性设置为编辑器输入。这种方法的缺点是输入事件不适用于早期的Internet Explorer版本。
的
data-value-update该方法适用于常规输入。但是，您必须手动配置Kendo UI组件，因为它们不支持data-value-update属性。
有关可运行的示例，请参阅有关的文章在单元格编辑模式下使用可排序网格．
重新排序数据源项
的改变可排序组件的事件将在更改行位置后触发。你可以绑定到改变事件以更新DataSource中项的顺序。
下面的示例演示如何在数据源中移动项的位置。
// Sortable的更改事件处理程序。function onChange(e) {var grid = e.sender.element.data("kendoGrid")， oldIndex = e.oldIndex， //旧位置newIndex = e.newIndex， //新位置视图= grid. datasource .view()， dataItem = grid. datasource . getbyuid (e.item.data("uid"));//获取移动的数据项。Order = newIndex;//更新订单dataItemDirty = true;//移动记录的顺序。如果(oldinindex < newIndex) {for (var i = oldinindex + 1;i <= newIndex;i++) {view[i].Order——;查看[我]。Dirty = true; } } else { for (var i = oldIndex - 1; i >= newIndex; i--) { view[i].Order++; view[i].dirty = true; } } grid.dataSource.sync(); // Submit the changes through the update transport and refresh the Grid. }下面的示例演示如何发送newIndex和oldIndex到服务器。
// Sortable的更改事件处理程序。function onChange(e) {var grid = e.sender.element.data("kendoGrid")， oldIndex = e.oldIndex， //旧位置。newIndex = e.newIndex， //新位置。dataItem = grid. datasource . getbyid (e.p eitem .data("uid"));//获取移动的数据项。美元。ajax({url: "yourUrl"， dataType: "json"， data:{//发送数据并更新服务器上项目的顺序。oldIndex: oldIndex, newIndex: newIndex, dataItem: dataItem}， success: function (response) {grid.dataSource.read();//刷新网格。}}); }已知的限制
对于启用了分页或虚拟滚动的网格，Sortable不能按预期工作。
Sortable使用现有的DOM进行操作。它不知道网格或它的数据源。如果分页或虚拟滚动被启用，网格将只呈现属于当前页面的元素。因此，排序将仅限于当前页面。
Sortable在分组网格中不能按预期工作。
Sortable使用DOM元素的索引。当网格显示分组数据时，DOM元素的索引与DataSource中相应数据项的索引不匹配。这使得无法更新DataSource中的订单。
Sortable不适用于已锁定(冻结)列的网格。