Kendo Grid 从按钮导航行（第一个、返回、下一个、最后一个）

Question

我想浏览 Kendo-Grid 上的行。我有 4 个按钮，第一个、上一个、下一个和最后一个。单击该按钮时，它将突出显示 Kendo-Grid 中的记录。我不确定如何实现这一目标。我可以在单击按钮上获取行索引，但我不能让 Kendo-Grid 突出显示该行并提取要在文本框中显示的记录。这是我的一些代码：

正在查看

<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);
                }

我是剑道新手，已经花了几个小时弄清楚该怎么做。

Answer 1

经过如此多的尝试和错误并在网上搜索后，我想出了这个解决方案：

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>

数据 uid 将使网格行选择处于活动状态。我找到了这个forum

到目前为止，这对我有用。如果有更好的答案，分享就是关怀。 :)

Answer 2

这个怎么样：

<!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>

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" }
  ],
  dataSource: [
    { name: "a1", age: 30 },
    { name: "a2", age: 33 },
    { name: "a3", age: 30 },
    { name: "a4", age: 33 },
    { name: "a5", age: 30 },
    { name: "a6", age: 33 },
    { name: "a7", age: 30 },
    { name: "a8", age: 33 }
  ],
  selectable: "single, row"
});

  var grid = $("#grid").data("kendoGrid");

  function selectionChanged() {
    let selected = grid.select();
    if (selected[0]) {
      console.log(document.getElementById("label"));
      document.getElementById("label").value = grid.dataItem(selected).name;
    }
  }

  function selectFirst() {
    grid.select("tr:first");

    selectionChanged();
  }

  function selectLast() {
    grid.select("tr:last");

    selectionChanged();
  }

  function selectNext() {
    let selected = grid.select();
    if (selected[0]) {
      let index = (selected[0].rowIndex + 1) % grid.items().length;
      grid.select("tr:eq(" + index + ")");
    }

    selectionChanged();
  }

  function selectPrev() {
    let selected = grid.select();
    if (selected[0]) {
      let index = selected[0].rowIndex - 1;
      grid.select("tr:eq(" + index + ")");
    }

    selectionChanged();
  }

</script>
  <button onclick="selectFirst()">First</button>
  <button onclick="selectLast()">Last</button>
  <button onclick="selectPrev()">Previous</button>
  <button onclick="selectNext()">Next</button>
  <br>
  Selected: <input type="text" id="label" readonly></input>
</body>
</html>