不知不觉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. java 去除重复项

    import java.util.Arrays; import java.util.HashSet; import java.util.Set; class Demo20 { public stati ...

  2. .NET winform 的keypress事件中判断当用户按下的是哪个键

    keys是按键的枚举类型 private void txtPropertyValue_KeyPress(object sender, KeyPressEventArgs e) { if ((Keys) ...

  3. nginx+tomcat的集群和session复制

    前端服务器采用nginx,后端应用服务器采用tomcat.nginx负责负载均衡,session复制在tomcat上处理. 1.nginx安装(略) 2.nginx配置负载均衡 http { incl ...

  4. 拥有iframe页面的子父类窗口调用JS的方法，并且注意的事项

    一.前言 我页面用的是EasyUI的弹出窗口里面嵌入一个iframe.第一:父窗口打开子窗口是一个新增用户信息的iframe子页面,点击保存后,子窗口iframe则去调用父窗口的function cl ...

  5. navicat导入mysql数据库sql时报错

    今天运维的一个项目需要进入数据库修改下数据,MYSQL的数据库,我先导出了一份数据结构和数据,然后进行修改,改完后发现项目报错了...粗心大意哪改错了,赶紧恢复数据库,结果导入SQL时报错了,当时心凉 ...

  6. html file选中图片后 不经过服务器 立刻显示在页面

    html结构中 file类型加上 onchange事件 ,用FileReader读取图片的data:/images,然后显示在img标签中, 代码如下: <img class="pre ...

  7. 还是畅通工程（1233 并查集+kruskal）

    还是畅通工程 Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  8. 1008 Gnome Tetravex

    练习使用DPS的题,不知道有无别的做法,思路不复杂.形式是统计并且进行数字配对. #include <stdio.h> ][],note[],ans[]; void ini(){ int ...

  9. cxf2.7.10与Spring3.0.5集成时报错如下

    严重: Error listenerStart 2014-3-29 22:25:20 org.apache.catalina.core.StandardContext start 严重: Contex ...

  10. poj 1129 Channel Allocation

    http://poj.org/problem?id=1129 import java.util.*; import java.math.*; public class Main { public st ...