快捷導(dǎo)航

jquery+ashx無(wú)刷新GridView數(shù)據(jù)顯示插件(實(shí)現(xiàn)分頁(yè)、排序、過(guò)濾功能)

更新時(shí)間：2010年04月25日 15:59:37 作者：

最近做一個(gè)AJAX的GridView來(lái)顯示數(shù)據(jù)，當(dāng)然按照現(xiàn)在流行的首選是Jquery。

理由：jquery簡(jiǎn)單，兼容性好且容易封裝。廢話不多說(shuō)，馬上開(kāi)始我們的Jquery插件編寫(xiě)吧。應(yīng)該有很多人寫(xiě)過(guò)類(lèi)似的插件，我也是有些模仿flexGrid的形式。

需求：GridView顯示數(shù)據(jù)，無(wú)刷新分頁(yè)，無(wú)刷新排序，無(wú)刷新過(guò)濾（搜索數(shù)據(jù)），基于ASP.NET(我們這里有ashx一般處理文件來(lái)實(shí)現(xiàn))。

使用到技術(shù)：asp.net2.0, jquery,css

首先寫(xiě)的是jquery插件方面，使用的核心函數(shù)還是jquery的ajax函數(shù)，方便快捷。

復(fù)制代碼代碼如下:

 
$.ajax({ 
type: p.method, 
url: p.url, 
data:param, 
success: function(msg){ 
$.AddData(msg,showbox,p); 
}, 
error: function(msg){$.ErrorAjax(showbox,p.errorMsg);}, 
beforeSend:function(){$.AddLoading(showbox);}, 
complete:function(){$.MoveLoading(showbox);} 
}); 

看了就這么簡(jiǎn)單的一句，jquery就是比較爽的。具體的代碼請(qǐng)下載下面的附件查看哦。

先發(fā)張生成后結(jié)果圖來(lái)看看（樣式不是很好看，需要的自己掂量著修改吧）

排序和過(guò)濾功能

jquery+ashx的無(wú)刷新分頁(yè)功能

其實(shí)這里除了jquery充當(dāng)整個(gè)插件的主要架構(gòu)外，另外一個(gè)重要的文件就是ashx這個(gè)一般處理文件啦。ashx在我整個(gè)jqueryGrid插件中輸出{\n page:1,\ntotal:0,pages:1,rows:'',cols:''}這樣的json代碼，相信用過(guò)josn的朋友都明白。其中為了減少錯(cuò)誤我用了一個(gè)第三方插件Newtonsoft.Json，這是格式化json字符串的JsonConvert.DeserializeObject()這個(gè)函數(shù)就是啦。

當(dāng)然該功能插件之適合用于web應(yīng)用程序和內(nèi)部網(wǎng)站中，對(duì)于網(wǎng)站來(lái)說(shuō)有些不適合，畢竟從SEO角度來(lái)講jquery直接生成的數(shù)據(jù)是不是很好的顯示方式。不多說(shuō)了，大家可以看看我的代碼，如果對(duì)該插件有更好的建議或者修改歡迎交流。
jquery+ashx無(wú)刷新GridView數(shù)據(jù)顯示插件下載

您可能感興趣的文章: