你的位置:首页 > Java教程

[Java教程]asp.net + Jquery 实现类似Gridview功能 (一)


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


需求:

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

主要功能点

1、显示数据

2、分页

3、排序

4、样式好看

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


好了,开始吧!

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

 

 前台Html:

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %> 2  3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 4  5 <html ="http://www.w3.org/1999/xhtml"> 6 <head runat="server"> 7   <title>js grid view</title> 8   <script src="jquery-1.9.1.js" type="text/javascript"></script> 9   <script src="JScript.js" type="text/javascript"></script>10   <script type="text/javascript">11     $(function () {12       var strJson = $("#<%=hfJsonValue.ClientID%>").val();13       ShowGridView(strJson);14     });15   </script>16 </head>17 <body>18   <form id="form1" runat="server">19   <div id="divGridViewMain">20     <div id="divHeadTemplate">21       22     </div>23     <div id="divRowTemplate">24     25     </div>26   </div>27   <asp:HiddenField ID="hfJsonValue" runat="server" />28   </form>29 </body>30 </html>

View Code

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

后台代码:

 

 1 private void BindGridView() 2   { 3     DataTable dt = new DataTable(); 4     dt.Columns.Add("ID"); 5     dt.Columns.Add("Name"); 6     dt.Columns.Add("Age"); 7     dt.Columns.Add("Sex"); 8     dt.Columns.Add("Score"); 9     DataRow dr = null;10     Random r = new Random();11     for (int i = 0; i < 20; i++)12     {13       dr = dt.NewRow();14       dr["ID"] = i;15       dr["Name"] = "Name_" + i;16       dr["Sex"] = (i % 2 == 0 ? "女" : "男");17       dr["Age"] = r.Next(16, 27);18       dr["Score"] = r.Next(60, 100);19       dt.Rows.Add(dr);20     }21 22     //datatable to json23     string strJson = DataTable2Json(dt);24     hfJsonValue.Value = strJson;25   }

View Code

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

代码如下:

 1 public static string DataTable2Json(DataTable dt) {  2     StringBuilder jsonBuilder = new StringBuilder();  3     jsonBuilder.Append("[");  4     for (int i = 0; i < dt.Rows.Count; i++)  5     {  6       jsonBuilder.Append("{");  7       for (int j = 0; j < dt.Columns.Count; j++)  8       {  9         jsonBuilder.Append("\""); 10         jsonBuilder.Append(dt.Columns[j].ColumnName); 11         jsonBuilder.Append("\":\""); 12         jsonBuilder.Append(dt.Rows[i][j].ToString()); 13         jsonBuilder.Append("\","); 14       } 15       jsonBuilder.Remove(jsonBuilder.Length - 1, 1); 16       jsonBuilder.Append("},"); 17     } 18     jsonBuilder.Remove(jsonBuilder.Length - 1, 1); 19     jsonBuilder.Append("]"); 20     //jsonBuilder.Append("}"); 21     return jsonBuilder.ToString(); 22   }

View Code

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

直接贴代码:

 1 function ShowGridView(strJson) { 2  3   var jsonVal = eval(strJson); 4  5   var headHtml = "<table width='100%'><tr>"; 6   var rowHtml = "<table width='100%'>"; 7  8   for (var i = 0; i < jsonVal.length; i++) { 9     rowHtml += "<tr>";10 11     $.each(jsonVal[i], function (key, value) {12       if (i==0) {13         headHtml += "<td>" + key + "</td>";14       }15       rowHtml += "<td>" + value + "</td>";16     });17     rowHtml += "</tr>";18   }19   20 21   headHtml += "</tr><table>";22   rowHtml += "</table>";23 24   $("#divHeadTemplate").html(headHtml);25   $("#divRowTemplate").html(rowHtml);26 }

View Code

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

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

让我们看一下效果:

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

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