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字典探测用户名工具
Oct 05 Javascript
Javascript下的keyCode键码值表
Apr 10 Javascript
JS TextArea字符串长度限制代码集合
Oct 31 Javascript
让浏览器DOM元素最后加载的js方法
Jul 29 Javascript
js同源策略详解
May 21 Javascript
jQuery实现仿微软首页感应鼠标变化滑动窗口效果
Oct 08 Javascript
Jquery attr()方法 属性赋值和属性获取详解
Apr 15 Javascript
js实现按钮控制带有停顿效果的图片滚动
Aug 30 Javascript
Bootstrap 模态框(Modal)插件代码解析
Dec 21 Javascript
JSON对象转化为字符串详解
Aug 11 Javascript
vue 页面加载进度条组件实例
Feb 05 Javascript
vue-router传递参数的几种方式实例详解
Nov 13 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
Laravel框架实现的rbac权限管理操作示例
2019/01/16 PHP
PHP 文件写入和读取操作实例详解【必看篇】
2019/11/04 PHP
javascript 模式设计之工厂模式详细说明
2010/05/10 Javascript
jquery 删除cookie失效的解决方法
2013/11/12 Javascript
juery框架写的弹窗效果适合新手
2013/11/27 Javascript
Javascript控制input输入时间格式的方法
2015/01/28 Javascript
深入理解JavaScript系列(19):求值策略(Evaluation strategy)详解
2015/03/05 Javascript
点评js异步加载的4种方式
2015/12/22 Javascript
详解Angular-Cli中引用第三方库
2017/05/21 Javascript
vue-resource调用promise取数据方式详解
2017/07/21 Javascript
详解Nodejs 通过 fs.createWriteStream 保存文件
2017/10/10 NodeJs
Bootstrap框架建立树形菜单(Tree)的实例代码
2017/10/30 Javascript
解决iView中时间控件选择的时间总是少一天的问题
2018/03/15 Javascript
通过vue手动封装on、emit、off的代码详解
2019/05/29 Javascript
一文快速了解JQuery中的AJAX
2019/05/31 jQuery
深入理解 JS 垃圾回收
2019/06/03 Javascript
使用VueCli3+TypeScript+Vuex一步步构建todoList的方法
2019/07/25 Javascript
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
使用webpack/gulp构建TypeScript项目的方法示例
2019/12/18 Javascript
bootstrap实现tab选项卡切换
2020/08/09 Javascript
JS实现手风琴特效
2020/11/08 Javascript
如何在vue-cli中使用css-loader实现css module
2021/01/07 Vue.js
Django中对通过测试的用户进行限制访问的方法
2015/07/23 Python
详解Python中的四种队列
2018/05/21 Python
Python使用pymysql从MySQL数据库中读出数据的方法
2018/07/25 Python
用Python抢火车票的简单小程序实现解析
2019/08/14 Python
python解析xml文件方式(解析、更新、写入)
2020/03/05 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
市场营销管理毕业生自荐信
2014/03/03 职场文书
《沉香救母》教学反思
2014/04/19 职场文书
品牌推广策划方案
2014/05/28 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
小学学习委员竞选稿
2015/11/20 职场文书
详细分析PHP7与PHP5区别
2021/06/26 PHP