jquery json以正确的列顺序动态html表

Question

我希望 Html 表反射(reflect)与 json 中所示相同的列顺序。我很期待这个...

公司，2007年、2008年、2009年

这是 data.d 中的 json 响应

[{"Company":"ABC Infotech","2007":"3","2008":"3","2009":"4"},{"Company":"TPS Software","2007":"6","2008":"8","2009":"6"},{"Company":"XYZ InfoSystem","2007":"1","2008":"3","2009":"6"}]

创建 Html 表的函数返回列顺序，如下所示...

2007年、2008年、2009年，公司

以下脚本完美返回 json。我尝试过各种 json 到 html 表脚本，当通过 eval 或 JSON.parse 转换时，它们似乎正在对列名称进行排序？

有解决办法吗？

$(document).ready(function () {

    //the div in the page...
    //<div id="output"style="margin: 10px;"></div>

    $.makeTable = function (mydata) {
        var table = $('<table class="table table-striped table-bordered" >');
        var tblHeader = "<tr>";
        for (var k in mydata[0]) tblHeader += "<th>" + k + "</th>";
        tblHeader += "</tr>";
        $(tblHeader).appendTo(table);
        $.each(mydata, function (index, value) {
             var TableRow = "<tr>";
             $.each(value, function (key, val) {
                 TableRow += "<td>" + val + "</td>";
             });
             TableRow += "</tr>";
             $(table).append(TableRow);
        });
        return ($(table));
    };

    return_pivot();
    function return_pivot() {
        //get file count
        var jsonText = JSON.stringify({
            new_file: "DataForPivot.xls",
            row_field: "Company",
            data_field: "CTC",
            column_fields: "Year"
        });

        $.ajax({
            type: "POST",
            url: "Pivot.aspx/pivot",
            data: jsonText,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                if (data.d != "0") {
                    console.log(data.d)
                    var mydata = eval(data.d);
                    var table = $.makeTable(mydata);
                    $(table).appendTo("#output");
                } 
            }
        }); //end ajax call
    }
});

Answer 1

对象是属性的无序集合，因此每个属性的顺序(就像您在字符串中看到的那样)并不确定:

{"Company":"ABC Infotech","2007":"3","2008":"3","2009":"4"}

要保留这样的顺序，您可以向 makeTable 函数添加一个新参数，其中包含必须遵守顺序的键数组(因此按索引排序)。

我的片段:

$.makeTable = function (mydata, orderToRespect) {
  var table = $('<table class="table table-striped table-bordered" >');
  var tblHeader = "<tr>";
  orderToRespect.forEach(function(ele, index) {
    tblHeader += "<th>" + ele + "</th>";
  });
  tblHeader += "</tr>";
  $(tblHeader).appendTo(table);
  $.each(mydata, function (index, value) {
    var TableRow = "<tr>";
    orderToRespect.forEach(function(ele, index) {
      TableRow += "<td>" + value[ele] + "</td>";
    });
    TableRow += "</tr>";
    $(table).append(TableRow);
  });
  return ($(table));
};


//
// your data
// 

var mydata = [{"Company": "ABC Infotech", "2007": "3", "2008": "3", "2009": "4"},
                {"Company": "TPS Software", "2007": "6", "2008": "8", "2009": "6"},
                {"Company": "XYZ InfoSystem", "2007": "1", "2008": "3", "2009": "6"}];

//
// call the makeTable function with a new parameter
// containing the order to respect
//
var table = $.makeTable(mydata, ['Company', '2007', '2008', '2009']);


$(table).appendTo("#output");

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


<div id="output" style="margin: 10px;"></div>