不知不觉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 xmlns="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 json
23 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容器
到这里我们的工作都做完了
让我们看一下效果：
样式很丑，但是是我要的效果，数据显示出来了，然而这有什么用呢？
今天就写到这吧，困了，睡觉了，未完待续。。
转载于:https://www.cnblogs.com/xilen/p/4600459.html