HTML5 webSQL动态查询前端数据库表

//HTML5 WEB SQL查询数据
$scope.queryCenterReimbursData = function(keyword,querycol){
	var lencr="0";
	//拼接sql
	var condition="";//拼过滤条件
	var conditiontemp="";//临时过滤条件变量
	var querycrsql="";//最后执行SQL
	var queryzxcols=new Array();//queryzxcols = ["1", "2"]
	var selcolsql="";//拼查询字段
	for(var i=0;i<colattrs.length;i++){
		selcolsql=selcolsql+" "+colattrs[i]+",";
	}
	selcolsql=selcolsql.substring(0,(selcolsql.length-1));//查询字段
	queryzxcols=querycol.split(",");
	for(var i=0;i<queryzxcols.length;i++){
		if(i==0){
			conditiontemp= colattrs[queryzxcols[i]]+" LIKE "+'\"'+keyword+'%\"';
		}else{
			conditiontemp=" OR "+colattrs[queryzxcols[i]]+" LIKE "+'\"'+keyword+'%\"';
		}
		condition=condition+conditiontemp;
	}
	//limit限制查询条数。谷歌的webSQL使用的sqlite数据库
	querycrsql=" SELECT "+selcolsql+" FROM ( SELECT *  FROM "+tableuniqueflag+" WHERE "+condition+" ) limit "+rowsize;
	if(""==keyword){
		querycrsql="SELECT "+selcolsql+" FROM "+tableuniqueflag+" limit "+rowsize ;
	}
	//console.log("查询的表querycrsql==="+querycrsql);
	//拼接sql
	//var db = openDatabase('mydb14', '1.0', 'Test DB', 6 * 1024 * 1024);
	var db = DataSourceService.getConnection();
	db.transaction(function (tx) {
		tx.executeSql(querycrsql, [], function (tx, results) {
			lencr = results.rows.length;
			//len temprow控制结果返回的条数
			var datacr="";//查询符合条件的中心报销二级代码
			var datasum="";
			for (var i = 0; i < lencr; i++){
				datacr='{';
				for(var j=0;j<showcols.length;j++){
					var colattrsj=showcols[j].map;
					if(j==((showcols.length)-1)){
						//json {"name":"张三",。。。。。。}
						datacr=datacr+'\"'+colattrsj+'\"'+":"+'\"'+results.rows.item(i)[''+colattrsj+'']+'\"';
					}else{
						datacr=datacr+'\"'+colattrsj+'\"'+":"+'\"'+results.rows.item(i)[''+colattrsj+'']+'\",';
					}
				}
				if(i==(lencr-1)){
					//拼接成json对象数组。[{json对象},{json对象},{json对象}]
					//最后一个json对象必须无逗号,否则JSON.parse(datasum);转化不成功。
					datacr=datacr+"}";
				}else{
					datacr=datacr+"},";
				}
				datasum=datasum+datacr;
			}
			datasum='['+datasum+']';
			console.log(datasum)
			tableresultjson=JSON.parse(datasum);
			if(lencr>0){
				if(lencr<rows){
					rows=lencr+1;
				}
				$scope.createMyTable(rows,cells);
				
				//赋标题
				for(var j=1;j<parseInt(cells)+1;j++){
					var titlecol=titlecols[j-1];
					var titleid="#"+tableuniqueflag+"1"+""+j;
					$(titleid).html(titlecol);
				}
				//赋表格内容
				var nn=0;
				for(var i=2;i<parseInt(rows)+1;i++){
					for(var j=1;j<parseInt(cells)+1;j++){
						var colattr = colattrs[j-1];
						var tdid="#"+tableuniqueflag+i+""+j;
						$(tdid).html(tableresultjson[nn][''+colattr+'']);
					}
					nn=nn+1;
				}
				//默认表格第一行选中(除标题行)
				$("#"+tableuniqueflag+"2").addClass("checktrcolor");
				$(mydivlocation).css('display','block');
				rows=rowsize;
			}//else{
			//	$(mydivlocation).css('display','none');
			//}
		}, null);
	});	
}

拼接的json对象数组

[
    {
"AKB020": "00001",
        "AKB021": "服务站1",
        "AKA020": "ftqcxdjdyhzsqwsfwz"
    },
    {
        "AKB020": "00002",
        "AKB021": "服务站2",
        "AKA020": "ftqdhmjdshsasqwsfwz"
    },
    {
        "AKB020": "00003",
        "AKB021": "服务站3",
        "AKA020": "ftqlgqjdlblsqwsfwz"
    }
]

应用截图：