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入门基础之私有变量
Feb 23 Javascript
jquery ui 1.7 ui.tabs 动态添加与关闭(按钮关闭+双击关闭)
Apr 01 Javascript
javascript attachEvent绑定多个事件执行顺序问题
Oct 20 Javascript
JavaScript生成GUID的多种算法小结
Aug 18 Javascript
jQuery获得document和window对象宽度和高度的方法
Mar 25 Javascript
6种javascript显示当前系统时间代码
Dec 01 Javascript
关于使用axios的一些心得技巧分享
Jul 02 Javascript
Angular 2父子组件数据传递之@Input和@Output详解(下)
Jul 05 Javascript
一篇文章让你彻底弄懂JS的事件冒泡和事件捕获
Aug 14 Javascript
jQuery+HTML5实现WebGL高性能烟花绽放动画效果【附demo源码下载】
Aug 18 jQuery
Javasript设计模式之链式调用详解
Apr 26 Javascript
使用Vue实现简单计算器
Feb 25 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
德生PL660的电路分析和打磨
2021/03/02 无线电
php中使用session防止用户非法登录后台的方法
2015/01/27 PHP
PHP函数func_num_args用法实例分析
2015/12/07 PHP
php结合md5的加密解密算法实例
2016/09/30 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
JS 用6N±1法求素数 实例教程
2009/10/20 Javascript
jquery DOM操作 基于命令改变页面
2010/05/06 Javascript
Javascript 倒计时源代码.(时.分.秒) 详细注释版
2011/05/09 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
js对table的td进行相同内容合并示例详解
2013/12/27 Javascript
js设置文本框中焦点位置在最后的示例代码(简单实用)
2014/03/04 Javascript
文本框倒叙输入让输入框的焦点始终在最开始的位置
2014/09/01 Javascript
AngularJS中如何使用$http对MongoLab数据表进行增删改查
2016/01/23 Javascript
JavaScript sort数组排序方法和自我实现排序方法小结
2016/06/06 Javascript
Jquery组件easyUi实现手风琴(折叠面板)示例
2016/08/23 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
JS实现基于拖拽改变物体大小的方法
2018/01/23 Javascript
使用proxy实现一个更优雅的vue【推荐】
2018/06/19 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
JS实现简易留言板(节点操作)
2020/03/16 Javascript
使用python提取html文件中的特定数据的实现代码
2013/03/24 Python
Python验证码识别处理实例
2015/12/28 Python
学生信息管理系统python版
2018/10/17 Python
python 寻找离散序列极值点的方法
2019/07/10 Python
基于Pycharm加载多个项目过程图解
2020/01/19 Python
python 字典item与iteritems的区别详解
2020/04/25 Python
在Pytorch中使用Mask R-CNN进行实例分割操作
2020/06/24 Python
孕妇装中的著名品牌:Isabella Oliver(伊莎贝拉·奥利弗)
2016/10/31 全球购物
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
农民致富事迹材料
2014/01/23 职场文书
前处理班长职位说明书
2014/03/01 职场文书
2015年万圣节活动总结
2015/03/24 职场文书
2016年6.5世界环境日宣传活动总结
2016/04/01 职场文书
详解用Python把PDF转为Word方法总结
2021/04/27 Python