当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JQuery的ajax基础上的超强GridView展示

Javascript
javascript 响应键盘特定按键(只响应数字键)
javascript indexOf方法、lastIndexOf 方法和substring 方法
javascript parseInt 函数分析(转)
javascript Split方法,indexOf方法、lastIndexOf 方法和substring 方法
JavaScript 面向对象入门精简篇
JS中==与===操作符的比较
JavaScript indexOf忽略大小写
dwr spring的集成实现代码
DWR Ext 加载数据
JavaScript 计算当天是本年本月的第几周
Js 获取当前日期时间及其它操作实现代码
javascript multibox 全选
JS array 数组详解
javascript 对象定义方法 简单易学
javascript 补零 函数集合
div scroll始终在最底部的实现代码
javascript eval()用法
javascript 打印页面代码
JAVASCRIPT THIS详解 面向对象
javascript 页面跳转方法集合

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 421 ::
收藏到网摘: n/a

前面有个例子是使用jQuery的datatable插件来实现的能够展开个详细信息表的样子。事实上.net的数据展示模式很好,如果配上jQuery的那些效果和AJAX功能是相当得不错。

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

使用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代码: