从上一行获取数据

时间：2018-05-03 19:28:39

标签： javascript jquery kendo-ui

当我点击某一行时，我正试图获取上一行的数据，而且它并没有取得很大的成功。

作为示例...如果我单击包含＆＃34; PersonB＆＃34;的行，那么我应该从FirstName列获取前一行的值，即PersonA。

在网格的更改事件中，您可以看到我尝试使用prev（），但所有返回的内容都是一个对象，并且不确定如何从prev（）中获取所需的值。 / p>

＆＃13;
＆＃13; 
$(document).ready(() => {
  var data = [{
      ID: 1,
      FirstName: "PersonA",
      LastName: "123"
    },
    {
      ID: 2,
      FirstName: "PersonB",
      LastName: "456"
    },
    {
      ID: 3,
      FirstName: "PersonC",
      LastName: "789"
    }
  ];


  $("#GridList").kendoGrid({
    dataSource: {
      data: data
    },
    schema: {
      model: {
        fields: {
          ID: {
            type: "number"
          },
          FirstName: {
            type: "string"
          },
          LastName: {
            type: "string"
          }
        }
      }
    },
    filterable: false,
    columns: [{
        field: "ID",
        title: "ID",
        hidden: true
      },
      {
        field: "FirstName",
        title: "FirstName"
      },
      {
        field: "LastName",
        title: "LastName"
      }
    ],
    scrollable: true,
    sortable: true,
    pageable: false,
    selectable: "row",
    reorderable: false,
    groupable: false,
    resizable: true,
    columnMenu: false,
    dataBound: function() {
      //var grid = $("#GridList").data("kendoGrid");
      //for (var i = 0; i < grid.columns.length; i++) {
      //    grid.autoFitColumn(i);
      //}
    },
    change: function(e) {
      $('#Result').text();
      //var row = $(this).closest('tr');
      //var prev = row.prev();
      //console.log(prev);
    },
    height: 200
  });

});
＆＃13; 
#Result {
  font-size: 36px;
}
＆＃13; 
<link href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css">

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>


<div id="GridList"></div>
<label id='Result'></label>
＆＃13;
＆＃13;
＆＃13;

3 个答案:

答案 0 :(得分：2)

你可以这样做：

change: function(e) {
    $('#Result').text();
    var data = this.dataItem(this.select().prev());
    console.log(data);
}

当您点击PersonB时，会给您以下对象：

{
  "ID": 1,
  "FirstName": "PersonA",
  "LastName": "123"
}

＆＃13;
＆＃13; 
$(document).ready(() => {
  var data = [{
      ID: 1,
      FirstName: "PersonA",
      LastName: "123"
    },
    {
      ID: 2,
      FirstName: "PersonB",
      LastName: "456"
    },
    {
      ID: 3,
      FirstName: "PersonC",
      LastName: "789"
    }
  ];


  $("#GridList").kendoGrid({
    dataSource: {
      data: data
    },
    schema: {
      model: {
        fields: {
          ID: {
            type: "number"
          },
          FirstName: {
            type: "string"
          },
          LastName: {
            type: "string"
          }
        }
      }
    },
    filterable: false,
    columns: [{
        field: "ID",
        title: "ID",
        hidden: true
      },
      {
        field: "FirstName",
        title: "FirstName"
      },
      {
        field: "LastName",
        title: "LastName"
      }
    ],
    scrollable: true,
    sortable: true,
    pageable: false,
    selectable: "row",
    reorderable: false,
    groupable: false,
    resizable: true,
    columnMenu: false,
    dataBound: function() {
      //var grid = $("#GridList").data("kendoGrid");
      //for (var i = 0; i < grid.columns.length; i++) {
      //    grid.autoFitColumn(i);
      //}
    },
    change: function(e) {
      $('#Result').text();
      var selected = this.dataItem(this.select().prev());
      console.log(selected);
    },
    height: 200
  });

});
＆＃13; 
#Result {
  font-size: 36px;
}
＆＃13; 
<link href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css">

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>


<div id="GridList"></div>
<label id='Result'></label>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

当所选行是第一行时，您必须检查用例，但这里有一些有效的代码（请参阅下面的演示）

