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

Javascript
用户注册常用javascript代码
JavaScript 事件监听实例代码[兼容IE,firefox] 含注释
javascript appendChild,innerHTML,join性能比较代码
JavaScript 继承详解 第一篇
javascript 控制 html元素 显示/隐藏实现代码
Javascript 判断函数类型完美解决方案
获取URL地址中的文件名和参数的javascript代码
js 获取浏览器高度和宽度值(多浏览器)
FF IE兼容性的修改小结
JS URL传中文参数引发的乱码问题
javascript 24小时弹出一次的代码(利用cookies)
ie focus bug 解决方法
javascript concat数组累加 示例
javascript 触发事件列表 比较不错
当文本框的值发生改变时,触发事件,在IE中有效
javascript 操作table的特性
jquery判断单个复选框是否被选中的代码
关于javascript中的parseInt使用技巧
JavaScript 密码强度判断代码
js跨域和ajax 跨域问题的实现思路

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


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-10-12   浏览: 375 ::
收藏到网摘: 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代码: