将网格中的所有记录提取到数组中

Question

单击 button 时，我想获取网格内的所有数据，这些数据将存储到一个数组中，因此我可以使用 ajax 函数解析为 php。但是我在网格 occLevel_ 中有一个循环列。我需要帮助如何使用 for 循环获取所有 occLevel_0 -> 3 值。

Full Demo

$("#grid").kendoGrid({
  columns: [
    { field: "Name" },
    { field: "occlevel_0" },
    { field: "occlevel_1" },
    { field: "occlevel_2" },
    { field: "occlevel_3" },
  ],
  dataSource: {
   data: [{
        "Name": "John",
        "occlevel_0": 11,
        "occlevel_1": 31,
        "occlevel_2": 51,
        "occlevel_3": 61
      }, {
        "Name": "Jane",
        "occlevel_0": 12,
        "occlevel_1": 32,
        "occlevel_2": 52,
        "occlevel_3": 62
      }, {
        "Name": "James",
        "occlevel_0": 13,
        "occlevel_1": 33,
        "occlevel_2": 53,
        "occlevel_3": 63
      }],
   schema:{
    model: {
     id: "id",
    }
   }
  },
  editable: true
});


$("#fetch_allData").kendoButton();
var button = $("#fetch_allData").data("kendoButton");
button.bind("click", function(e) {
  var grid = $('#grid').data('kendoGrid').dataSource.data();
  console.log(grid);

  var items = {
    method: "updateOccLevel" //function call in php
  };
  for ( var i=0; i < grid.length; i++ ) {  
    items["Name_" + i] = grid[i]['Name'],
    items["occlvl_" + i] = grid[i]['occlevel_' + i]  // ???
  }; 
  console.log(items);


  /*$.ajax({
    url: "./updateOccLevel.php",
    type: "POST",
    data: items,
    success : function (data) {
          alert('success');
    }         
  });*/ 

});

<div id="grid"></div>
<button id='fetch_allData' >Update Grid</button>

Answer 1

这样做：

const myObj ={
      columns: [
        { field: "Name" },
        { field: "occlevel_0" },
        { field: "occlevel_1" },
        { field: "occlevel_2" },
        { field: "occlevel_3" },
      ],
      dataSource: {
       data: [{
            "Name": "John",
            "occlevel_0": 11,
            "occlevel_1": 31,
            "occlevel_2": 51,
            "occlevel_3": 61
          }, {
            "Name": "Jane",
            "occlevel_0": 12,
            "occlevel_1": 32,
            "occlevel_2": 52,
            "occlevel_3": 62
          }, {
            "Name": "James",
            "occlevel_0": 13,
            "occlevel_1": 33,
            "occlevel_2": 53,
            "occlevel_3": 63
          }],
       schema:{
        model: {
         id: "id",
        }
       }
      },
      editable: true
    };

idArray = []

function func(obj) {
   idArray.push(obj["occlevel_0"]);
   if (!obj.children) {
       return
   }

   obj.children.forEach(child => func(child))
}


func(myObj);
console.log(idArray);

Answer 2

我不确定你想要什么，但你可以遍历对象属性。提取键和值。

var data = $('#grid').getKendoGrid().dataSource.data().toJSON();

var newItems = [];

for(var i = 0; i <  data.length; i++) {
  var item = data[i];
  var newItem = {};

  for (var prop in item) {
    console.log(prop + " = " +item[prop]);
    newItem[prop] = item[prop];
  }

  newItems.push(newItem);
}

console.log(newItems);

如果这不是您想要的，请用数组的外观更新问题

示例：Looping object properties

Answer 3

只需在现有循环中使用一个附加循环：

for ( var i=0; i < grid.length; i++ ) {  
    items["Name_" + i] = grid[i]['Name'];

    for (let n = 0; n <= 3; n++) {
        items["occlvl_" + i + "_" + n] = grid[i]['occlevel_' + n]  // ???
    }
};

工作片段：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.1.219/styles/kendo.default-v2.min.css"/>

    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2020.1.219/js/kendo.all.min.js"></script>
</head>
<body>
  
<div id="grid"></div>
  <button id='fetch_allData' >Update Grid</button>
<script>
  $("#grid").kendoGrid({
    columns: [
      { field: "Name" },
      { field: "occlevel_0" },
      { field: "occlevel_1" },
      { field: "occlevel_2" },
      { field: "occlevel_3" },
    ],
    dataSource: {
     data: [{
          "Name": "John",
          "occlevel_0": 11,
          "occlevel_1": 31,
          "occlevel_2": 51,
          "occlevel_3": 61
        }, {
          "Name": "Jane",
          "occlevel_0": 12,
          "occlevel_1": 32,
          "occlevel_2": 52,
          "occlevel_3": 62
        }, {
          "Name": "James",
          "occlevel_0": 13,
          "occlevel_1": 33,
          "occlevel_2": 53,
          "occlevel_3": 63
        }],
     schema:{
      model: {
       id: "id",
      }
     }
    },
    editable: true
  });
  
  
$("#fetch_allData").kendoButton();
var button = $("#fetch_allData").data("kendoButton");
button.bind("click", function(e) {
    var grid = $('#grid').data('kendoGrid').dataSource.data();
  
    var items = {
      method: "updateOccLevel" //function call in php
    };
    for ( var i=0; i < grid.length; i++ ) {  
   items["Name_" + i] = grid[i]['Name'];
      
      for (let n = 0; n <= 3; n++) {
       items["occlvl_" + i + "_" + n] = grid[i]['occlevel_' + n]  // ???
      }
    }; 
   console.log(items);
  
  
});
</script>
</body>
</html>

将网格中的所有记录提取到数组中

Fetch all record in the grid into an Array

javascript

jquery

kendo-ui