js根据json对象数组动态生成表格

1. 需求：(1).ajax取得json对象数组后，根据数组内所有json对象的所有key和value生成相应的表格标题和表格数据；
   (2).不显示json数据的某些key；
   (3).对某些key进行先后排序显示。
   2.js代码：

(function(){

$("#queryButton").bind('click',function() {

$.ajax({ url:"...", type:"POST", dataType:"json", contentType:"application/json", data:{}, success: function(response, statusText, xhr) {}, error: function(jqXHR, textStatus, errorThrown) { alert("ajax error"); //var responseJson = response.hits.hits; var tableHeaderColumnsTemp = []; var tableHeaderColumns = []; var firstRowTableHeaderToFrontSort = new Array("firstRowHeader004","firstRowHeader005","firstRowHeader002","firstRowHeader001"); var excludeTableHeaderColumns = new Array("vjkigjeiogj","firstRowHeader003"); var _sourceJsonObjArray = [ { "firstRowHeader001": 495934, "firstRowHeader002": "log", "firstRowHeader003": "cat", "firstRowHeader004": [ "beats_input_codec_plain_applied", "beats_input_codec_plain_applied2", "beats_input_codec_plain_applied3", "beats_input_codec_plain_applied4" ], "firstRowHeader005": { "secondRowHeader001": { "thirdRowHeader001": "dfjfiue" }, "secondRowHeader002": { "thirdRowHeader002": "Marktet" }, "key1": { "key2": { "key3":{ "key4":{ "key5":["mostInnerValue1","mostInnerValue2","mostInnerValue3"], "key6":["mostInnerValue4","mostInnerValue5","mostInnerValue6"] } } } } } }, { "nvurhvyuefoe": ["value001","value002","value003","value004"], "rthhn": "jtjnbgbhruik", "abc": { "abd": "grthtyjkyiu", "bcd": "gfethntyjymy", "acd": "wqdegvgtrhx" }, "dedwefwef": "hythvtrbnyoq", "grtgr": { "7u65uj": { "mghhmujty": "rtetj" }, "ujjtyjt": { "basic": "Marktet" }, "jhjtkjtyr": "loiulyhgd", "dadqwe": 1, "fdsfw": 42332, "hhrtghtr": true, "cfjewiofhr": "jfu", "enfydqeg": 245577803567, "mbufhgr": "gtoeigjigo", "dewgbtyj": "fertrhyuknbfg" } }, { "vjkigjeiogj": [ "rwvebverqweju", "jtyjrgcvfgvrthyoi" ], "firstRowHeader005": { "secondRowHeader001": { "thirdRowHeader003": "dfjfiue" }, "secondRowHeader002": { "thirdRowHeader004": "Marktet" }, "secondRowHeader003": { "thirdRowHeader005": "Marktet" }, }, "last":{"key1": { "key2": { "key3":{ "key4":{ "key5":{ "key6":[{"key7":"value7"},{"key7-":"value7-"}] } } } }}}}]; //根据json对象数组得到所有标题 for (var i = 0; i < _sourceJsonObjArray.length; i++) { var _sourceJsonObj = _sourceJsonObjArray[i]; for(var p in _sourceJsonObj){ getTableHeaderFieldsArray(p,_sourceJsonObj[p],tableHeaderColumnsTemp,excludeTableHeaderColumns); } } //去掉重复的标题 $.unique(tableHeaderColumnsTemp); //所有含有相同上层父标题的标题存放在数组的相邻位置 var tableHeaderRowNum = getTableHeaderRowNum(tableHeaderColumnsTemp); var tableHeaderColumnsTemp2 = []; placeHeaderColumns(0,tableHeaderColumnsTemp,tableHeaderRowNum,tableHeaderColumnsTemp2); //第一行标题排序 sortFirstRowHeaderColumns(firstRowTableHeaderToFrontSort,tableHeaderColumnsTemp2,tableHeaderColumns); //创建或刷新表格 createTable(tableHeaderColumns,_sourceJsonObjArray,excludeTableHeaderColumns); }}) }); })();

function placeHeaderColumns(i,tableHeaderColumnsTemp,tableHeaderRowNum,tableHeaderColumnsTemp2) { var tableHeaderColumnsTemp3 = []; var fatherFieldsArray = []; for (var index in tableHeaderColumnsTemp) { var header = tableHeaderColumnsTemp[index]; if (header.indexOf(".") <= 0) { tableHeaderColumnsTemp3.push(header); } else if (header.indexOf(".") > 0) { if ((header.split(".").length - 1) <= i) { tableHeaderColumnsTemp3.push(header); continue; } else { var fields = header.split("."); var fatherFields = ""; for (var j = 0; j <= i; j++) { if (j == 0) { fatherFields = fields[0]; } else { fatherFields += "." + fields[j]; } } if (!hasDirectHeader(fatherFields,fatherFieldsArray)) { for(var innerIndex in tableHeaderColumnsTemp) { var innerHeader = tableHeaderColumnsTemp[innerIndex]; if (innerHeader.indexOf(".") > 0 && (innerHeader.split(".").length - 1) > i) { var innerHeaderArray = innerHeader.split("."); var innerFatherFields for (var j = 0; j <= i; j++) { if (j == 0) { innerFatherFields = innerHeaderArray[0]; } else { innerFatherFields += "." + innerHeaderArray[j]; } } if (innerFatherFields == fatherFields) { tableHeaderColumnsTemp3.push(innerHeader); } } } fatherFieldsArray.push(fatherFields); } else { continue; } } } } if (i < (tableHeaderRowNum - 2)) { placeHeaderColumns(i+1,tableHeaderColumnsTemp3,tableHeaderRowNum,tableHeaderColumnsTemp2); } else { for (var index in tableHeaderColumnsTemp3) { tableHeaderColumnsTemp2.push(tableHeaderColumnsTemp3[index]); } } } function sortFirstRowHeaderColumns(firstRowTableHeaderToFrontSort,tableHeaderColumnsTemp,tableHeaderColumns) { for (var index in firstRowTableHeaderToFrontSort) { var sortHeader = firstRowTableHeaderToFrontSort[index]; if (hasDirectHeader(sortHeader,tableHeaderColumnsTemp)) { tableHeaderColumns.push(sortHeader); } else if (hasSubHeaderContainingHeader(sortHeader,tableHeaderColumnsTemp)) { for (var j = 0,len = tableHeaderColumnsTemp.length; j <len; j++) { if (tableHeaderColumnsTemp[j].indexOf(sortHeader + ".") == 0) { tableHeaderColumns.push(tableHeaderColumnsTemp[j]); } } } } for (var index in tableHeaderColumnsTemp) { var header = tableHeaderColumnsTemp[index]; var hasThisHeader = false; for (var inIndex in tableHeaderColumns) { if (tableHeaderColumns[inIndex] == header) { hasThisHeader = true; break; } } if (!hasThisHeader) { tableHeaderColumns.push(header); } } } function hasDirectHeader(field,tableHeaderColumns) { var has = false; for (var index in tableHeaderColumns) { if (tableHeaderColumns[index] == field) { has = true; break; } } return has; } function hasSubHeaderContainingHeader(field,tableHeaderColumns) { var has = false; for (var index in tableHeaderColumns) { if (tableHeaderColumns[index].indexOf(field + ".") == 0) { has = true; break; } } return has; } function getTableHeaderFieldsArray(key,value,tableHeaderColumns,excludeTableHeaderColumns) { if (value instanceof Array) { for(var i=0,len=value.length;i<len;i++) { var iterationValue = value[i]; if (iterationValue instanceof Object) { for (var p in iterationValue) { getTableHeaderFieldsArray(key + "." + p,iterationValue[p],tableHeaderColumns,excludeTableHeaderColumns); } } else { if (!isExcludeTableHeaderColumn(excludeTableHeaderColumns,key)) { tableHeaderColumns.push(key); } } } } else if (value instanceof Object) { for(var p in value){ getTableHeaderFieldsArray(key + "." + p,value[p],tableHeaderColumns,excludeTableHeaderColumns); } } else { if (!isExcludeTableHeaderColumn(excludeTableHeaderColumns,key)) { tableHeaderColumns.push(key); } } } function isExcludeTableHeaderColumn(excludeTableHeaderColumns,field) { var isExcludeTableHeaderColumn1 = false; for (var k = 0; k < excludeTableHeaderColumns.length; k++) { if (excludeTableHeaderColumns[k] == field) { isExcludeTableHeaderColumn1 = true; break; } } return isExcludeTableHeaderColumn1; } function getTableHeaderRowNum(tableHeaderColumns) { var tableHeaderRowNum = 1; for (var i = 0; i < tableHeaderColumns.length; i++) { if (tableHeaderColumns[i].indexOf(".") > 0) { var fields = tableHeaderColumns[i].split("."); if (fields.length > tableHeaderRowNum) { tableHeaderRowNum = fields.length; } } } return tableHeaderRowNum; } function createTable(tableHeaderColumns,_sourceJsonObjArray,excludeTableHeaderColumns) { if ($("#logTable").length > 0) { $("#logTable").remove(); } if (_sourceJsonObjArray.length == 0) { alert("无结果"); return; } //表格标题行行数 var tableHeaderRowNum = getTableHeaderRowNum(tableHeaderColumns); //创建表格 var table = $("<table id = \"logTable\" aligh=\"center\" border=\"1\" cellspacing=\"0\" cellpadding=\"0\">"); table.appendTo($("#logTableDiv")); //创建表格标题 recursionToCreateTableHeader(table,0,tableHeaderRowNum,tableHeaderColumns); //填充数据 fillDataToTable(table,tableHeaderColumns,_sourceJsonObjArray,excludeTableHeaderColumns); $("#logTable").append("</table>"); } function recursionToCreateTableHeader(table,i,tableHeaderRowNum,tableHeaderColumns) { var trHeader = $("<tr></tr>"); trHeader.appendTo(table); var tableHeaderColumnsForSecondRow = []; var multiColumnHeaderArray = []; for (var j = 0; j < tableHeaderColumns.length; j++) { if (tableHeaderColumns[j].indexOf(".") < 0) { if (i == 0) { var td = $("<td aligh=\"center\" rowspan='" + (tableHeaderRowNum - i) + "'>" + tableHeaderColumns[j] + "</td>"); td.appendTo(trHeader); } } else if (tableHeaderColumns[j].split(".").length > i) { var headersArray = tableHeaderColumns[j].split("."); var header = headersArray[i]; if (tableHeaderColumns[j].split(".").length - i == 1) { var td = $("<td aligh=\"center\" rowspan='" + (tableHeaderRowNum - i) + "'>" + header + "</td>"); td.appendTo(trHeader); continue; } var headerToCompare = ""; for (var k = 0; k <= i; k++) { if (k == 0) { headerToCompare = headersArray[0]; } else { headerToCompare = headerToCompare + "." + headersArray[k]; } } var subHeadersNum = 0; for (var k = 0; k < tableHeaderColumns.length; k++) { if (tableHeaderColumns[k].indexOf(headerToCompare + ".") == 0) { subHeadersNum++; } } //tableHeaderColumnsForSecondRow.push(tableHeaderColumns[j].replace(header + ".","")); var has = false; if (multiColumnHeaderArray.length > 0) { var len = multiColumnHeaderArray.length; while (--len >= 0) { if (multiColumnHeaderArray[len] == headerToCompare) { has = true; break; } } } if (subHeadersNum > 1) { if (has) { continue; } else { var td = $("<td aligh=\"center\" colspan='" + subHeadersNum + "'>" + header + "</td>"); td.appendTo(trHeader); multiColumnHeaderArray.push(headerToCompare); } } else { var td = $("<td aligh=\"center\">" + header + "</td>"); td.appendTo(trHeader); } } } if (i <= tableHeaderRowNum) { recursionToCreateTableHeader(table,i+1,tableHeaderRowNum,tableHeaderColumns); } } function fillDataToTable(table,tableHeaderColumns,_sourceJsonObjArray,excludeTableHeaderColumns) { for (var i = 0; i < _sourceJsonObjArray.length; i++) { var thisObjHeaderFieldArray = []; var thisObjHeaderFieldAndValueArray = []; var _sourceJsonObj = _sourceJsonObjArray[i]; for(var p in _sourceJsonObj){//遍历json对象的每个key/value对,p为key getTableHeaderFieldsArray(p,_sourceJsonObj[p],thisObjHeaderFieldArray,excludeTableHeaderColumns); } for(var p in _sourceJsonObj){ getTableHeaderFieldsAndValueArray(p,_sourceJsonObj[p],thisObjHeaderFieldAndValueArray,excludeTableHeaderColumns); } $.unique(thisObjHeaderFieldArray); //得到对象所占的表格最大行数 var thisObjHeaderRepetableFields = []; for (var j=0,len=thisObjHeaderFieldAndValueArray.length;j<len;j++) { var obj = thisObjHeaderFieldAndValueArray[j]; for (var key in obj) { thisObjHeaderRepetableFields.push(key); } } var fieldDataNumsObj={}; for(var j=0,len=thisObjHeaderRepetableFields.length;j<len;j++){ if(fieldDataNumsObj[thisObjHeaderRepetableFields[j]]){ fieldDataNumsObj[thisObjHeaderRepetableFields[j]]++; } else{ fieldDataNumsObj[thisObjHeaderRepetableFields[j]]=1; } } var thisObjTableRowNum = 0; for (var key in fieldDataNumsObj) { var num = fieldDataNumsObj[key]; if (num > thisObjTableRowNum) { thisObjTableRowNum = num; } } recursionToFillSingleObjDataToTable(0,table,tableHeaderColumns,thisObjHeaderFieldArray,thisObjHeaderFieldAndValueArray,thisObjTableRowNum,fieldDataNumsObj); } } function getTableHeaderFieldsAndValueArray(key,value,thisObjHeaderFieldAndValueArray,excludeTableHeaderColumns) { if (value instanceof Array) { for(var i = 0, l = value.length; i < l; i++) { var iterationValue = value[i]; if (iterationValue instanceof Object) { for (var p in iterationValue) { getTableHeaderFieldsAndValueArray(key + "." + p,iterationValue[p],thisObjHeaderFieldAndValueArray,excludeTableHeaderColumns); } } else { if (!isExcludeTableHeaderColumn(excludeTableHeaderColumns,key)) { var obj = {}; obj[key] = iterationValue; thisObjHeaderFieldAndValueArray.push(obj); } } } } else if (value instanceof Object) { for(var p in value){//遍历json对象的每个key/value对,p为key getTableHeaderFieldsAndValueArray(key + "." + p,value[p],thisObjHeaderFieldAndValueArray,excludeTableHeaderColumns); } } else { if (!isExcludeTableHeaderColumn(excludeTableHeaderColumns,key)) { var obj = {}; obj[key] = value; thisObjHeaderFieldAndValueArray.push(obj); } } } function recursionToFillSingleObjDataToTable(count,table,tableHeaderColumns,thisObjHeaderFieldArray,thisObjHeaderFieldAndValueArray,thisObjTableRowNum,fieldDataNumsObj) { var trHeader = $("<tr></tr>"); trHeader.appendTo(table); var subTableHeaderColumns = []; var subThisObjHeaderFieldAndValueArray = []; //填充数据 for (var i = 0; i < tableHeaderColumns.length; i++) { var header = tableHeaderColumns[i]; var containThisHeader = false; for (var j = 0; j < thisObjHeaderFieldArray.length; j++) { var thisObjHeader = thisObjHeaderFieldArray[j]; if (thisObjHeader == header) { containThisHeader = true; var thisObjHeaderAndValueObj; for (var k = 0; k < thisObjHeaderFieldAndValueArray.length; k++) { thisObjHeaderAndValueObj = thisObjHeaderFieldAndValueArray[k]; if (thisObjHeaderAndValueObj[thisObjHeader] != undefined) { var thisObjHeaderValue = thisObjHeaderAndValueObj[thisObjHeader]; var fieldDataNum = fieldDataNumsObj[thisObjHeader]; thisObjHeaderFieldAndValueArray[k] = "";  var rowSpan; if (fieldDataNum > 1) { rowSpan = 1; subTableHeaderColumns.push(thisObjHeader); } else if (fieldDataNum == 1) { rowSpan = thisObjTableRowNum - count; } var td = $("<td aligh=\"center\" rowspan='" + rowSpan + "'>" + thisObjHeaderValue + "</td>"); td.appendTo(trHeader); fieldDataNumsObj[thisObjHeader] = fieldDataNum - 1; break; } } break;  } } if (containThisHeader == false) { var td = $("<td aligh=\"center\" rowspan='" + thisObjTableRowNum + "'></td>"); td.appendTo(trHeader); } } if (count < thisObjTableRowNum) { recursionToFillSingleObjDataToTable(count + 1,table,subTableHeaderColumns,thisObjHeaderFieldArray,thisObjHeaderFieldAndValueArray,thisObjTableRowNum,fieldDataNumsObj) } }

4.代码说明：(1)如果要亲测的话，除了该js文件，还需要一个引用该js文件html文件，需要在html文件里引入jQuery相关文件；(2).把处理数据的代码写在error回调函数里，是为了方便测试，只要有浏览器就可以测试，ajax的请求url可以随便写，报错了就直接进入到error回调函数里，在error回调函数里写死数据，在这里可以向数组中添加任意深度的json对象，不必每个json对象的key都是一样。

5.生成表格结果如下：