jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)


Posted in Javascript onApril 25, 2010

理由:jquery简单,兼容性好且容易封装。废话不多说,马上开始我们的Jquery插件编写吧。应该有很多人写过类似的插件,我也是有些模仿flexGrid的形式。

需求:GridView显示数据,无刷新分页,无刷新排序,无刷新过滤(搜索数据),基于ASP.NET(我们这里有ashx一般处理文件来实现)。

使用到技术:asp.net2.0, jquery,css

首先写的是jquery插件方面,使用的核心函数还是jquery的ajax函数,方便快捷。

$.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);} 
});

看了就这么简单的一句,jquery就是比较爽的。具体的代码请下载下面的附件查看哦。

先发张生成后结果图来看看(样式不是很好看,需要的自己掂量着修改吧)

 jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)

排序和过滤功能

jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)

jquery+ashx的无刷新分页功能

jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)

其实这里除了jquery充当整个插件的主要架构外,另外一个重要的文件就是ashx这个一般处理文件啦。ashx在我整个jqueryGrid插件中输出{\n page:1,\ntotal:0,pages:1,rows:'',cols:''}这样的json代码,相信用过josn的朋友都明白。其中为了减少错误我用了一个第三方插件Newtonsoft.Json,这是格式化json字符串的JsonConvert.DeserializeObject()这个函数就是啦。

当然该功能插件之适合用于web应用程序和内部网站中,对于网站来说有些不适合,毕竟从SEO角度来讲jquery直接生成的数据是不是很好的显示方式。不多说了,大家可以看看我的代码,如果对该插件有更好的建议或者修改欢迎交流。
jquery+ashx无刷新GridView数据显示插件下载

Javascript 相关文章推荐
javascript void(0)的妙用
Oct 21 Javascript
15款优秀的jQuery导航菜单插件分享
Jul 19 Javascript
javascript快速排序算法详解
Sep 17 Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 Javascript
js点击按钮实现水波纹效果代码(CSS3和Canves)
Sep 15 Javascript
JS变量及其作用域
Mar 29 Javascript
JS 组件系列之 bootstrap treegrid 组件封装过程
Apr 28 Javascript
Agularjs妙用双向数据绑定实现手风琴效果
May 26 Javascript
Angular指令之restict匹配模式的详解
Jul 27 Javascript
深入理解JavaScript的值传递和引用传递
Oct 24 Javascript
jquery实现动态改变css样式的方法分析
May 27 jQuery
webpack的移动端适配方案小结
Jul 25 Javascript
一个简单的jQuery插件制作 学习过程及实例
Apr 25 #Javascript
Javascript中的相等与不等运算
Apr 25 #Javascript
下载网站打开页面后间隔多少时间才显示下载链接地址的代码
Apr 25 #Javascript
jQuery 打造动态渐变按钮 详细图文教程
Apr 25 #Javascript
javascript之学会吝啬 精简代码
Apr 25 #Javascript
一些相见恨晚的 JavaScript 技巧
Apr 25 #Javascript
Javascript 中的 && 和 || 使用小结
Apr 25 #Javascript
You might like
轻松修复Discuz!数据库
2008/05/03 PHP
PHP + plupload.js实现多图上传并显示进度条加删除实例代码
2017/03/06 PHP
一个刚完成的layout(拖动流畅,不受iframe影响)
2007/08/17 Javascript
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
javascript实现tab切换的四种方法
2015/11/05 Javascript
酷炫jQuery全屏3D焦点图动画效果
2016/03/22 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
Angular获取手机验证码实现移动端登录注册功能
2017/05/17 Javascript
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
vuex的使用及持久化state的方式详解
2018/01/23 Javascript
Angular Renderer (渲染器)的具体使用
2018/05/03 Javascript
每个 JavaScript 工程师都应懂的33个概念
2018/10/22 Javascript
JavaScript实现预览本地上传图片功能完整示例
2019/03/08 Javascript
微信小程序实现的一键拨号功能示例
2019/04/24 Javascript
分享一个vue项目“脚手架”项目的实现步骤
2019/05/26 Javascript
基于Vue 撸一个指令实现拖拽功能
2019/10/09 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
[00:53]2015国际邀请赛 中国区预选赛一触即发
2015/05/14 DOTA
[00:55]深扒TI7聊天轮盘语音出处3
2017/05/11 DOTA
Python实现图像几何变换
2015/07/06 Python
Python3内置模块之json编解码方法小结【推荐】
2020/12/09 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
python Django 创建应用过程图示详解
2019/07/29 Python
django创建超级用户过程解析
2019/09/18 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
网页切图的CSS和布局经验与要点
2015/04/09 HTML / CSS
Lampegiganten丹麦:欧洲领先的照明网上商店
2018/04/25 全球购物
商务日语毕业生自荐信
2013/11/23 职场文书
大学本科毕业生的自我鉴定
2013/11/26 职场文书
优秀交警事迹材料
2014/01/26 职场文书
四风问题自查报告剖析材料
2014/02/08 职场文书
哈弗商学院毕业生求职信
2014/02/26 职场文书
感恩母亲节活动方案
2014/03/04 职场文书
关于读书的演讲稿1000字
2014/08/27 职场文书
2014流动人口计划生育工作总结
2014/12/20 职场文书
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python