您所在的位置:小祥子 » 编程 » JavaScript » 正文

asp.net + Jquery 实现类似Gridview功能 (一)

时间:2015-06-26 编辑:who is that 来源:本站整理

  不知不觉2015年就过去一半了,由于过年前后公司人员陆续离职(这个...),项目忙不过来,从过年来上班就一直在忙,最近项目终于告一段落,开始步入正轨(不用天天赶项目了)。所以最近才有时间写这个东西,可能写的过程中我会从最开始的demo开始,一步一步的去实现我想要的功能,所以会比较啰嗦,感觉无聊请无视。


需求:

想利用Jquery做一个类似Gridview的功能

主要功能点

1、显示数据

2、分页

3、排序

4、样式好看

暂时先实现这些,后面再优化扩展。


好了,开始吧!

如图新建一个空白项目,只有一个简单的页面和一个jquery库,需要自己实现的方法放在JScript.js文件中

 

 前台Html:

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.ASPx.cs" Inherits="_Default" %>
 
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
 <html xmlns="http://www.w3.org/1999/xhtml">
 <head runat="server">
     <title>js grid view</title>
     <script src="jquery-1.9.1.js" type="text/javascript"></script>
     <script src="JScript.js" type="text/javascript"></script>
     <script type="text/javascript">
         $(function () {
             var strJson = $("#<%=hfJsonValue.ClientID%>").val();
             ShowGridView(strJson);
         });
     </script>
 </head>
 <body>
     <form id="form1" runat="server">
     <div id="divGridViewMain">
         <div id="divHeadTemplate">
             
         </div>
         <div id="divRowTemplate">
         
         </div>
     </div>
     <asp:HiddenField ID="hfJsonValue" runat="server" />
     </form>
 </body>
 </html>
View Code

前台只用一个div容器显示GridView,页面上有个隐藏域存放后台取的Json数据,也可以用ajax异步取数据 ,这里是直接在后台传过来的。

后台代码:

 private void BindGridView()
     {
         DataTable dt = new DataTable();
         dt.Columns.Add("ID");
         dt.Columns.Add("Name");
         dt.Columns.Add("Age");
         dt.Columns.Add("Sex");
         dt.Columns.Add("Score");
         DataRow dr = null;
         Random r = new Random();
         for (int i = 0; i < 20; i++)
         {
             dr = dt.NewRow();
             dr["ID"] = i;
             dr["Name"] = "Name_" + i;
             dr["Sex"] = (i % 2 == 0 ? "女" : "男");
             dr["Age"] = r.Next(16, 27);
             dr["Score"] = r.Next(60, 100);
             dt.Rows.Add(dr);
         }
 
         //datatable to json
         string strJson = DataTable2Json(dt);
         hfJsonValue.Value = strJson;
     }
View Code

其中用到一个方法把DataTable转换为Json格式的数据,这里只是简单的方法,复杂的并不适用,这里不多讲

代码如下:

 public static string DataTable2Json(DataTable dt) { 
         StringBuilder jsonBuilder = new StringBuilder(); 
         jsonBuilder.Append("["); 
         for (int i = 0; i < dt.Rows.Count; i++) 
         { 
             jsonBuilder.Append("{"); 
             for (int j = 0; j < dt.Columns.Count; j++) 
             { 
                 jsonBuilder.Append("\""); 
                 jsonBuilder.Append(dt.Columns[j].ColumnName); 
                 jsonBuilder.Append("\":\""); 
                 jsonBuilder.Append(dt.Rows[i][j].ToString()); 
                 jsonBuilder.Append("\","); 
             } 
             jsonBuilder.Remove(jsonBuilder.Length - 1, 1); 
             jsonBuilder.Append("},"); 
         } 
         jsonBuilder.Remove(jsonBuilder.Length - 1, 1); 
         jsonBuilder.Append("]"); 
         //jsonBuilder.Append("}"); 
         return jsonBuilder.ToString(); 
     }
View Code

是不是很简单,数据也有了,那么怎么把他们显示到页面上呢,下面开始实现上边Html代码里的一个js方法

直接贴代码:

 function ShowGridView(strJson) {
 
     var jsonVal = eval(strJson);
 
     var headHtml = "<table width='100%'><tr>";
     var rowHtml = "<table width='100%'>";
 
     for (var i = 0; i < jsonVal.length; i++) {
         rowHtml += "<tr>";
 
         $.each(jsonVal[i], function (key, value) {
             if (i==0) {
                 headHtml += "<td>" + key + "</td>";
             }
             rowHtml += "<td>" + value + "</td>";
         });
         rowHtml += "</tr>";
     }
     
 
     headHtml += "</tr><table>";
     rowHtml += "</table>";
 
     $("#divHeadTemplate").html(headHtml);
     $("#divRowTemplate").html(rowHtml);
 }
View Code

这里解析json数据,利用html拼接的方式把表头写入divHeadTemplate容器,把行写入divRowTemplate容器

到这里我们的工作都做完了

让我们看一下效果:

样式很丑,但是是我要的效果,数据显示出来了,然而这有什么用呢?

今天就写到这吧,困了,睡觉了,未完待续。。

关键词:功能