今天写了一天，写懵逼了......
先这样吧....
表格如下：
干了啥：
用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); };
新闻热点
疑难解答
