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: function(rowId,status){

        

         }

      });