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中的location用法简单介绍
Mar 07 Javascript
Javascript 面向对象之重载
May 04 Javascript
jquery提升性能最佳实践小结
Dec 06 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
Jan 24 Javascript
jQuery中clearQueue()方法用法实例
Dec 29 Javascript
js实现完全自定义可带多级目录的网页鼠标右键菜单方法
Feb 28 Javascript
javascript实现获取字符串hash值
May 10 Javascript
JavaScript中字符串拼接的基本方法
Jul 07 Javascript
基于jquery实现瀑布流布局
Jun 28 Javascript
详解为Bootstrap Modal添加拖拽的方法
Jan 05 Javascript
Ajax异步刷新功能及简单案例
Nov 20 Javascript
前端框架ECharts dataset对数据可视化的高级管理
Dec 24 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
php输出xml必须header的解决方法
2014/10/17 PHP
PHP如何使用Memcached
2016/04/05 PHP
PHP实现将多个文件压缩成zip格式并下载到本地的方法示例
2018/05/23 PHP
javascript getElementsByClassName 和js取地址栏参数
2010/01/02 Javascript
JavaScript为对象原型prototype添加属性的两种方式
2010/08/01 Javascript
理解Javascript_06_理解对象的创建过程
2010/10/15 Javascript
探索Emberjs制作一个简单的Todo应用
2012/11/07 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
jQuery+canvas实现的球体平抛及颜色动态变换效果
2016/01/28 Javascript
浅谈jQuery为哪般去掉了浏览器检测
2016/08/29 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
js 作用域和变量详解
2017/02/16 Javascript
javascript基础练习之翻转字符串与回文
2017/02/20 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
jQuery+ajax实现修改密码验证功能实例详解
2017/07/06 jQuery
详解angular分页插件tm.pagination二次触发问题解决方案
2018/07/20 Javascript
element-ui表格列金额显示两位小数的方法
2018/08/24 Javascript
nodejs aes 加解密实例
2018/10/10 NodeJs
JavaScript设计模式之代理模式实例分析
2019/01/16 Javascript
python中WSGI是什么,Python应用WSGI详解
2017/11/24 Python
python利用wx实现界面按钮和按钮监听和字体改变的方法
2019/07/17 Python
tornado+celery的简单使用详解
2019/12/21 Python
python接口自动化之ConfigParser配置文件的使用详解
2020/08/03 Python
Canvas globalCompositeOperation
2018/12/18 HTML / CSS
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
单位刻章介绍信范文
2014/01/11 职场文书
金融学专科生自我鉴定
2014/02/21 职场文书
婚前协议书
2014/04/15 职场文书
ktv周年庆活动方案
2014/08/18 职场文书
2015年检察院个人工作总结
2015/05/20 职场文书
2015年学校少先队工作总结
2015/07/20 职场文书
简短清晨问候语
2015/11/10 职场文书
关于艺术节的开幕致辞
2016/03/04 职场文书
Python 读写 Matlab Mat 格式数据的操作
2021/05/19 Python
Python使用openpyxl批量处理数据
2021/06/23 Python
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android