jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)

时间:2024-05-11 09:17:35 

理由: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数据显示插件下载

标签:jquery,无刷新,GridView,数据显示
0
投稿

猜你喜欢

  • 各种鼠标经过图片边框加粗效果整理

    2007-09-29 21:43:00
  • Python中的异常处理相关语句基础学习笔记

    2021-10-18 00:54:50
  • .NET中获取程序根目录的常用方法介绍

    2023-07-09 19:52:41
  • css表单中textarea域背景图片设置方法

    2008-04-21 13:56:00
  • python包合集shutil示例代码详解

    2022-03-28 12:04:27
  • Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)

    2024-04-16 09:23:29
  • sql server not in 语句使程充崩溃

    2012-01-05 19:05:00
  • Python基本语法经典教程

    2021-08-25 18:16:51
  • 面向对象CSS FAQ[译]

    2009-10-27 15:59:00
  • Python实现简易超市管理系统

    2023-01-08 12:09:01
  • python计算机视觉opencv卡号识别示例详解

    2023-04-14 13:58:25
  • 浅谈numpy数组的几种排序方式

    2022-04-24 12:48:15
  • django 解决manage.py migrate无效的问题

    2021-08-18 02:28:51
  • python爬虫之场内ETF基金获取

    2021-08-18 17:51:34
  • 网页设计三剑客

    2010-08-31 17:05:00
  • Vscode常用快捷键列表、插件安装、console.log详解

    2023-02-11 01:29:04
  • Keras搭建M2Det目标检测平台示例

    2023-11-10 10:49:01
  • Javascript中的getUTCDay()方法使用详解

    2024-05-11 10:24:24
  • python实现的config文件读写功能示例

    2021-10-11 07:28:04
  • Python 数据处理库 pandas进阶教程

    2022-04-18 01:17:13
  • asp之家 网络编程 m.aspxhome.com