介绍两种方法,一种用JS结合Ajax画表格,一种用jquery jqgrid控件画,也会用到Ajax调用后台数据库。
1. JS画表格
a) 需要一个servle调用后台数据,参考‘fushionChars画统计图’里的介绍
b) HTML前端:
//html文件
<div id="detailTabShow"></div>
//js代码
$.ajax({
url : "/Web/CertificatePStatistics",
dataType : "json",
type : "POST",
data : {
SQL : encodeURI(detailSql)
},
async : false,
error : function() {
alert("加载数据错误");
return;
},
success : function(jsonData)
{
var tabVar="";
tabVar+="<table><thead><tr><th>证号</th><th>名称</th><th>人员</th>"
tabVar+="<th>工号</th><th>专业一</th><th>专业二</th><th>日期</th>";
tabVar+="<th>日期</th><th>状态1</th><th>状态2</th></tr></thead>";
if (jsonData.rows.length == 0) {
return;
}
for(var i=0;i<jsonData.rows.length;i++)
{
var dataArr=jsonData.rows[i];
tabVar+="<tr>";
tabVar+="<td>"+dataArr.ECNO+"</td>"; //证号
tabVar+="<td>"+dataArr.ECNAME+"</td>"; //名称
tabVar+="<td>"+dataArr.EMPNAME+"</td>"; //人员
tabVar+="<td>"+dataArr.EMPNO+"</td>"; //工号
tabVar+="<td>"+dataArr.ECMAGORONE+"</td>"; //专业一
tabVar+="<td>"+dataArr.ECMAGORTWO+"</td>"; //专业二
tabVar+="<td>"+dataArr.ECISSUEDATE+"</td>"; //日期
tabVar+="<td>"+dataArr.ECEFFECTIVEDATE+"</td>"; //有效日期
tabVar+="<td>"+dataArr.ECSTATUS+"</td>"; //状态1
tabVar+="<td>"+dataArr.ECBORROWSTATUS+"</td>"; //状态2
tabVar+="</tr>";
}
tabVar+="</table>";
//alert(tabVar);
document.getElementById("detailTabShow").innerHTML=tabVar;
}
});
2. jquery jqgrid控件
a)准备jquery和jqgrid的js文件
b)
//html代码
<table id="show_personal_msg"></table>
//Js代码:
$('#show_personal_msg').jqGrid({
//servlet类
url: '/WIZWeb/CertificatePStatistics',
//jqgrid参数区分大小写,否则报参数错误
datatype: 'json',
mtype : 'POST',
postData:{SQL : departmentSql},
colNames:['证号','员工工号','名称'],
colModel:[
{name:'EMPCERTID',index:'EMPCERTID', width:55},
{name:'EMPID',index:'EMPID', width:90},
{name:'ECNAME',index:'ECNAME', width:100}
],
jsonReader:{repeatitems : false},
onSelectRow: function(rowId,status){
}
});