Question

你能帮我找一个剑道网格行选择的最佳方法吗？我需要使用下一个和上一个按钮逐行选择。我为此准备了示例代码。你能检查一下，让我知道是否有任何不妥之处，并建议我采取一个好的方法。

提前致谢。

<!DOCTYPE html>
<html>
<head>
    <title>KendoUI Test Page</title>
    <link href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.common.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.default.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.dataviz.min.css" rel="stylesheet" />
    <link href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.mobile.all.min.css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://cdn.kendostatic.com/2013.1.514/js/kendo.all.min.js"></script>
</head>
<body>
  <div id = "grid">
  </div>
  
  <input type="button" id="_Previous" onclick="Previous()" value="Previous" /> &nbsp; &nbsp; &nbsp; <input type="button" id="_Next" value="Next" onclick="Next()" />
  
  <script>
var dataSource = new kendo.data.DataSource({
  data: [
    { Page: "Page 1"},
    { Page: "Page 1"},
    { Page: "Page 1"},
    { Page: "Page 1"},
    { Page: "Page 1"},
    { Page: "Page 2"},
    { Page: "Page 2"},
    { Page: "Page 2"},
    { Page: "Page 2"},
    { Page: "Page 2"},
    { Page: "Page 3"},
    { Page: "Page 3"},
    { Page: "Page 3"},
    { Page: "Page 3"},
    { Page: "Page 3"}
  ],
  pageSize: 5
});
dataSource.fetch(function() {
  dataSource.page(2);
});
    
    $("#grid").kendoGrid({
      dataSource:dataSource,
      selectable:"row",
      pageable:true
    })
    
    function Previous()
    {
      var grid = $("#grid").data("kendoGrid");

        var dataRows = grid.items();
        var rowIndex = dataRows.index(grid.select());
      
      if(rowIndex == 0)
        {
         var currentPage = grid.dataSource.page();
          
          if(1 == currentPage)
            {
              alert("First Page, First Record.")
            }
          else{
        grid.dataSource.page(currentPage - 1);
          grid.select("tr:eq( 5 )");}
        }
        else
          {
        var rowindex1 = rowIndex;
        
        grid.select("tr:eq(" + rowindex1 + ")");
            }
    }
    
    function Next()
    {
       var grid = $("#grid").data("kendoGrid");

        var dataRows = grid.items();
        var rowIndex = dataRows.index(grid.select());
      
      if(rowIndex == 4)
        {
         var currentPage = grid.dataSource.page();
          
          if(grid.dataSource.totalPages() == currentPage)
            {
              alert("Last Page, Last Record.")
            }
          else{
        grid.dataSource.page(currentPage + 1);
          grid.select("tr:eq( 1 )");}
        }
        else
          {
        var rowindex1 = rowIndex + 2;
        
        grid.select("tr:eq(" + rowindex1 + ")");
            }
    }
    
</script>
  
</body>
</html>

剑道网格动态行选择

0 个答案: