我正在用几行填充剑道网格,并希望在网格和其他 html 组件之间实现拖放功能。
我可以找到很多资源来告诉如何在网格内拖放/排序行,甚至从一个网格到另一个网格,但对于网格外部到另一个组件来说,没有任何东西。
kendo ui-grid 甚至支持这个吗?
我能想到的一种方法是- 使整个网格可拖动,当拖动开始时获取当前选定的行数据并在放置时使用它。但这并不是一个非常干净的方法。在这种情况下,我什至需要制作自定义拖动图像。
还有其他建议吗?
我正在用几行填充剑道网格,并希望在网格和其他 html 组件之间实现拖放功能。
我可以找到很多资源来告诉如何在网格内拖放/排序行,甚至从一个网格到另一个网格,但对于网格外部到另一个组件来说,没有任何东西。
kendo ui-grid 甚至支持这个吗?
我能想到的一种方法是- 使整个网格可拖动,当拖动开始时获取当前选定的行数据并在放置时使用它。但这并不是一个非常干净的方法。在这种情况下,我什至需要制作自定义拖动图像。
还有其他建议吗?
您可以使用 kendoDropTarget() 方法将另一个 html 元素指定为目标。例如,这里是一个网格和一个 HTML 文本区域:
<div id="grid"></div>
<textarea id="dropHere" rows="3" cols="50"></textarea>
$("#grid table tbody > tr").kendoDraggable({
group: "gridGroup",
threshold: 100,
hint: function(e) {
return $('<div class="k-grid k-widget"><table><tbody><tr>' + e.html() + '</tr></tbody></table></div>');
}
});
$("#dropHere").kendoDropTarget({
group: "gridGroup",
drop: function(e) {
e.draggable.hint.hide();
var txt = '';
$(e.draggable.element[0]).find("td").each(function(idx, td){
txt += $(td).text() + '\n';
});
e.dropTarget.text(txt);
}
});