今天寫了一天，寫懵逼了......
先這樣吧....
表格如下：
干了啥：
用json做了一個數據字典，存儲表格的名目(就是姓名、性別等等的這些名稱)
然后用jquery將這個字典里的值拿出來，用拼字符串的方法將表格渲染出來后插入tbody中。
json格式如下：
[ {"cname":"姓名","ename":"fullName","cols":"","rows":"","contentType":"0","editType":"0"}, {"cname":"照片預覽","ename":"","cols":"","rows":"5","contentType":"1","editType":"3"}, {"cname":"曾用名","ename":"aliasName","cols":"","rows":"","contentType":"0","editType":"0"}, {"cname":"性別","ename":"genderName","cols":"","rows":"","contentType":"0","editType":"0"}, {"cname":"教職工號","ename":"employeeCode","cols":"","rows":"","contentType":"0","editType":"0"}, {"cname":"國籍/地區","ename":"nationality","cols":"","rows":"","contentType":"0","editType":"0"}, {"cname":"身份證件類型","ename":"idCardTypeName","cols":"","rows":"","contentType":"0","editType":"0"}, {"cname":"身份證件號","ename":"idCardNo","cols":"","rows":"","contentType":"0","editType":"0"}]好處：
實現方法肯定是比直接在html里面寫這個表格要費事兒一點兒，
但是當這個表格被應用于多個地方而且表格名目條數過多的時候，
如果要大量修改的話，其實是一件非常糟心的事兒
考慮的比較少：
每行只放兩個條目、
每個條目只考慮橫向或縱向合并、
橫向合并時，
當處在1號位上時，則這行只放一個條目；
當處在2號位上時，則結束這一行，新增一個tr行，新增的tr行只放一個條目。
縱向合并時，
則記錄需要縱向合并的行數。
啊，代碼如下......
第一次寫這種東西.....肯定是有很多需要優化的地方，先記錄一下：
var getLine = function(it,ins,type){ switch (type) { case 1: var tdline = '<td colspan="" rowspan="" class="t_name">'+it.cname+'</td>;' tdline += '<td colspan="3" rowspan="" class="t_data data" name="'+it.ename+'"></td>'; break; case 0: var tdline = '<td colspan="'+it.cols+'" rowspan="'+it.rows+'" class="t_name">'+it.cname+'</td>;' tdline += '<td colspan="'+it.cols+'" rowspan="'+it.rows+'" class="t_data data" name="'+it.ename+'"></td>'; break; default: break; } if(ins == 2){tdline += "</tr>"}; return tdline; }; var loadTpl = function(data){ var dataLen = data.length; var tplStr = []; //模板 var rowCount = 0; //獲取縱向合并的數目 var lineStr; //一行tr的內容 var lineCount = 0;//一行的塊數計算 for(var i in data){ if(data[i].rows > 0){ rowCount = data[i].rows; } if(lineCount == 0){lineStr = "<tr>";} if(rowCount > 0 || data[i].cols > 0){ if(rowCount > 0){ --rowCount; lineStr += getLine(data[i],2,0); tplStr.push(lineStr); lineStr = ""; lineCount = 0; } if(data[i].cols > 0){ if(lineCount == 0){ lineStr += getLine(data[i],2,1); tplStr.push(lineStr); lineStr = ""; lineCount = 0; }else{ lineStr += "</tr><tr>"; lineStr += getLine(data[i],2,1); tplStr.push(lineStr); lineStr = ""; lineCount = 0; } } }else{ switch (lineCount) { case 0: lineStr += getLine(data[i],1,0); lineCount++; if(dataLen-1 == i){ lineStr += "</tr>"; tplStr.push(lineStr); lineStr = ""; lineCount = 0; } break; case 1: lineStr += getLine(data[i],2,0); tplStr.push(lineStr); lineStr = ""; lineCount = 0; break; default: break; } } }; dom.find(".fragment-content table tbody").html(tplStr); };寫了三次......每次寫的都不對......
結果下班前的半個小時，一次性搞定了......
狀態不對真可怕......
***********************************************2月8日分割線******************************************************
昨晚給我老大瞄了一眼代碼，拼字符串被罵了。
會阻礙js的運行速度，要改用push。
待會兒去百度一下。
出了一個問題....
var loadTpl = function(data){ var tplStr ; $.getJSON("../js/teacherInfoTpl.json",function(data){ tplStr = archivesSet.dataRender(data); //模板 }); dom.find(".fragment-content table tbody").html(tplStr); };這里對tplStr的賦值出了getJSON這個方法居然取不到值。var loadTpl = function(data){ var tplStr ; $.getJSON("../js/teacherInfoTpl.json",function(data){ tplStr = archivesSet.dataRender(data); //模板 dom.find(".fragment-content table tbody").html(tplStr); }); };只有在getJSON內部才能去將tplStr html進tbody里
...百度了一下.....原來是getJSON方法和console.log異步執行的問題......
百度結果戳這里
問題解答是這樣的：
因為getJson是異步執行的，即console.log和getJson是一塊執行的，并沒有getJson執行完再執行console.log，所以全局變量并沒有賦值就輸出了解決辦法：在getJson前面加一句$.AjaxSettings.async = false;
所以改成下面這樣，加一行代碼就可以了
var loadTpl = function(data){ var tplStr; $.ajaxSettings.async = false; $.getJSON("../js/teacherInfoTpl.json",function(data){ tplStr = archivesSet.dataRender(data); //模板 }); dom.find(".fragment-content table tbody").html(tplStr); };
新聞熱點
疑難解答
