如何在数据网格中显示由具有属性和值的对象组成的数组？答案

【问题标题】：How to display an array consisting of object with property and value in a data grid?如何在数据网格中显示由具有属性和值的对象组成的数组？
【发布时间】：2017-01-30 20:28:50
【问题描述】：

我有一个由对象组成的数组。每个对象都有属性和价值。属性是纬度、经度和名称。我需要在数据网格视图中显示这个数组。下面是我的数组，

任何人都可以分享示例或任何建议

谢谢！

【问题讨论】：

你使用的datagrid插件是jqGrid还是datatables还是其他？
我正在尝试使用 juqery 网格。还有其他方法吗？
我建议使用datatables.net，因为有很多帮助。

标签： javascript jquery arrays json datagrid

【解决方案1】：

试试这个：

$(function(){
var data = [{
  "Latitude": 18.00,
  "Longitude": 23.00,
  "Name": "Pune"
}, {
  "Latitude": 14.00,
  "Longitude": 24.00,
  "Name": "Mumbai"
}, {
  "Latitude": 34.00,
  "Longitude": -4.00,
  "Name": "Delhi"
},{
  "Latitude": 23.00,
  "Longitude": 23.00,
  "Name": "Jaipur"
}];
$.each(data,function(index,value) {

      row="<tr><td>"+value.Latitude+"</td><td>"+value.Longitude+"</td><td>"+value.Name+"</td><tr>";
  
  $("#grid").append(row);
});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="grid">
  <tr>
    <th>
      Latitude
    </th>
    <th>
      Longitude
    </th>
    <th>
      Place
    </th>
  </tr>
</table>

带有动态标题

但只有当你的所有对象都具有相同的属性时它才会起作用

$(function() {
  var data = [{
    "Latitude": 18.00,
    "Longitude": 23.00,
    "Name": "Pune"
  }, {
    "Latitude": 14.00,
    "Longitude": 24.00,
    "Name": "Mumbai"
  }, {
    "Latitude": 34.00,
    "Longitude": -4.00,
    "Name": "Delhi"
  }, {
    "Latitude": 23.00,
    "Longitude": 23.00,
    "Name": "Jaipur"
  }];
  header = "<tr>"
  $.each(data[0], function(prop, value) {
    header += "<th>" + prop + "</th>";
  });
  header += "</tr>"
  $("#grid").append(header);

  $.each(data, function(index, obj) {

    row = "<tr>";
    $.each(obj, function(prop, value) {
      row += "<td>" + value + "</td>";
    });
    row += "</tr>";

    $("#grid").append(row);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="grid">
</table>

【讨论】：

谢谢！但是有没有办法在不硬编码标题名称的情况下拥有动态表标题？

【解决方案2】：

您可以轻松地使用dataTables jquery plugin，并且可以使用非常大的文档和社区来帮助自定义数据表。

var dataSet = [{
  "Latitude": 18.00,
  "Longitude": 23.00,
  "Name": "Pune"
}, {
  "Latitude": 14.00,
  "Longitude": 24.00,
  "Name": "Mumbai"
}, {
  "Latitude": 34.004654,
  "Longitude": -4.005465,
  "Name": "Delhi"
},{
  "Latitude": 23.004564,
  "Longitude": 23.007897,
  "Name": "Jaipur"
}];
$(document).ready(function() {
    $('#example').DataTable( {
        data: dataSet,
        "columns": [
            { "data": "Name" ,"title":"Custom Name"},
            { "data": "Latitude" },
            { "data": "Longitude" },
            
        ]
    } );
} );

@import "https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css";

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Latitude</th>
                <th>Longitude</th>
                
            </tr>
        </thead>
        
    </table>

【讨论】：

谢谢！但是有没有办法在不硬编码标题名称的情况下拥有动态表标题？
我已经修改为获取列名的动态名称
如果您喜欢我的回答，请标记为正确并投票。 :)
我当然会。你能告诉我你在哪里修改以获得动态列名吗？
您在 HTML 中对其进行硬编码。它应该是动态的

【解决方案3】：

由于在标签问题中指定了 jquery，许多 jquery 插件允许生成数据网格。 jquery官网是开始挖网的好选择：

https://plugins.jquery.com/tag/datagrid/

【讨论】：