从数据库从读取数据动态生成JS表格脚本

来源：互联网发布：8080端口是啥意思编辑：程序博客网时间：2024/05/21 09:48

数据库：
         id                name           sex           branch
        001                张三             0            技术部
        003                小三             1            项目部
        004                李三             1            项目部

前台客户端：
<html>
<head runat="server">
      <title>培训课程第1课</title>
      <script language="javascript">
            function Init()
            {
                  var infors=ajaxEmployee.ReaderInfor().value;
                  for(var i = 0;i<infors.length;i++)
                  {
                        var emInfor = infors[i];
                        var id = emInfor[0];
                        var name = emInfor[1];
                        var sex = emInfor[2];
                        var branch = emInfor[3];

                        var tr = document.createElement("TR");
                        var td = document.createElement("TD");
                        td.innerText = id;
                        tr.appendChild(td);

                        td = document.createElement("TD");
                        td.innerText = name;
                        tr.appendChild(td);

                        td = document.createElement("TD");
                        td.innerText = sex;
                        tr.appendChild(td);

                        td = document.createElement("TD");
                        td.innerText = branch;
                        tr.appendChild(td);

                        var tbody = document.getElementById("main");
                        tbody.appendChild(tr);
                  }
            }
      </script>
</head>
<body onload = "Init()">
         <form id = "form1" runat = "server">
               <div>
                     <table border = "1">
                           <thead>
                                 <tr>
                                       <td width = "100px">编号</td>
                                       <td width = "100px">姓名</td>
                                       <td width = "100px">性别</td>
                                       <td width = "100px">所属部门</td>
                                 </tr>
                           </thead>
                           <tbody id = "main">
                                 <tr>
                                       <td></td>
                                 </tr>
                           </tbody>
                           <tfoot></tfoot>
                     </table>
               </div>
         </form>
</body>
</html>

后台服务器端：
[AjaxPro.AjaxNamespace("ajaxEmployee")]
public partial class _Default : System.Web.UI.Page
{
      protected void Page_Load(object sender ,EventArgs e)
      {
            AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));
      }

      [AjaxPro.AjaxMethod]
      public ArrayList ReaderInfors()
      {
            ArrayList emInfors = new ArrayList();
            DataBase db = DataBase.Initstance();
            try
            {
                  db.Open();
                  SqlDataReader reader = db.ExecuteReader("read_all");
                  while(reader.Read())
                  {
                        String id = reader.GetString(0);
                        String name = reader.GetString(1);
                        Byte sex = Convert.ToByte(reader.GetValue(2));
                        String sexInfor = String.Empty;

                        if(sex == 1)
                        {
                              sexInfor = "女";
                        }
                        else
                        {
                              sexInfor = "男";
                        }

                        String branch = reader.GetString(3);
                        String[] emInfor = { id, name, sexInfor, branch };
                        emInfors.Add(emInfor);
                  }
                  reader.Close();
            }
            catch
            {
            }
            finally
            {
                  db.Close();
            }
            return emInfors;
      }
}