change: function(e) {
      var selectedRows = this.select();
      previousPerson = $(selectedRows).prev().find('td:nth-child(2)').text();

      $('#Result').text(previousPerson);
    },

＆＃13;
＆＃13; 
$(document).ready(() => {
  var data = [{
      ID: 1,
      FirstName: "PersonA",
      LastName: "123"
    },
    {
      ID: 2,
      FirstName: "PersonB",
      LastName: "456"
    },
    {
      ID: 3,
      FirstName: "PersonC",
      LastName: "789"
    }
  ];


  $("#GridList").kendoGrid({
    dataSource: {
      data: data
    },
    schema: {
      model: {
        fields: {
          ID: {
            type: "number"
          },
          FirstName: {
            type: "string"
          },
          LastName: {
            type: "string"
          }
        }
      }
    },
    filterable: false,
    columns: [{
        field: "ID",
        title: "ID",
        hidden: true
      },
      {
        field: "FirstName",
        title: "FirstName"
      },
      {
        field: "LastName",
        title: "LastName"
      }
    ],
    scrollable: true,
    sortable: true,
    pageable: false,
    selectable: "row",
    reorderable: false,
    groupable: false,
    resizable: true,
    columnMenu: false,
    dataBound: function() {
      //var grid = $("#GridList").data("kendoGrid");
      //for (var i = 0; i < grid.columns.length; i++) {
      //    grid.autoFitColumn(i);
      //}
    },
    change: function(e) {
      var selectedRows = this.select();
      selectedPerson = $(selectedRows).find('td:nth-child(2)').text();
      previousPerson = $(selectedRows).prev().find('td:nth-child(2)').text();
      //console.log(previousPerson);
      $('#Result').text(previousPerson);
    },
    height: 200
  });

});
＆＃13; 
#Result {
  font-size: 36px;
}
＆＃13; 
<link href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css">

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>


<div id="GridList"></div>
<label id='Result'></label>
＆＃13;
＆＃13;
＆＃13;

答案 2 :(得分：0)

一个可能的解决方案是找到当前选择的索引，然后从数据数组中获取索引-1：

$(document).ready(() => {
  var data = [{
      ID: 1,
      FirstName: "PersonA",
      LastName: "123"
    },
    {
      ID: 2,
      FirstName: "PersonB",
      LastName: "456"
    },
    {
      ID: 3,
      FirstName: "PersonC",
      LastName: "789"
    }
  ];


  $("#GridList").kendoGrid({
    dataSource: {
      data: data
    },
    schema: {
      model: {
        fields: {
          ID: {
            type: "number"
          },
          FirstName: {
            type: "string"
          },
          LastName: {
            type: "string"
          }
        }
      }
    },
    filterable: false,
    columns: [{
        field: "ID",
        title: "ID",
        hidden: true
      },
      {
        field: "FirstName",
        title: "FirstName"
      },
      {
        field: "LastName",
        title: "LastName"
      }
    ],
    scrollable: true,
    sortable: true,
    pageable: false,
    selectable: "row",
    reorderable: false,
    groupable: false,
    resizable: true,
    columnMenu: false,
    dataBound: function() {
      //var grid = $("#GridList").data("kendoGrid");
      //for (var i = 0; i < grid.columns.length; i++) {
      //    grid.autoFitColumn(i);
      //}
    },
    change: function(e) {
      var data = this.dataSource.data();
      var selectedRows = this.select();
      if(selectedRows.length > 0) {
        var dataItem = this.dataItem(selectedRows[0]);
        console.log('Selected ' + dataItem.FirstName);
        var index = -1;
        for(var i = 0; i < data.length; i++) {
          if(data[i].FirstName === dataItem.FirstName) {
            index = i;
           }
        }
        if(index >0) {
             dataItem = data[index -1];
             console.log('Previous ' + dataItem.FirstName);
        }
      }
    },
    height: 200
  });

});
#Result {
  font-size: 36px;
}
<link href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.common.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.default.min.css">
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2018.1.221/styles/kendo.mobile.all.min.css">

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/angular.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2018.1.221/js/kendo.all.min.js"></script>


<div id="GridList"></div>
<label id='Result'></label>

相关问题
最新问题