|
原文鏈接：http://www.cnblogs.com/xilen/p/4600459.html
不知不覺2015年就過去一半了，由于過年前后公司人員陸續(xù)離職（這個(gè)...），項(xiàng)目忙不過來，從過年來上班就一直在忙，最近項(xiàng)目終于告一段落，開始步入正軌（不用天天趕項(xiàng)目了）。所以最近才有時(shí)間寫這個(gè)東西，可能寫的過程中我會(huì)從最開始的demo開始，一步一步的去實(shí)現(xiàn)我想要的功能，所以會(huì)比較啰嗦，感覺無聊請(qǐng)無視。 需求： 想利用Jquery做一個(gè)類似Gridview的功能 主要功能點(diǎn) 1、顯示數(shù)據(jù) 2、分頁 3、排序 4、樣式好看 暫時(shí)先實(shí)現(xiàn)這些，后面再優(yōu)化擴(kuò)展。 好了，開始吧！ 如圖新建一個(gè)空白項(xiàng)目，只有一個(gè)簡單的頁面和一個(gè)jquery庫，需要自己實(shí)現(xiàn)的方法放在JScript.js文件中 ? ?前臺(tái)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./TR/xhtml1/DTD/xhtml1-transitional.dtd">
4
5 <html xmlns="http://www./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
前臺(tái)只用一個(gè)div容器顯示GridView，頁面上有個(gè)隱藏域存放后臺(tái)取的Json數(shù)據(jù)，也可以用ajax異步取數(shù)據(jù)?，這里是直接在后臺(tái)傳過來的。 后臺(tái)代碼： ?
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
其中用到一個(gè)方法把DataTable轉(zhuǎn)換為Json格式的數(shù)據(jù)，這里只是簡單的方法，復(fù)雜的并不適用，這里不多講 代碼如下：
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
是不是很簡單，數(shù)據(jù)也有了，那么怎么把他們顯示到頁面上呢，下面開始實(shí)現(xiàn)上邊Html代碼里的一個(gè)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數(shù)據(jù)，利用html拼接的方式把表頭寫入divHeadTemplate容器，把行寫入divRowTemplate容器 到這里我們的工作都做完了 讓我們看一下效果：
樣式很丑，但是是我要的效果，數(shù)據(jù)顯示出來了，然而這有什么用呢？ 今天就寫到這吧，困了，睡覺了，未完待續(xù)。。 轉(zhuǎn)載于:https://www.cnblogs.com/xilen/p/4600459.html 來源：https://www./content-1-357751.html |
|
|
