不知不觉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. EffectiveC#17--装箱和拆箱的最小化

    1.如下这段代码会经历装箱和拆箱.例如25会先装箱成object后传递给writeline方法(一次拷贝),在方法内部又 经历拆箱成int(第二次拷贝)后然后调用tostring(). Console ...

  2. ASP.NET三层架构的分析

    BLL   是业务逻辑层   Business   Logic   Layer DAL   是数据访问层   Data   Access   Layer ASP.NET的三层架构(DAL,BLL,UI ...

  3. C#遍历数组

    Eg: using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace ...

  4. 原创：C sharp 中 Enum的几点小 Tips

    (1)为什么要使用Enum? ♥ enums枚举是值类型,数据直接存储在栈中,而不是使用引用和真实数据的隔离方式来存储.enum student{a,b,c,d,e},其中enum代表student为 ...

  5. java调试一

    Eclipse 平台的特色在于内置了 Java 调试器,该调试器提供所有标准调试功能,包括进行单步执行.设置断点和值.检查变量和值以及暂挂和恢复线程的能力.Eclipse 平台工作台(Eclipse ...

  6. Niagara AX连接MySQL数据库

    步骤如下 1.安装Niagara AX (3.8.38): 2.安装MySQL(5.6.25):将MySQL\Connector.J 5.1\mysql-connector-java-5.1.35-b ...

  7. bootstrap模态框垂直居中

    很久没有写东西了,之前想写一些移动端的东西以后补上吧,移动端发展还是蛮快的,回正题. 因为最近在弄一个系统,系统中引用了bootstrap,发现模态框垂直不居中,遂搜索了一下,也都试了一下,无非都是在 ...

  8. py正则表达式

    1.元字符 . ^ $ * + ? {} [] \ | () --> [] :   - 常用来指定一个字符集:[abc], [a-z]  匹配任意一个字符 - 元字符在字符集中不起作用:[akm ...

  9. python笔记之编程风格大比拼

    python笔记之编程风格大比拼 虽然我的python age并不高,但我仍然愿意将我遇到的或者我写的有趣的python程序和大家一块分享,下面是我找到的一篇关于各类python程序员的编程风格的比较 ...

  10. python2 ----函数字典的使用

    问题背景: 最近在用python2为sublime2写一个插件,其中有一个命令功能,就是输入不同的命令调用不同的函数,但是python不支持switch,只用ifelse的话感觉特别的low而且明显不 ...