标签：Jquery asp rowHtml Gridview jsonBuilder Columns dt dr Append
原文链接：http://www.cnblogs.com/xilen/p/4600459.html不知不觉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
标签：Jquery,asp,rowHtml,Gridview,jsonBuilder,Columns,dt,dr,Append 来源： https://blog.csdn.net/weixin_30564901/article/details/97385535
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。