jquery自动创建表格

XX_ctrl.js

 $scope.querys = function() {
	$http({
		method: 'post',
		cache: false,
		url: BaseURL,
		params: {
			BKZ059: $scope.form.BKZ059,
			start:  0,
			limit: 10000
		}
	}).success(function(response, status, headers, config) {
		
		$scope.jsonTableData=JSON.stringify(response.list);
		//发射数据
		$scope.$broadcast("nopagetable",$scope.jsonTableData);
		
	}).error(function(){
		//略
	});
}

test_table.js

/**标签属性**/
//var tableuniqueflag="nopagetable";
var isselectbox=$attrs.isselectbox;
var tableuniqueflag=$attrs.tableuniqueflag;

/**标签属性**/
var showcols=$scope[columnsDataName];//显示数据模板
var colattrs = new Array();//属性字段
var colwidths=new Array();//每列的宽度
var labelcols=new Array();//表头
var colattrshidden = new Array();//隐藏属性字段
var colattrshideindex=0;
var cells=showcols.length;//表格的列数
var rows="";//表格的行数
var jsontabledata=""; 
var replacetrs="";//替换模板


for(var i=0;i<showcols.length;i++){
	colattrs[i]=showcols[i].map;
	colwidths[i]=showcols[i].width;
	labelcols[i]=showcols[i].label;
	if(showcols[i].hide){
		colattrshidden[colattrshideindex++]=showcols[i].map;
	}
}

//接受发射过来的数据
$scope.$on(tableuniqueflag,function(e,datas){
	rows=(JSON.parse(datas)).length;
	jsontabledata=JSON.parse(datas);
	//创建表格并赋值
	$scope.createTr(rows,cells);
	//监听滚动，thead和tbody随动效果
	$scope.watchScroll();
});

//创建表格并赋值
$scope.createTr = function(rows,cells){
	console.log("创建"+rows+"行"+cells+"列的表格....");
	var tr=""; 
	var nn=0;//赋值语句
	var tdopt="";//tbody字段中复选框和序号
	var theadth="";//thead的字段
	var recordcount=1;
	for(var i=1;i<parseInt(rows)+2;i++){
		var rowid='\"row'+tableuniqueflag+i+'\"';
		tr="<tr ng-click="+"selectRow("+i+");"+" ng-mouseover="+"changecolor("+i+");"+" ng-mouseout=removeTempData(); id="+rowid+">";
		var td="";
		for(var j=1;j<parseInt(cells)+1;j++){
			
			var colattr = colattrs[j-1];//赋thead
			var tdid='\"'+tableuniqueflag+i+"r"+j+'\"';
			//i==1时thead
			if(i==1){
				if(j==1){
					// thead序号和全选
					var headselecttdid='\"headselecttdid'+tableuniqueflag+i+"r"+j+'\"';
					if(isselectbox=="true"){
						var allcheckbox='<input type="checkbox" id="headcheckbox1" ng-click="Allselect();"/>';
						theadth=theadth+"<th id="+headselecttdid+" style='width:45px;'><div style='width:26px;' nowap >"+allcheckbox+"</div></th>";
					}
					var headnumtdid='\"headnumtdid'+tableuniqueflag+i+"r"+j+'\"';
					theadth=theadth+"<th id="+headnumtdid+" style='width:80px;'><div style='width:50px;' nowap >序号</div></th>";
				}
				
				if(showcols&&showcols[j-1]&&showcols[j-1].hidden){
					theadth=theadth+"<th id="+tdid+"><div style='width:"+colwidths[j-1]+";display:none' nowap >"+labelcols[j-1]+"</div></th>";
				}else{
					theadth=theadth+"<th id="+tdid+" style='width:"+colwidths[j-1]+"'><div style='width:"+colwidths[j-1]+"' nowap >"+labelcols[j-1]+"</div></th>";
				}

			}else {
			//i!=1时tbody	
				 if(j==1){
					// tbody序号和全选
					tdopt="";
					if(isselectbox=="true"){
						var bodyselecttdid='\"bodyselecttdid'+tableuniqueflag+i+"r"+j+'\"';
						tdopt=tdopt+"<td style='text-align: center;width:26px;'><input type='checkbox' id='bodycheckbox"+(recordcount+1)+"'/></td>";
					}
					var bodynumtdid='\"bodynumtdid'+tableuniqueflag+i+"r"+j+'\"';
					tdopt=tdopt+"<td style='text-align: center;width:50px;'>"+recordcount+++"</td>";
					td=tdopt;
				}
				if(showcols&&showcols[j-1]&&showcols[j-1].hidden){
					td=td+"<td id="+tdid+" style='width:"+colwidths[j-1]+";display:none'>"+jsontabledata[nn][''+colattr+'']+"</td>";
				}else if(showcols&&showcols[j-1]&&showcols[j-1].cellTemplate){
				
					//单元格属性包含为cellTemplate，
					//给cellTemplate的标签的value赋值。不能有hidden属性
					var cellTemplate=showcols[j-1].cellTemplate;
					var cellkey=showcols[j-1].map;
					var containStr0='value="0"';
					var containStr='value=""';
					var jsontdvalue="";
					if(jsontabledata[nn][''+cellkey+'']!=null){
						jsontdvalue=jsontabledata[nn][''+cellkey+'']
					}
					if((cellTemplate.indexOf(containStr0)) != -1){
						console.log(showcols[j-1].map+"包含value=0");
						//console.log("value0="+jsontabledata[nn][''+cellkey+'']);
						cellTemplate=cellTemplate.replace(containStr0,('value='+'"'+jsontdvalue+'"'));
						
					}else if((cellTemplate.indexOf(containStr)) != -1){
						console.log(showcols[j-1].map+"包含value=''");
						//console.log("value="+jsontabledata[nn][''+cellkey+'']);
						cellTemplate=cellTemplate.replace(containStr,('value='+'"'+jsontdvalue+'"'));
					}
					td=td+"<td id="+tdid+" style='width:"+colwidths[j-1]+"'>"+cellTemplate+"</td>";
				}else {
						//数据模板是否包含二级代码转化
						if(showcols&&showcols[j-1]&&showcols[j-1].convert){
							var covertcode=MemCacheService.getSysCode(colattr,"00");
							var covertcodekey=jsontabledata[nn][''+colattr+''];
							td=td+"<td id="+tdid+" style='width:"+colwidths[j-1]+"'>"+covertcode[''+covertcodekey+'']+"</td>";
						}else{
							td=td+"<td id="+tdid+" style='width:"+colwidths[j-1]+"'>"+jsontabledata[nn][''+colattr+'']+"</td>";
						}
				}
			}
		}
		if(i!=1){
			nn++;
			tr=tr+td+"</tr>";
			replacetrs=replacetrs+tr;
		}
	}


	var tbody= 	'<div class="test-table-body" id="test-table-body" style="margin-left:0px;margin-top:-1px;">'+
					'<table>'+
						'<tbody>'+replacetrs+'</tbody>'+
					'</table>'+
				'</div>';

	var head=	'<div class="test-table-head" id="test-table-head" style="margin-left:0px;margin-top:-1px;">'+
					'<div class="test-table-header-track">'+
						'<table>'+
						'<thead><tr>'+theadth+'</tr></thead>'+
						'</table>'+
					'</div>'+
				'</div>';
	//console.log("替换的模板为tbody==="+tbody);

	$element.html('').append($compile(head+tbody)($scope));
	//$element.html('').append(head+tbody);
	$element.addClass('test-table').addClass('test-table-bordered').addClass('table-striped');
	$element.css('position', 'relative');

	//resetHeight();

}

$scope.Allselect = function(){
	
	if(document.getElementById("headcheckbox1").checked){
		$('input:checkbox').each(function() {
			$(this).prop('checked', true);
		});
		console.log("复选框全选.....");
	}else{
		$('input:checkbox').each(function () {
			$(this).removeAttr("checked");
		});
		console.log("复选框取消全选.....");
	}
}

数据模板：

$scope.newColumns = [
{ label: '明细流水号', map: 'BKF001', width: '100px'},
{ label: '医院项目名称', map: 'AKE006', width: '125px'},
{ label: '医疗发票项目类别', map: 'BKA063', width: '120px',convert:true},			      			
{ label: '扣款金额', map: 'AKB069', width: '65px',cellTemplate: '<input type="text" name="AKB069" class="cutpayment" ng-blur="checkeinput($event);" hidden="true" value="0"  	style="width: 100%; border: 1px solid #ddd;padding: 2px;height: 26px;background-color: #fff;">'},
{ label: '扣款原因', map: 'AKC269', width: '120px',cellTemplate:'<input type="text" name="AKC269" class="cutreason" hidden="true" value="" style="width:105px;border: 1px solid #ddd;padding: 2px;height: 26px;background-color: #fff;">'},
{ label: '剂型',  map: 'AKA070', width: '45px',convert:true},
{ label: '是否修改标识', map: 'MODIFIED', width: '120px',hidden:true }
];