走了好多弯路,主要是只是考虑了一下方案,没有画出方案流程图,导致实现的过程中重新思考流程以至于紊乱;
PS:想到设计思路,画下流程思路图或步骤,落实以后再进行着手实现,会事半功倍,切记。。。切记。。。。
步骤:
- 处理success:function(data)-> data tempKeys
- 根据1的处理 渲染表头
- 表体内容的渲染 逐行渲染
- 根据1的处理 得到需要的行数 data.length
- 为每一行加入列 tempKeys
- 为该行的每一列进行赋值 $(“td[name=’+colName+”‘]”).text();
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43
| if(data){ //对返回的数据进行加工处理 var jsonKeys = {},tempKeys=[]; data.forEach(function(data){ for(var key in data){ if(!jsonKeys[key]){ jsonKeys[key]=true; tempKeys.push(key); } } }); //增加表头 var theadStr=""; $('#tab thead').empty("");//清空表头 theadStr+="<tr><th></th>"; tempKeys.forEach(function(key){ var thStr = "<th class='"+key+"'>"+key+"</th>"; theadStr+=thStr; }); theadStr+="</tr>"; $('#tab thead').append(theadStr);
//增加表的内容 var length = data.length; $('#tab tbody').empty("");//清空表的内容 for(var j=0;j<length;j++){//依次输出每一行数据 var tbodyRowStr=""; tbodyRowStr+="<tr class='row"+j+"'>" tbodyRowStr+="<td align='center'><input type='checkbox' name='checkGroup'/></td>"; tempKeys.forEach(function(key){ var tdStr = "<td name='"+key+j+"'>"+"</td>";//渲染该行的每一列 tbodyRowStr+=tdStr; }); tbodyRowStr+="</tr>"; $('#tab tbody').append(tbodyRowStr);//渲染每一行 var row = data[j]; for(var col in row){//为当前行的列赋值 var text = row[col]; var colName = col+j; $("td[name='"+colName+"']").text(text); } } }
|
日积月累,加油!