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

2016-02-19 15:07 34 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代码:

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

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

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

基于JQuery框架的AJAX实例代码

标签： Web开发

index.html 代码如下: html head titlejQuery Ajax 实例演示/title /head script src="./js/jquery.js" type="text/javascript"/script script type="text/javascript" $(document).ready(function(){//这个就是jQueryready ，它就像C语言的main 所有操作包含在它里面 $("#button_login").mousedown(function(){ login(); //点击ID...

jQuery Ajax 全解析

标签： Web开发

jQuery确实是一个挺好的轻量级的JS框架，能帮助我们快速的开发JS应用，并在一定程度上改变了我们写JavaScript代码的习惯。废话少说，直接进入正题，我们先来看一些简单的方法，这些方法都是对jQuery.ajax()进行封装以方便我们使用的方法，当然，如果要处理复杂的逻辑，还是需要用到jQuery.ajax()的(这个后面会说到). 1. load( url, [data], [...

jQuery+CSS制作的图片展示效果

标签： Web开发

jQuery+CSS的图片展示效果，可以拖动图片，兼容浏览器,可以做成个人相册或者作品展示摆放效果点击效果

jQuery入门[5]－AJAX

标签： Web开发

jQuery为AJAX提供了非常丰富的支持，参见 Ajax 其中最基本当属$ajax()，通过不同的参数，这个方法可以录活支持各种AJAX应用场景。如： $.ajax({ url: "test.html", cache: false, success: function(html){ $("#results").append(html); } }); 完整参数列表参见： options 当然，常用的应该是这些： load()--直接将AJAX请...

jquery 简单的图片展示效果

标签： Web开发

html head titlejquery练习——简单的图片结果展示效果--cnblogs libsource//title style #cfoot ul,#cfoot li{ margin:0;padding:0;list-style-type:none; } #cdiv{ width:500px;height:500px;line-height:500px;text-align:center;border:1px solid #D5DDF9;margin:30px;float:left; } #cfoot li{ display:inline-block;width:100px;height:1...

查看更多精彩>>