不知不觉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>

前台只用一个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 = ; i < ; i++)

         {

             dr = dt.NewRow();

             dr["ID"] = i;

             dr["Name"] = "Name_" + i;

             dr["Sex"] = (i %  ==  ? "女" : "男");

             dr["Age"] = r.Next(, );

             dr["Score"] = r.Next(, );

             dt.Rows.Add(dr);

         }

         //datatable to json

         string strJson = DataTable2Json(dt);

         hfJsonValue.Value = strJson;

     }

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

代码如下：

 public static string DataTable2Json(DataTable dt) {

         StringBuilder jsonBuilder = new StringBuilder();

         jsonBuilder.Append("[");

         for (int i = ; i < dt.Rows.Count; i++)

         {

             jsonBuilder.Append("{");

             for (int j = ; 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 - , );

             jsonBuilder.Append("},");

         }

         jsonBuilder.Remove(jsonBuilder.Length - , );

         jsonBuilder.Append("]");

         //jsonBuilder.Append("}");

         return jsonBuilder.ToString();

     }

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

直接贴代码：

 function ShowGridView(strJson) {

     var jsonVal = eval(strJson);

     var headHtml = "<table width='100%'><tr>";

     var rowHtml = "<table width='100%'>";

     for (var i = ; i < jsonVal.length; i++) {

         rowHtml += "<tr>";

         $.each(jsonVal[i], function (key, value) {

             if (i==) {

                 headHtml += "<td>" + key + "</td>";

             }

             rowHtml += "<td>" + value + "</td>";

         });

         rowHtml += "</tr>";

     }

     headHtml += "</tr><table>";

     rowHtml += "</table>";

     $("#divHeadTemplate").html(headHtml);

     $("#divRowTemplate").html(rowHtml);

 }

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

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

让我们看一下效果：

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

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

asp.net + Jquery 实现类似Gridview功能 （一）的更多相关文章

  1. js/jQuery实现类似百度搜索功能

    一.页面代码:<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www. ...

  2. 【转载】ASP.NET以Post方式抓取远程网页内容类似爬虫功能

    使用HttpWebRequest等Http相关类,可以在应用程序中或者网站中模拟浏览器发送Post请求,在请求带入相应的Post参数值,而后请求回远程网页信息.实现这一功能也很简单,主要是依靠Http ...

  3. 手动实现jQuery Tools里面tab功能

    平时开发中用的Javascript类库都是jQuery,用到插件或者第三方类库能从jQuery Tools里面找到,基本不用其他的.当然有时同事喜欢使用jQuery UI里面的插件.并且jQuery ...

  4. asp.net学习之扩展GridView

    原文:asp.net学习之扩展GridView 本节讨论如何从现有的控件,进而扩展成强大的,更定制的GridView控件 1.扩展BoundField 默认的BoundField不能显示多文本,文字一 ...

  5. Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果

    Asp.net+jquery+ajaxpro异步仿Facebook纵向时间轴效果 在一个项目中,用到了时间轴展示产品的开发进度,为了更好用户体验,想到了Facebook的timeline效果, 搜了一 ...

  6. JQuery常用函数及功能

    JQuery常用函数及功能小结 来源:http://blog.csdn.net/screensky/article/details/7831000 1.文档加载完成执行函数 $(document).r ...

  7. 扩展 delphi 泛型 以实现类似lambda功能 , C#中的any count first last 等扩展方法

    扩展 delphi 泛型 以实现类似lambda功能 , C#中的any count first last 等扩展方法 在C#中对泛型的扩展,输入参数是泛型本身的内容,返回值则是bool.基于这一点, ...

  8. jquery 回车切换 tab功能

    挺有趣的,Jquery 回车切换tab功能的实现哦 <html> <head><!--jquery库.js--></head> <body> ...

  9. ASP.NET jquery ajax传递参数

    第一种:GET传递 前台 ajax   GET 传递 :即在请求的地址后面加上参数,URL地址长度有显示,安全性低 后台接收:Request.QueryString[“参数名字”]! 例如: func ...

随机推荐

  1. 线程：Exchanger同步工具

    可以在对中对元素进行配对和交换的线程的同步点,类似于交易,A拿着钱到达指定地点,B拿着物品到达指定地点,相互交换,然后各自忙各自的事去了. package ch03; import java.util ...

  2. Adapter常用的实现--BaseAdapter

     BaseAdapter,通常用于被拓展.拓展BaseAdapter可以对个列表项进行最大限度的定制. 如下面的Badapter继承自BaseAdapter,重写以下四种方法. public clas ...

  3. WebBrowser如何获取提交的数据

    WebBrowser 其实是对 ActiveX 控件 SHDocVw 的封装,而这个SHDocVw的很多底层调用WebBrowser控件并没有提供实现,你这个应用需要直接操作 SHDoceVw 控件才 ...

  4. 再谈c++中的引用

    在<从汇编看c++的引用和指针>一文中,虽然谈到了引用,但是只是为了将两者进行比较.这里将对引用做进一步的分析. 1 引用的实现方式 在介绍有关引用的c++书中,很多都说引用只是其引用变量 ...

  5. SpringMvc项目 FastJson的数据中有$ref解决办法

    这是FastJson返回的数据,经过在线json格式转换工具转换的数据 阴影部分套用上面的dept(部门)信息,使用easyui只能获取第一行,凡是引用的都无法获取 经各种搜索: 推荐网址:http: ...

  6. JS的全局变量&局部变量

    <script> var i=10; //全局变量 j = 20; //全局变量 function(){ var i=30; //局部变量 h = 40; //全局变量 } </sc ...

  7. 《Python基础篇》之初识Python一

    Python简介 python的创始人为吉多·范罗苏姆(Guido van Rossum).1989年的圣诞节期间,吉多·范罗苏姆为了在阿姆斯特丹打发时间,决心开发一个新的脚本解释程序,作为ABC语言 ...

  8. ckeditor详解

    源网页编辑软件FCKEditor在09年发布更新到3.0,并改名为CKEditor.改进后的ckeditor更加模块话,配置更加灵活,和以前的fckeditor使用方式上也有所不同.在我的mvc项目中 ...

  9. ubuntu 中c 语言编程（学习）

    ubuntu下c编程 c编程中相关文件后缀 .a    静态库(archive .c     C源代码(需要编译预处理) .h     C源代码头文件 .i      C源代码 (不需要编译预处理) ...

  10. JS编码解码详解

    今天在整理 js编码解码方法时,在网上搜资料,发现一篇文章讲的不错,讲解的非常简单明了,于是乎就想转载过来,却发现无法转载到博客园,最后只能卑鄙的摘抄过来.js编码解码就是将一些对URL和数据库敏感的 ...