JQuery的ajax基础上的超强GridView展示

2016-02-19 15:07 29 1 收藏

今天图老师小编要向大家分享个JQuery的ajax基础上的超强GridView展示教程，过程简单易学，相信聪明的你一定能轻松get！

【 tulaoshi.com - Web开发】

看到一个这样的例子和大家分享下。这个一直是我想要做到的。
首先先展示下最终的样子：

使用northwind的数据。点击前面的加号会把其它属于这个产品的详细订单展示出来,而每个产品后面都会有它的订单个数。点击'+'后的样子:

先分析下它的实现:

第一个图的显示是个Gridview,当点击每条记录前面的'+'时会使用jQuery的ajax功能调用一个Web Method,并传输一个当前产品的ID进去,然后会定义一个继承UserControl的类,它能够添加一个ascx文件,然后这个类里面定义一个View State的字段。

当点击每个'+'时使用jQuery把这个ascx文件显示在当前产品的下面slideshow(),那么id是如何传的呢？这就用到了View State。

关于View State的介绍很多的。我也没怎么用过。这里简单说明下它和一个Web Control的关系:

下面给出大家代码:

这个是产品的GridView。

然后是Web Method:

Control类:

CustomerOrder.ascx代码:

整个调用Web Method的ajax代码:

来源:https://www.tulaoshi.com/n/20160219/1608952.html

上一篇： jquery 弹出层实现代码
下一篇： WPS如何用文字型窗体域来添加书签

看过《JQuery的ajax基础上的超强GridView展示》的人还看了以下文章更多>>

你的jquery ajax无效和你的jquery引入路径有关

标签： Web开发

Jquery不必多说，你能阅读到该篇文章，肯定知啊都jquery是js框架。大家在做项目的时候肯定或多或少都需要用到ajax。而如果用到jquery的ajax，那么就需要将jquery引入到jsp页面。当你发现你的jquery ajax无效的时候,不妨使用 fire bug调试一下，这时你会发现，提示"$"无效，为什么会有这种提示呢？原因很简单，就是你引入jquery.js的路...

JQuery的ajax的用法在asp中使用$.ajax()实现

标签： Web开发

代码如下： % response.Expires=-1 response.CacheControl="no-cache" % !--#include file="../../conn/conn.asp"-- !--#include file="../psw.asp"-- !--#include file="../../functions/dofunction.asp"-- !--#include file="../../functions/showfunction.asp"-- !--#include file="../../fqdb/admin/website.asp"-- % cmd = che...

使用 jQuery 简化 Ajax 开发

标签： Web开发

jQuery 是什么？ jQuery 由 John Resig 创建于 2006 年初，对于任何使用 JavaScript 代码的程序员来说，它是一个非常有用的 JavaScript 库。无论您是刚刚接触 JavaScript 语言，并且希望获得一个能解决文档对象模型（Document Object Model，DOM）脚本和 Ajax 开发中一些复杂问题的库，还是作为一个厌倦了 DOM 脚本和 Ajax 开发中无聊的...

javascript jQuery $.post $.ajax用法

标签： Web开发

jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求参数： url (String) : 发送请求的URL地址. data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。 callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。 type (String) : ...

jQuery Ajax之load()方法

标签： Web开发

load()方法是jQuery中最为简单和常用的Ajax方法，能载入远程HTML代码并插入到DOM中。它的语法结构为： load( url [, data][, callback] ) load()方法参数解释见下表：参数名称类型说明 urlString请求HTML页面的URL地址data（可选）Object发送至服务器的key/value数据callback（可选）Function请求完成时的回调函数，无论...

查看更多精彩>>