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面向对象之Prototypes和继承
Jul 12 Javascript
浅谈jQuery中setInterval()方法
Jul 07 Javascript
jQuery实现自动与手动切换的滚动新闻特效代码分享
Aug 27 Javascript
微信小程序 WXDropDownMenu组件详解及实例代码
Oct 24 Javascript
让微信小程序支持ES6中Promise特性的方法详解
Jun 13 Javascript
实例分析JS与Node.js中的事件循环
Dec 12 Javascript
解决vue-router中的query动态传参问题
Mar 20 Javascript
在vue项目中,将juery设置为全局变量的方法
Sep 25 Javascript
原生JS实现的放大镜特效示例【测试可用】
Dec 08 Javascript
通过实例学习React中事件节流防抖
Jun 17 Javascript
小程序实现录音功能
Sep 22 Javascript
带你彻底理解JavaScript中的原型对象
Apr 14 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 excel类 phpExcel使用方法介绍
2010/08/21 PHP
PHP autoload与spl_autoload自动加载机制的深入理解
2013/06/05 PHP
解析使用substr截取UTF-8中文字符串出现乱码的问题
2013/06/20 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
extjs中form与grid交互数据(record)的方法
2013/08/29 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
jquery ajax应用中iframe自适应高度问题解决方法
2014/04/12 Javascript
jquery插件uploadify实现带进度条的文件批量上传
2015/12/13 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
js运动事件函数详解
2016/10/21 Javascript
JS实现改变HTML上文字颜色和内容的方法
2016/12/30 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
深入解析nodejs HTTP服务
2017/07/25 NodeJs
JS处理数据四舍五入(tofixed与round的区别详解)
2017/10/26 Javascript
Node.js使用Koa搭建 基础项目
2018/01/08 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
AngularJS自定义过滤器用法经典实例总结
2018/05/17 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
vue项目持久化存储数据的实现代码
2018/10/01 Javascript
了解Javascript中函数作为对象的魅力
2019/06/19 Javascript
react的hooks的用法详解
2020/10/12 Javascript
微信小程序 接入腾讯地图的两种写法
2021/01/12 Javascript
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
python进阶教程之循环相关函数range、enumerate、zip
2014/08/30 Python
简化Python的Django框架代码的一些示例
2015/04/20 Python
Django中URLconf和include()的协同工作方法
2015/07/20 Python
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
详解python使用turtle库来画一朵花
2019/03/21 Python
在校生钳工实习自我鉴定
2013/09/19 职场文书
工程部文员岗位职责
2015/02/04 职场文书
宾馆卫生管理制度
2015/08/06 职场文书
诚信高考倡议书
2019/06/24 职场文书
oracle覆盖导入dmp文件的2种方法
2021/05/21 Oracle
MySQL 使用索引扫描进行排序
2021/06/20 MySQL
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
MySql中的json_extract函数处理json字段详情
2022/06/05 MySQL