jquery动态生成table，只可以横向或纵向的合并

今天写了一天，写懵逼了......

先这样吧....

表格如下：

干了啥：

用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);
	};