不知不觉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. sql server 删除所有表和存储过程

    1.删除外键约束 DECLARE c1 cursor for select 'alter table ['+ object_name(parent_obj) + '] drop constraint ...

  2. JS中prototype属性-JS原型模式

    /* *对象方法 *类方法 * 原型方法 */ function People(name) { this.name = name; this.say = function () { //对象方法 al ...

  3. mysql的join

    SELECT * FROM a LEFT JOIN b ON a.aID = b.bID;  a为主,a的数据全显示,连不上b的对应字段为空   SELECT * FROM a RIGHT JOIN ...

  4. [转载]启用 VIM 中的 Python 自动补全及提示功能

    转载: http://zhongwei-leg.iteye.com/blog/941474 周围的同事不喜欢使用 VIM 写 Python 代码的原因之一就是,VIM 不能像 Visual Studi ...

  5. Autorelease Pool-自动释放池

    Autorelease Pool是Objective-C中的内存管理方式之一,它与线程和NSAutorelease类有关.每一个线程都拥有自己的Autorelease Pool栈,这个栈底层是由双向链 ...

  6. VIM编辑器操作指令

    VIM有三种操作模式: 1,命令模式--command mode 2,输入模式--insert mode 3,底行模式--last line mode [在命令模式的时候,按Shift +  :出现的 ...

  7. 用H5实现微信的四个界面

    代码更新中

  8. zabbix之3触发器/action及模板

    1.触发器: {server_name:item_name.func.operator.condition} 一旦condition(条件)触发,则item状态改变 触发器之间可以存在依赖关系,即it ...

  9. C语言函数入门

    由于采用了函数模块式的结构,C语言易于实现结构化程序设计.使程序的层次结构清晰,便于程序的编写.阅读.调试. main 函数是主函数,它可以调用其它函数,而不允许被其它函数调用.因此,C程序的执行总是 ...

  10. 不同服务器数据库之间的数据操作 sp_addlinkedserver

    --创建链接服务器  exec sp_addlinkedserver   'ITSV ', ' ', 'SQLOLEDB ', '远程服务器名或ip地址 '  exec sp_addlinkedsrv ...