剑道网格丢失选定的行
Posted
技术标签:
【中文标题】剑道网格丢失选定的行【英文标题】：Kendo grid loosing selected row 【发布时间】：2021-11-27 19:12:31 【问题描述】：我正在为我的网格使用 Kendo UI，一切正常。我可以使用滚动和移位选择一行或多行。问题是，如果我选择第 3 行，然后某个事件刷新网格，然后我也想选择第 4 行，Kendo 会选择上述所有行，在本例中是从第 1-4 行。
所以我的问题是如何解决这个问题？
演示中的期望结果：选择德国，刷新网格，然后选择直到比利时。该演示将从第 1 行中选择比利时。
这是demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>
<body>
<button id="refresh">Refresh</button>
<div id="grid"></div>
<script>
$(function ()
var selectedOrders = [];
var idField = "OrderID";
$('#refresh').click(() =>
$("#grid").getKendoGrid().dataSource.read();
)
$("#grid").kendoGrid(
dataSource:
type: "odata",
transport:
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
,
schema:
model:
id: "OrderID",
fields:
OrderID: type: "number" ,
Freight: type: "number" ,
ShipName: type: "string" ,
OrderDate: type: "date" ,
ShipCity: type: "string"
,
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
,
height: 400,
selectable: "multiple",
pageable:
buttonCount: 5
,
sortable: true,
filterable: true,
navigatable: true,
columns: [
field: "ShipCountry",
title: "Ship Country",
width: 300
,
field: "Freight",
width: 300
,
field: "OrderDate",
title: "Order Date",
format: "0:dd/MM/yyyy"
],
change: function (e, args)
var grid = e.sender;
var items = grid.items();
items.each(function (idx, row)
var idValue = grid.dataItem(row).get(idField);
if (row.className.indexOf("k-state-selected") >= 0)
selectedOrders[idValue] = true;
else if (selectedOrders[idValue])
delete selectedOrders[idValue];
);
,
dataBound: function (e)
var grid = e.sender;
var items = grid.items();
var itemsToSelect = [];
items.each(function (idx, row)
var dataItem = grid.dataItem(row);
if (selectedOrders[dataItem[idField]])
itemsToSelect.push(row);
);
e.sender.select(itemsToSelect);
);
);
</script>
</body>
</html>【问题讨论】：
看来 kendo 在您的change 事件之前选择了所有行，这导致您的事件内部出现问题。
【参考方案1】：
这个问题与我在这里写的Kendo Grid Persist Row Example 的问题非常相似。在我写的例子中，我使用了推荐的persistSelection。
发生这种行为是因为在刷新事件之后，网格不再知道之前关注的是哪一行。所以在dataBound 上，我们需要重新设置焦点。这是一个可能对您有所帮助的 sn-p。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css"/>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css"/>
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>
<body>
<button id="refresh">Refresh</button>
<div id="grid"></div>
<script>
$(function()
var selectedOrders = [];
var idField = "OrderID";
$('#refresh').click(() =>
$("#grid").getKendoGrid().dataSource.read();
);
$("#grid").kendoGrid(
dataSource:
type: "odata",
transport:
read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
,
schema:
model:
id: "OrderID",
fields:
OrderID: type: "number" ,
Freight: type: "number" ,
ShipName: type: "string" ,
OrderDate: type: "date" ,
ShipCity: type: "string"
,
pageSize: 10,
serverPaging: true,
serverFiltering: true,
serverSorting: true
,
height: 400,
selectable: "multiple",
pageable:
buttonCount: 5
,
sortable: true,
filterable: true,
navigatable: true,
columns: [
field: "ShipCountry",
title: "Ship Country",
width: 300
,
field: "Freight",
width: 300
,
field: "OrderDate",
title: "Order Date",
format: "0:dd/MM/yyyy"
],
change: function (e, args)
var grid = e.sender;
var items = grid.items();
items.each(function (idx, row)
var idValue = grid.dataItem(row).get(idField);
if (row.className.indexOf("k-state-selected") >= 0)
selectedOrders[idValue] = true;
else if (selectedOrders[idValue])
delete selectedOrders[idValue];
);
,
dataBound: function (e)
var grid = e.sender;
var items = grid.items();
var itemsToSelect = [];
items.each(function (idx, row)
var dataItem = grid.dataItem(row);
if (selectedOrders[dataItem[idField]])
itemsToSelect.push(row);
);
if (itemsToSelect.length > 0)
var lastRow = itemsToSelect[itemsToSelect.length - 1];
grid.selectable._lastActive = lastRow;
grid.current($(lastRow).find("td:first"));
e.sender.select(itemsToSelect);
);
);
</script>
</body>
</html>【讨论】：
以上是关于剑道网格丢失选定的行的主要内容，如果未能解决你的问题，请参考以下文章