JS画表格

 介绍两种方法，一种用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: [b]function(rowId,status){
        
         }
      });