我希望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
}
});
答案 0 :(得分:2)
对象是一个无序的属性集合,因此不能确保您在字符串中看到的每个属性的顺序:
{"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");
&#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;
答案 1 :(得分:1)
您的问题是对象键始终按字母顺序排列。
尝试按以下方式订购密钥: -
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;