编程 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 相关文章推荐

jquery实现的鼠标下拉滚动置顶效果

Jul 24 Javascript

jQuery 实现评论等级好评差评特效

May 06 Javascript

JS实现简单的右下角弹出提示窗口完整实例

Jun 21 Javascript

使用Javascript监控前端相关数据的代码

Oct 27 Javascript

网站申请不到支付宝接口、微信接口，免接口收款实现方式几种解决办法

Dec 14 Javascript

JavaScript实现获取用户单击body中所有A标签内容的方法

Jun 05 Javascript

vue--点击当前增加class,其他删除class的方法

Sep 15 Javascript

JavaScript惰性载入函数实例分析

Mar 27 Javascript

详解如何在Vue项目中导出Excel

Apr 19 Javascript

解决layUI的页面显示不全的问题

Sep 20 Javascript

微信小程序封装多张图片上传api代码实例

Dec 30 Javascript

vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance＜{ readyOnly...Vetur（2339）

Sep 11 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中CURL的CURLOPT_POSTFIELDS参数使用细节

2014/03/17 PHP

Yii2 assets清除缓存的方法

2016/05/16 PHP

CentOS 上搭建 PHP7 开发测试环境

2017/02/26 PHP

PHP二维关联数组的遍历方式(实例讲解)

2017/10/18 PHP

javascript function、指针及内置对象

2009/02/19 Javascript

JavaScript高级程序设计阅读笔记（二十一） JavaScript中的XML

2012/09/14 Javascript

探讨javascript是不是面向对象的语言

2013/11/21 Javascript

javascript中Number对象的toString()方法分析

2014/12/20 Javascript

JavaScript操作DOM元素的childNodes和children区别

2015/04/01 Javascript

jQuery Validate初步体验(一)

2015/12/12 Javascript

html5+javascript实现简单上传的注意细节

2016/04/18 Javascript

Bootstrap Chart组件使用教程

2016/04/28 Javascript

js前端面试题及答案整理（一）

2016/08/26 Javascript

Bootstrap 实现查询的完美方法

2016/10/26 Javascript

利用Javascript实现简单的转盘抽奖

2017/02/13 Javascript

详解webpack3编译兼容IE8的正确姿势

2017/12/21 Javascript

JS与jQuery判断文本框还剩多少字符可以输入的方法

2018/09/01 jQuery

nodejs二进制与Buffer的介绍与使用

2019/07/11 NodeJs

解决nuxt 自定义全局方法,全局属性,全局变量的问题

2020/11/05 Javascript

[10:54]Team Spirit vs Navi

2018/06/07 DOTA

python实现unicode转中文及转换默认编码的方法

2017/04/29 Python

python+opencv实现车牌定位功能(实例代码)

2019/12/24 Python

Python for循环与getitem的关系详解

2020/01/02 Python

基于MSELoss()与CrossEntropyLoss()的区别详解

2020/01/02 Python

美国鞋类购物网站：Shiekh Shoes

2016/08/21 全球购物

英国豪华针织品牌John Smedley的在线销售商：The Outlet by John Smedley

2018/04/08 全球购物

Skyscanner台湾：全球知名的旅行比价引擎

2018/07/01 全球购物

销售人员个人求职信

2013/09/26 职场文书

项目经理的岗位职责

2013/11/23 职场文书

法院信息化建设方案

2014/05/21 职场文书

工商管理专业毕业生求职信

2014/05/26 职场文书

反对四风问题自我剖析材料

2014/09/29 职场文书

2014年职称评定工作总结

2014/11/26 职场文书

2015年公司新年寄语

2014/12/08 职场文书

慰问信模板

2015/02/14 职场文书

党组织关系的介绍信模板

2019/06/21 职场文书