这就是网格的样子。
@{
Html.Kendo().Grid(Model)
.Name("Processes")
.AutoBind(false)
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Read(read => read.Action("GetTasksKendo", "TaskManager", new { getBy = ViewBag.Filter, workType = ViewBag.WorkType }).Data("additionalInfo")).ServerOperation(false)
)
.HtmlAttributes(new { @class = "grid-header" })
.Columns(columns =>
{
columns.Select().Title("Select").HeaderHtmlAttributes(new { @class = "center" }).HtmlAttributes(new { @class = "center" }).Width(50);
columns.Bound(p => p.Registration).Filterable(false);
columns.Bound(p => p.Contract).Filterable(false);
columns.Bound(p => p.WebStatus).Title("Status").Filterable(false);
columns.Bound(p => p.ArrivedDate).Format("{0:dd/MM/yyyy}").Filterable(false);
columns.Bound(p => p.Location).Filterable(false);
columns.Bound(p => p.ComponentName).Title("Task").Filterable(false);
columns.Bound(p => p.WorkType).Filterable(false);
columns.Bound(p => p.CreatedDate).Title("Auth Date").Format("{0:dd/MM/yyyy}").Filterable(false);
columns.Command(commands =>
{
commands.Custom("CompleteLine").Text("Complete").Click("onComplete").HtmlAttributes(new { @class = "btn btn-primary" });
})
.HeaderHtmlAttributes(new { @class = "center" }).HtmlAttributes(new { @class = "center" }).Width(150).Title("Actions");
})
.Sortable()
.Events(e => e.Change("onChange"))
.Pageable(p => p.Numeric(false).PreviousNext(false))
.Scrollable(sc => sc.Virtual(true).Height(500))
.Render();
}
这是Javascript中的onChange事件。该函数会在我选择行后记住这些行,但是一旦我滚动页面以加载 20 条记录的第二个配额,它就会以某种方式从 UI 中消失对所选行的选择,但仍然会在后台记住它们。
function onChange(e) {
// Get the selected rows from the grid.
$("#Processes tr.k-alt").removeClass("k-alt");
var rows = e.sender.select();
selectedRows.length = 0;
rows.each(function (e) {
var grid = $("#Processes").data("kendoGrid");
var dataItem = grid.dataItem(this);
selectedRows.push(dataItem);
});
}