Получить данные из предыдущего ряда

Question

Я пытаюсь получить данные предыдущей строки, когда нажимаю на строку, но не очень удачно.

В качестве примера ... Если я нажму на строку, содержащую «PersonB», то я должен получить значение предыдущей строки из столбца FirstName, которым будет PersonA.

В событии изменения сетки вы можете видеть, что я пытался использовать prev (), но все, что возвращалось, было объектом, и я не был уверен, как получить нужное мне значение из этого prev ().

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

});

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

Answer 1

Вам нужно будет проверить вариант использования, когда выбранная строка является первой, но вот какой-то код, который работает (см. Демонстрацию ниже)

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

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

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

});

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

Answer 2

Возможное решение - найти индекс текущего выбора и затем извлечь индекс - 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>

Answer 3

Вы можете сделать это так:

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

Что даст вам следующий объект при нажатии на PersonB:

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

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

});

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