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中find()方法用法实例
Jan 07 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
Mar 13 Javascript
jquery中attr和prop的区别分析
Mar 16 Javascript
举例讲解jQuery中可见性过滤选择器的使用
Apr 18 Javascript
基于JavaScript代码实现自动生成表格
Jun 15 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
js实现一个简单的数字时钟效果
Mar 29 Javascript
Angular.Js之Scope作用域的学习教程
Apr 27 Javascript
vuejs2.0子组件改变父组件的数据实例
May 10 Javascript
详谈js中标准for循环与foreach(for in)的区别
Nov 02 Javascript
详解JavaScript事件循环机制
Sep 07 Javascript
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
一个简单的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
我的论坛源代码(四)
2006/10/09 PHP
php array_search() 函数使用
2010/04/13 PHP
php正则表达式(regar expression)
2011/09/10 PHP
PHP检查网站是否宕机的方法示例
2017/07/24 PHP
PHP操作Postgresql封装类与应用完整实例
2018/04/24 PHP
服务端 VBScript 与 JScript 几个相同特性的写法 By shawl.qiu
2007/03/06 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
Javascript 实现复制(Copy)动作方法大全
2014/06/20 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
2015/02/03 Javascript
jQuery qrcode生成二维码的方法
2016/04/03 Javascript
JavaScript实现Base64编码转换
2016/04/23 Javascript
jQuery实现的简单在线计算器功能
2017/05/11 jQuery
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
JS获取并处理php数组的方法实例分析
2018/09/04 Javascript
详解webpack模块加载器兼打包工具
2018/09/11 Javascript
ant design vue datepicker日期选择器中文化操作
2020/10/28 Javascript
王纯业的Python学习笔记 下载
2007/02/10 Python
python调用cmd命令行制作刷博器
2014/01/13 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
python 子类调用父类的构造函数实例
2020/03/12 Python
解决Python发送Http请求时,中文乱码的问题
2020/04/30 Python
如何解决flask修改静态资源后缓存文件不能及时更改问题
2020/08/02 Python
div或img图片高度随宽度自适应的方法
2020/02/06 HTML / CSS
美国珠宝精品店:Opulent Jewelers
2019/08/20 全球购物
机电专业个人自荐信格式模板
2013/09/23 职场文书
教师演讲稿范文
2014/01/08 职场文书
应聘护理专业毕业自荐书范文
2014/02/12 职场文书
运动会方阵解说词
2014/02/12 职场文书
学校元旦晚会方案
2014/02/19 职场文书
经典商业广告词
2014/03/13 职场文书
民主评议党员自我评议范文2014
2014/09/26 职场文书
居委会个人对照检查材料思想汇报
2014/09/29 职场文书
2014年圣诞节寄语
2014/12/08 职场文书
家装业务员岗位职责
2015/04/03 职场文书
Win10系统下配置Java环境变量
2021/06/13 Java/Android
JavaWeb Servlet开发注册页面实例
2022/04/11 Java/Android