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 相关文章推荐
js 处理数组重复元素示例代码
Dec 27 Javascript
js定时调用方法成功后并停止调用示例
Apr 08 Javascript
JavaScript改变CSS样式的方法汇总
May 07 Javascript
JS中call/apply、arguments、undefined/null方法详解
Feb 15 Javascript
轻松掌握JavaScript享元模式
Aug 27 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
JS实用的带停顿的逐行文本循环滚动效果实例
Nov 23 Javascript
vue.js实现表格合并示例代码
Nov 30 Javascript
老生常谈angularjs中的$state.go
Apr 24 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 31 Javascript
js实现批量删除功能
Aug 27 Javascript
JS数组的常用方法整理
Mar 31 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
深入了解php4(2)--重访过去
2006/10/09 PHP
PHP性能优化准备篇图解PEAR安装
2011/12/05 PHP
ThinkPHP结合AjaxFileUploader实现无刷新文件上传的方法
2014/10/29 PHP
详解PHP对象的串行化与反串行化
2016/01/24 PHP
PHP实现的自定义图像居中裁剪函数示例【测试可用】
2017/08/11 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
javascript 鼠标拖动图标技术
2010/02/07 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
JavaScript中合并数组的N种方法
2014/09/16 Javascript
angularjs实现时间轴效果的示例代码
2017/11/29 Javascript
在vue项目中,使用axios跨域处理
2018/03/07 Javascript
axios 处理 302 状态码的解决方法
2018/04/10 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
JavaScript学习笔记之DOM操作实例分析
2019/01/08 Javascript
ES6中字符串的使用方法扩展
2019/06/04 Javascript
Python中input和raw_input的一点区别
2014/10/21 Python
Python实现Linux命令xxd -i功能
2016/03/06 Python
python3调用R的示例代码
2018/02/23 Python
Python使用matplotlib绘制随机漫步图
2018/08/27 Python
numpy.where() 用法详解
2019/05/27 Python
PyQt编程之如何在屏幕中央显示窗体的实例
2019/06/18 Python
python高斯分布概率密度函数的使用详解
2019/07/10 Python
Python使用Tkinter实现转盘抽奖器的步骤详解
2020/01/06 Python
python求前n个阶乘的和实例
2020/04/02 Python
python 错误处理 assert详解
2020/04/20 Python
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
iHerb俄罗斯:维生素、补品和天然产品
2020/07/09 全球购物
回门宴新郎答谢词
2014/01/12 职场文书
聚美优品的广告词
2014/03/14 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
建设投标担保书
2014/05/13 职场文书
节电标语大全
2014/06/23 职场文书
学术会议领导致辞
2015/07/29 职场文书
pytorch 实现在测试的时候启用dropout
2021/05/27 Python
OpenCV-Python 实现两张图片自动拼接成全景图
2021/06/11 Python