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 相关文章推荐
JQuery团队打造的javascript单元测试工具QUnit介绍
Feb 26 Javascript
使用jQuery轻松实现Ajax的实例代码
Aug 16 Javascript
动态加载图片路径 保持JavaScript控件的相对独立性
Sep 03 Javascript
JavaScript入门之基本函数详解
Oct 21 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
JS对大量数据进行多重过滤的方法
Nov 04 Javascript
JS原型与原型链的深入理解
Feb 15 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
Mar 01 Javascript
对vue事件的延迟执行实例讲解
Aug 28 Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 Javascript
js module大战
Apr 19 Javascript
JS数组方法shift()、unshift()用法实例分析
Jan 18 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
DOMXML函数笔记
2006/10/09 PHP
怎样去阅读一份php源代码
2009/08/21 PHP
PHP函数篇之掌握ord()与chr()函数应用
2011/12/05 PHP
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
jquery 倒计时效果实现秒杀思路
2013/09/11 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
2014/08/27 Javascript
深入理解javascript变量声明
2014/11/20 Javascript
html的DOM中Event对象onabort事件用法实例
2015/01/21 Javascript
深入学习AngularJS中数据的双向绑定机制
2016/03/04 Javascript
关于JSON与JSONP简单总结
2016/08/16 Javascript
轻松掌握JavaScript代理模式
2016/08/26 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
springmvc接收jquery提交的数组数据代码分享
2017/10/28 jQuery
vue router使用query和params传参的使用和区别
2017/11/13 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
js实现移动端轮播图
2020/12/21 Javascript
jQuery实现的隔行变色功能【案例】
2019/02/18 jQuery
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
返回上一个url并刷新界面的js代码
2020/09/12 Javascript
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
2020/11/20 Vue.js
js实现菜单跳转效果
2020/12/11 Javascript
[01:06:42]VP vs NewBee Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
python3利用smtplib通过qq邮箱发送邮件方法示例
2017/12/03 Python
flask-socketio实现WebSocket的方法
2018/07/31 Python
Python面向对象总结及类与正则表达式详解
2019/04/18 Python
Python猴子补丁Monkey Patch用法实例解析
2020/03/23 Python
python批量处理多DNS多域名的nslookup解析实现
2020/06/28 Python
python 基于pygame实现俄罗斯方块
2021/03/02 Python
HTML5的结构和语义(2):结构
2008/10/17 HTML / CSS
AmazeUI 缩略图的实现示例
2020/08/18 HTML / CSS
瑞典灯具和照明网上商店:Lamp24.se
2018/03/17 全球购物
介绍一下SQL注入攻击的种类和防范手段
2012/02/18 面试题
森林病虫害防治方案
2014/06/02 职场文书
《清澈的湖水》教学反思
2016/02/17 职场文书
学前班教学反思
2016/02/24 职场文书