我想在 Kendo-Grid 上导航行。我有 4 个按钮,第一个、上一个、下一个和最后一个。单击该按钮时,它将突出显示 Kendo-Grid 中的记录。我不确定如何实现这一目标。我可以在单击按钮上获取行索引,但我无法使 Kendo-Grid 高亮该行并提取要在文本框中显示的记录。这是我的一些代码:
在 View 中
<div>
<button id="reg-view-first" title="First" class="menu-item supplementary-table-menu k-grid-add" onclick="javascript:first();">
<img src="@Url.Content("~/Images/first_16.png")" /></button>
<button id="reg-view-back" title="Back" class="menu-item supplementary-table-menu k-grid-add" onclick="javascript:back();">
<img src="@Url.Content("~/Images/back_16.png")" /></button>
<button id="reg-view-next" title="Next" class="menu-item supplementary-table-menu" onclick="javascript:next();">
<img src="@Url.Content("~/Images/forward_16.png")" /></button>
<button id="reg-view-prev" title="Last" class="menu-item supplementary-table-menu" onclick="javascript:last();">
<img src="@Url.Content("~/Images/last_16.png")" /></button>
</div>
function last() {
var grid = $("#queue-table").data("kendoGrid");
//var rowCount = grid.dataSource.view().length; //on current display.
var rowCount = grid.dataSource.data().length; //Actual record count.
var itemID = grid.dataSource.at(rowCount - 1).ItemID
grid.clearSelection();
var row = $(this).closest("tr");
var dataItem = grid.dataItem(row);
row.addClass("k-state-selected");
//grid.select(itemID);
//alert(itemID);
}
function back() {
var grid = $("#queue-table").data("kendoGrid"); //document.getElementsByName("queue-table");
if (grid != null || grid != "undefined")
{
//get the selected index.
var dataRows = grid.items();
var rowIndex = dataRows.index(grid.select());
//alert(rowIndex);
var dataItem = grid.dataItem(grid.select());
//var itemID = grid.columns[0].field;
var itemID = grid.dataSource.at(1).ItemID;
grid.select("tr[data-uid='" + itemID + "']");
var newRow = dataRows.index(grid.select());
newRow.addClass("k-state-selected");
//assign the new selected index
//var newIndex = 0;
//if (rowIndex > 0)
//{
// newIndex = rowIndex - 1
//}
//alert(newIndex);
}
我是剑道的新手,已经花了几个小时弄清楚该怎么做。
最佳答案
经过反复试验和网络搜索,我想出了这个解决方案:
function first() {
var grid = $("#queue-table").data("kendoGrid");
if (grid) {
var rowCount = grid.dataSource.data().length; //Actual record count on the grid.
if (rowCount) {
var itemID = grid.dataSource.at(0).ItemID; //Get the ItemID (model id) from the first row of the grid.
var dataItem = grid.dataSource.get(itemID); //get the data-uid of the itemID which is generated by kendo.
var row = grid.tbody.find("tr[data-uid='" + dataItem.uid + "']"); //Find the data-uid on the grid.
grid.clearSelection(); //Clear the current selection on the grid.
row.addClass("k-state-selected"); //add highlight on the row
grid.trigger("change"); //execute the onChange event of the grid.
}
}
}
function back() {
var grid = $("#queue-table").data("kendoGrid");
if (grid) {
var rowCount = grid.dataSource.data().length; //Actual record count on the grid.
if (rowCount) {
var rows = grid.items();
var currSelRowIndex = rows.index(grid.select());
var prevRowIndex = 0; //initialize the previous row index.
if (currSelRowIndex > 0) {
prevRowIndex = currSelRowIndex - 1; //decrease index by 1.
}
var itemID = grid.dataSource.at(prevRowIndex).ItemID; //Get the ItemID (model id) from the first row of the grid.
var dataItem = grid.dataSource.get(itemID); //get the data-uid of the itemID which is generated by kendo.
var row = grid.tbody.find("tr[data-uid='" + dataItem.uid + "']"); //Find the data-uid on the grid.
grid.clearSelection(); //Clear the current selection on the grid.
row.addClass("k-state-selected"); //add highlight on the row
grid.trigger("change"); //execute the onChange eve
}
}
}
function next() {
var grid = $("#queue-table").data("kendoGrid");
if (grid) {
var rowCount = grid.dataSource.data().length; //Actual record count on the grid.
if (rowCount) {
var rows = grid.items(); //get all rows
var currSelRowIndex = rows.index(grid.select()); //get the current selected index from grid
var nextRowIndex = rowCount - 1; //initialize the previous row index.
if (currSelRowIndex < rowCount - 1) {
nextRowIndex = currSelRowIndex + 1; //increase index by 1.
}
var itemID = grid.dataSource.at(nextRowIndex).ItemID; //Get the ItemID (model id) from the first row of the grid.
var dataItem = grid.dataSource.get(itemID); //get the data-uid of the itemID which is generated by kendo.
var row = grid.tbody.find("tr[data-uid='" + dataItem.uid + "']"); //Find the data-uid on the grid.
grid.clearSelection(); //Clear the current selection on the grid.
row.addClass("k-state-selected"); //add highlight on the row
grid.trigger("change"); //execute the onChange eve
}
}
}
function last() {
var grid = $("#queue-table").data("kendoGrid");
if (grid) {
var rowCount = grid.dataSource.data().length; //Actual record count on the grid.
if (rowCount) {
var itemID = grid.dataSource.at(rowCount - 1).ItemID //Get the ItemID (model id) at the last row of the grid.
var dataItem = grid.dataSource.get(itemID); //get the data-uid of the itemID which is generated by kendo.
var row = grid.tbody.find("tr[data-uid='" + dataItem.uid + "']"); //Find the data-uid on the grid.
grid.clearSelection(); //Clear the current selection on the grid.
row.addClass("k-state-selected"); //add highlight on the row
grid.trigger("change"); //execute the onChange event of the grid.
}
}
}
<div>
<button id="reg-view-first" title="First" class="menu-item supplementary-table-menu k-grid-add" onclick="first()">
<img src="@Url.Content("~/Images/first_16.png")" /></button>
<button id="reg-view-back" title="Back" class="menu-item supplementary-table-menu k-grid-add" onclick="back()">
<img src="@Url.Content("~/Images/back_16.png")" /></button>
<button id="reg-view-next" title="Next" class="menu-item supplementary-table-menu" onclick="next()">
<img src="@Url.Content("~/Images/forward_16.png")" /></button>
<button id="reg-view-prev" title="Last" class="menu-item supplementary-table-menu" onclick="last()">
<img src="@Url.Content("~/Images/last_16.png")" /></button>
</div>
正是 data-uid 将使网格行选择处于事件状态。我找到了这个 forum
到目前为止这对我有用。如果有更好的答案,分享就是关怀。 :)
关于javascript - Kendo Grid 从按钮导航行(第一个、后一个、下一个、最后一个),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41437748/