JQuery的ajax基礎(chǔ)上的超強(qiáng)GridView展示
看到一個(gè)這樣的例子和大家分享下。這個(gè)一直是我想要做到的。
首先先展示下最終的樣子： 
使用northwind的數(shù)據(jù)。點(diǎn)擊前面的加號(hào)會(huì)把其它屬于這個(gè)產(chǎn)品的詳細(xì)訂單展示出來,而每個(gè)產(chǎn)品后面都會(huì)有它的訂單個(gè)數(shù)。點(diǎn)擊'+'后的樣子:
先分析下它的實(shí)現(xiàn):
第一個(gè)圖的顯示是個(gè)Gridview,當(dāng)點(diǎn)擊每條記錄前面的'+'時(shí)會(huì)使用jQuery的ajax功能調(diào)用一個(gè)Web Method,并傳輸一個(gè)當(dāng)前產(chǎn)品的ID進(jìn)去,然后會(huì)定義一個(gè)繼承UserControl的類,它能夠添加一個(gè)ascx文件,然后這個(gè)類里面定義一個(gè)View State的字段。
當(dāng)點(diǎn)擊每個(gè)'+'時(shí)使用jQuery把這個(gè)ascx文件顯示在當(dāng)前產(chǎn)品的下面slideshow(),那么id是如何傳的呢？ 這就用到了View State。
關(guān)于View State的介紹很多的。我也沒怎么用過。這里簡單說明下它和一個(gè)Web Control的關(guān)系:
下面給出大家代碼:
這個(gè)是產(chǎn)品的GridView。
然后是Web Method:
Control類:
CustomerOrder.ascx代碼:
整個(gè)調(diào)用Web Method的ajax代碼:
相關(guān)文章
JQuery UI的拖拽功能實(shí)現(xiàn)方法小結(jié)
JQuery UI是JQuery官方支持的WebUI 代碼庫，包含底層交互、動(dòng)畫、特效等API，并且封裝了一些Web小部件（Widget）。同時(shí)，JQuery UI繼承了jquery的插件支持，有大量的第三方插件可以豐富JQuery UI的功能2012-03-03![[jQuery] 事件和動(dòng)畫詳解](http://img.jbzj.com/images/xgimg/bcimg1.png)
這篇文章主要介紹了JQ事件和動(dòng)畫，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03
JQuery中html()方法使用不當(dāng)帶來的陷阱
html方法當(dāng)不傳參數(shù)時(shí)用來獲取元素的html內(nèi)容2011-04-04
這篇文章主要介紹了jJquery $.map使用方法實(shí)例詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
今天我介紹一個(gè)輕量級(jí)的插件 boxy!它可以把美工設(shè)計(jì)的彈出框很容易的體現(xiàn)出來，而且兼容性還不錯(cuò),感興趣的朋友可以了解下2013-01-01
這篇文章主要為大家詳細(xì)介紹了jquery對(duì)象訪問是什么及使用方法介紹，感興趣的小伙伴們可以參考一下2016-05-05
本篇文章主要介紹了jquery replace方法去空格的相關(guān)知識(shí)，具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-05-05
jQuery封裝placeholder效果實(shí)現(xiàn)方法,讓低版本瀏覽器支持該效果
下面小編就為大家?guī)硪黄猨Query封裝placeholder效果實(shí)現(xiàn)方法,讓低版本瀏覽器支持該效果。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
jQuery實(shí)現(xiàn)Select左右復(fù)制移動(dòng)內(nèi)容
這篇文章主要介紹了基于jQuery實(shí)現(xiàn)Select左右復(fù)制移動(dòng)內(nèi)容的實(shí)現(xiàn)方法，代碼非常簡單，具有參考借鑒價(jià)值，需要的朋友參考下2016-08-08
這篇文章主要介紹了jquery文檔操作wrap()方法,以實(shí)例形式簡單分析了wrap()方法用某個(gè)標(biāo)簽將某個(gè)元素包起來的使用技巧,需要的朋友可以參考下2015-01-01