编程 Javascript

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

Posted in Javascript onSeptember 18, 2009

看到一个这样的例子和大家分享下。这个一直是我想要做到的。
首先先展示下最终的样子：
JQuery的ajax基础上的超强GridView展示
使用northwind的数据。点击前面的加号会把其它属于这个产品的详细订单展示出来,而每个产品后面都会有它的订单个数。点击'+'后的样子:

先分析下它的实现:

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

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

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

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

下面给出大家代码:

这个是产品的GridView。

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

然后是Web Method:

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

Control类:

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

CustomerOrder.ascx代码:

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

整个调用Web Method的ajax代码:

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

判断一个变量是数组Array类型的方法

Sep 16 Javascript

JavaScript实现简单的时钟实例代码

Nov 23 Javascript

javascript实现相同事件名称，不同命名空间的调用方法

Jun 26 Javascript

最简单的JavaScript图片轮播代码(两种方法)

Dec 18 Javascript

js获取元素的标签名实现方法

Oct 08 Javascript

Node.js的文件权限及读写flag详解

Oct 11 Javascript

Vue0.1的过滤代码如何添加到Vue2.0直接使用

Aug 23 Javascript

Vue中的methods、watch、computed的区别

Nov 26 Javascript

vue实现后台管理权限系统及顶栏三级菜单显示功能

Jun 19 Javascript

微信小程序JS加载esmap地图的实例详解

Sep 04 Javascript

在layui中select更改后生效的方法

Sep 05 Javascript

使用axios发送post请求,将JSON数据改为form类型的示例

Oct 31 Javascript

jQuery 事件队列调整方法

Sep 18 #Javascript

javascript 面向对象编程 function是方法(函数)

Sep 17 #Javascript

javascript 面向对象编程聊聊对象的事

Sep 17 #Javascript

javascript 面向对象编程万物皆对象

Sep 17 #Javascript

javascript 面向对象编程 function也是类

Sep 17 #Javascript

类似CSDN图片切换效果脚本

Sep 17 #Javascript

var与Javascript变量隐式声明

Sep 17 #Javascript

You might like

使用PHP制作新闻系统的思路

2006/10/09 PHP

PHP学习笔记 IIS7下安装配置php环境

2012/10/29 PHP

php将数组转换成csv格式文件输出的方法

2015/03/14 PHP

js中的getAttribute方法使用示例

2014/08/01 Javascript

在父页面得到zTree已选中的节点的方法

2015/02/12 Javascript

js漂浮广告实现代码

2015/08/15 Javascript

AngularJS入门教程之Cookies读写操作示例

2016/11/02 Javascript

Bootstrap基本插件学习笔记之Tooltip提示工具(18)

2016/12/08 Javascript

js放到head中失效的原因与解决方法

2017/03/07 Javascript

JS笛卡尔积算法与多重数组笛卡尔积实现方法示例

2017/12/01 Javascript

基于vue-ssr服务端渲染入门详解

2018/01/08 Javascript

nodejs中Express与Koa2对比分析

2018/02/06 NodeJs

详解React中传入组件的props改变时更新组件的几种实现方法

2018/09/13 Javascript

JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值

2018/10/29 Javascript

layui文件上传控件带更改后数据传值的方法

2019/09/23 Javascript

Vue实现兄弟组件间的联动效果

2020/01/21 Javascript

JS绘图Flot如何实现可选显示曲线图功能

2020/10/16 Javascript

Python2.x与Python3.x的区别

2016/01/14 Python

Python下载网络小说实例代码

2018/02/03 Python

使用Python对微信好友进行数据分析

2018/06/27 Python

使用Python抓取豆瓣影评数据的方法

2018/10/17 Python

python如何读取bin文件并下发串口

2019/07/05 Python

python爬虫 execjs安装配置及使用

2019/07/30 Python

Pytorch 解决自定义子Module .cuda() tensor失败的问题

2020/06/23 Python

Python在字符串中处理html和xml的方法

2020/07/31 Python

详解python中的异常捕获

2020/12/15 Python

css3实现背景图片拉伸效果像桌面壁纸一样

2013/08/19 HTML / CSS

巴西箱包、背包、钱包和旅行配件购物网站：Inovathi

2019/12/14 全球购物

英语专业毕业生求职简历的自我评价

2013/10/24 职场文书

软件工程专业推荐信

2013/10/28 职场文书

关于建议书的格式范文

2014/05/20 职场文书

企业总经理任命书

2014/06/05 职场文书

业务内勤岗位职责

2015/04/13 职场文书

单位接收证明格式

2015/06/18 职场文书

简短的人生哲理（38句）

2019/08/13 职场文书

Python中OpenCV实现查找轮廓的实例

2021/06/08 Python