Kendo Grid: перетаскивать свитки сверху вниз
Я реализовал перетаскивание для сетки следующим образом:
var mainGrid = $("#grid").kendoGrid({
dataSource: mainDataSource,
columns: ["id", "name", "phone"],
scrollable: true,
editable: true,
navigatable: true,
height: 200
}).data("kendoGrid");
mainGrid.table.kendoDropTarget({
group: "gridGroup",
drop: function (e) {
var draggedRows = e.draggable.hint.find("tr");
e.draggable.hint.hide();
var dropLocation = $(document.elementFromPoint(e.clientX, e.clientY)),
dropGridRecord = mainDataSource.getByUid(dropLocation.parent().attr("data-uid"))
if (dropLocation.is("th")) {
return;
}
var beginningRangePosition = mainDataSource.indexOf(dropGridRecord), //beginning of the range of dropped row(s)
rangeLimit = mainDataSource.indexOf(mainDataSource.getByUid(draggedRows.first().attr("data-uid"))); //start of the range of where the rows were dragged from
//if dragging up, get the end of the range instead of the start
if (rangeLimit > beginningRangePosition) {
draggedRows.reverse(); //reverse the records so that as they are being placed, they come out in the correct order
}
//assign new spot in the main grid to each dragged row
draggedRows.each(function () {
var thisUid = $(this).attr("data-uid"),
itemToMove = mainDataSource.getByUid(thisUid);
mainDataSource.remove(itemToMove);
mainDataSource.insert(beginningRangePosition, itemToMove);
});
//set the main grid moved rows to be dirty
draggedRows.each(function () {
var thisUid = $(this).attr("data-uid");
mainDataSource.getByUid(thisUid).set("dirty", true);
});
//remark things as visibly dirty
var dirtyItems = $.grep(mainDataSource.view(), function (e) {
return e.dirty === true;
});
for (var a = 0; a < dirtyItems.length; a++) {
var thisItem = dirtyItems[a];
mainGrid.tbody.find("tr[data-uid='" + thisItem.get("uid") + "']").find("td:eq(0)").addClass("k-dirty-cell");
mainGrid.tbody.find("tr[data-uid='" + thisItem.get("uid") + "']").find("td:eq(0)").prepend('<span class="k-dirty"></span>')
};
}
});
JS Fiddle: jsfiddle.net/yagamilight1987/R2EyW/
Прокрутите вниз до последней записи. Перетащите последнюю запись в предыдущую позицию. Капля работает, но она прокручивается к вершине сетки.
2 ответа
Вы изменяете источник данных, что приводит к обновлению сетки, и, к сожалению, сетка не будет помнить свою позицию прокрутки, когда вы используете navigatable Вариант конфигурации. Вы можете исправить это, запомнив позицию и восстановив ее вручную:
// remember scroll position before you start modifying the data source
var gridContentDiv = $("#grid").find(".k-grid-content").first();
var scrollTop = gridContentDiv.scrollTop();
// ...
// restore scroll position when your modifications are done ...
gridContentDiv.scrollTop(scrollTop);
Ваш код отлично работает над моим проектом, я думаю, что есть некоторые проблемы со скриптом
Скрипт который использую
<script src="~/Script/Jquery-1.8.1.min.js" type="text/javascript"></script>
<script src="@Url.Content("~/Script/jquery.validate.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Script/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Script/kendo.all.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Script/kendo.aspnetmvc.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Script/kendo.web.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Script/jquery.maskedinput-1.3.min.js")" type="text/javascript"></script>
<link href="~/Content/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/kendo.default.min.css" rel="stylesheet" type="text/css" />
Посмотреть
<div id="grid">
</div>
Код
<script type="text/javascript">
$(document).ready(function () {
$.fn.reverse = [].reverse; //save a new function from Array.reverse
var data = [{
id: 1,
name: "Michael",
phone: "897-894-8956"
}, {
id: 2,
name: "George Michael",
phone: "897-555-5555"
}, {
id: 3,
name: "George Sr.",
phone: "897-444-4444"
}, {
id: 4,
name: "Gob",
phone: "897-333-3333"
}, {
id: 5,
name: "Lucille",
phone: "897-222-2222"
}, {
id: 6,
name: "Tobias",
phone: "897-111-1111"
}, {
id: 7,
name: "Maeby",
phone: "897-666-6666"
}, {
id: 8,
name: "Buster",
phone: "897-777-7777"
}, {
id: 9,
name: "Lindsay",
phone: "897-888-8888"
}];
var dataModel = kendo.data.Model.define({
id: "id",
fields: {
id: {
type: "number",
editable: false
},
name: {
type: "string",
editable: true
},
phone: {
type: "string",
editable: false
}
}
});
var mainDataSource = new kendo.data.DataSource({
schema: {
model: dataModel
},
data: data
});
var mainGrid = $("#grid").kendoGrid({
dataSource: mainDataSource,
columns: ["id", "name", "phone"],
scrollable: true,
editable: true,
navigatable: true,
height: 200
}).data("kendoGrid");
var selectedClass = 'k-state-selected';
$(document).on('click', '#grid tbody tr', function (e) {
if (e.ctrlKey || e.metaKey) {
$(this).toggleClass(selectedClass);
} else {
$(this).addClass(selectedClass).siblings().removeClass(selectedClass);
}
});
mainGrid.table.kendoDraggable({
filter: "tbody tr",
group: "gridGroup",
axis: "y",
hint: function (item) {
var helper = $('<div class="k-grid k-widget drag-helper"/>');
if (!item.hasClass(selectedClass)) {
item.addClass(selectedClass).siblings().removeClass(selectedClass);
}
var elements = item.parent().children('.' + selectedClass).clone();
item.data('multidrag', elements).siblings('.' + selectedClass).remove();
return helper.append(elements);
}
});
mainGrid.table.kendoDropTarget({
group: "gridGroup",
drop: function (e) {
var draggedRows = e.draggable.hint.find("tr");
e.draggable.hint.hide();
var dropLocation = $(document.elementFromPoint(e.clientX, e.clientY)),
dropGridRecord = mainDataSource.getByUid(dropLocation.parent().attr("data-uid"))
if (dropLocation.is("th")) {
return;
}
var beginningRangePosition = mainDataSource.indexOf(dropGridRecord), //beginning of the range of dropped row(s)
rangeLimit = mainDataSource.indexOf(mainDataSource.getByUid(draggedRows.first().attr("data-uid"))); //start of the range of where the rows were dragged from
//if dragging up, get the end of the range instead of the start
if (rangeLimit > beginningRangePosition) {
draggedRows.reverse(); //reverse the records so that as they are being placed, they come out in the correct order
}
//assign new spot in the main grid to each dragged row
draggedRows.each(function () {
var thisUid = $(this).attr("data-uid"),
itemToMove = mainDataSource.getByUid(thisUid);
mainDataSource.remove(itemToMove);
mainDataSource.insert(beginningRangePosition, itemToMove);
});
//set the main grid moved rows to be dirty
draggedRows.each(function () {
var thisUid = $(this).attr("data-uid");
mainDataSource.getByUid(thisUid).set("dirty", true);
});
//remark things as visibly dirty
var dirtyItems = $.grep(mainDataSource.view(), function (e) {
return e.dirty === true;
});
for (var a = 0; a < dirtyItems.length; a++) {
var thisItem = dirtyItems[a];
mainGrid.tbody.find("tr[data-uid='" + thisItem.get("uid") + "']").find("td:eq(0)").addClass("k-dirty-cell");
mainGrid.tbody.find("tr[data-uid='" + thisItem.get("uid") + "']").find("td:eq(0)").prepend('<span class="k-dirty"></span>')
};
}
});
});
</script>