Question

我希望Html表反映json中显示的相同列顺序。我期待着......

公司，2007年，2008年，2009年

这是data.d中的json响应

[{ “公司”：“ABC 信息技术 “ ”2007“： ”3“， ”2008“： ”3“， ”2009“： ”4“}，{ ”本公司“：” TPS 软件 “ ”2007“： ”6“， ”2008“： ”8“， ”2009“： ”6“}，{ ”本公司“：” XYZ InfoSystem”， “2007”： “1”， “2008”： “3”， “2009”： “6”}]

创建Html表的函数返回一个列顺序为......

2007,2008,2009，Company

以下脚本完美地返回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函数添加一个新参数，该函数包含必须遵守其顺序的键的数组（因此，按索引排序）。

我的片段：

＆＃13;

$.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");

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div id="output" style="margin: 10px;"></div>

＆＃13;

Answer 2

您的问题是对象键始终按字母顺序排列。

尝试按以下方式订购密钥： -

＆＃13;

function sortAlphaThenNumberic(a, b) {
  if (!isNaN(a) && !isNaN(b))
    return a > b;
  if (isNaN(a) && isNaN(b))
    return a.toLowerCase() > b.toLowerCase();
  if (isNaN(a))
    return false;
  return true;
}

$.makeTable = function(mydata) {
  var table = $('<table class="table table-striped table-bordered" >');
  var tblHeader = "<tr>";

  var orderedKeys = Object.keys(mydata[0]).sort(sortAlphaThenNumberic);

  for (var k in orderedKeys) tblHeader += "<th>" + k + "</th>";
  tblHeader += "</tr>";
  $(tblHeader).appendTo(table);
  $.each(mydata, function(index, value) {
    var TableRow = "<tr>";
    $.each(orderedKeys, function(key, val) {
      TableRow += "<td>" + value[val] + "</td>";
    });
    TableRow += "</tr>";
    $(table).append(TableRow);
  });
  return ($(table));
};

＆＃13;

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

2 个答案: