time 
设为首页】【收藏本站
当前位置: 主页 > JavaScript > 其它JS框架 > ASP.NET结合JqGrid完整示例

ASP.NET结合JqGrid完整示例

时间:2013-09-24 15:34 点击:13388次 字体:[ ]




介绍&使用场景

JqGrid不是一个新鲜玩意,已经是一个久经证明的开源数据显示控件了。

园子里也有一些介绍文章,为什么还要写这篇文章呢?

因为还找不到可以完整讲述JqGrid集成的文章,我指的是从头至尾的完整的讲述,而不是其中一些片段或介绍一些参数。

正好在看到一篇文章完整的讲述了这个步骤: http://www.codeproject.com/Articles/609442/Using-JqGrid-in-ASP-NET

本文主要参考了这篇文章,讲述jqGrid和ASP.NET集成。

使用场景:

数据多且杂时,如果想要给表格数据的显示增加方便的查询/删选功能。

JqGrid免费,开源,使用方便,是一个不错的选择。

 

JqGrid的一些说明

  • 外观时髦,功能齐全
  • JS控件,用来显示和操作表格数据
  • 使用AJAX方式
  • 可以被集成到任何服务器端技术,例如ASP, JavaServelets, JSP, PHP 等等.
  • 由Trirand公司Tony Tomov开发.
  • 和ASP.NET集成非常简单

JqGrid和ASP.NET整合详细步骤

  • 下载JqGrid,添加所需的文件到ASP.NET应用程序 (主要是一些Scripts and CSS).
  • 在需要使用的页面中初始化JqGrid.
  • 绑定数据
  • 其他一些操作,如增删改
 

1. 我提到的第一点,你可以在以下地址下载JqGrid和相关的文件

http://www.trirand.com/blog/?page_id=6 

下载得到jquery.jqGrid-4.5.2.zip

将文件解压,里面是一些css和script文件夹, 让我们去看看如何去使用这些文件。
为了更好的理解, 按照国际惯例我新建了一个demo程序:JQGridPOC,用来展示集成的步骤和所具有的功能。

我们需要引入的主要文件是jQuery, 因为jqGrid依赖于jQuery .

在解决方案中专门新建一个文件夹JQGridReq用来放JqGrid相关的文件。

第一步,添加jQuery文件(我添加了jQuery 1.9)。

第二步,如果我们要如何使用jQuery中任何UI相关的东西? 是的,CSS文件. 去jQuery的官网下载。 

最后一步,添加Jquery-ui-1.9.2.custom.css 到程序中。

请确保你同时添加了相关的图片文件夹,因为我们添加的CSS可能也会用到相关的图片。

这样jQuery的东西就准备好了。

下面再开始逐个添加我们JqGrid文件。

  1. jquery.jqGrid-4.5.2\src\ jquery.jqGrid.js 
  2. jquery.jqGrid-4.5.2\js\i18n\ grid.locale-en.js
  3. jquery.jqGrid-4.5.2\js\i18n\ grid.locale-cn.js
  4. jquery.jqGrid-4.5.2\css\ ui.jqgrid.css

你看到上面添加的locale-en.js/local-en.js文件了吗? 他们非常重要,可以在里面更改一些预设的参数。

同样的,我们也添加了CSS文件.

现在我们先决条件都完成了。

如下图,你可以看到我们添加后的文件和文件夹结构.

ASP.NET结合JqGrid完整示例_www.fengfly.com

 

让我们去.aspx 页面添加JqGrid吧。

这个简单的示例项目中我使用了简单的客户管理的案例,使用Default.aspx 做为例子。

需要将所有需要的文件先引用到HTML页的head部分,如下图。

ASP.NET结合JqGrid完整示例_www.fengfly.com

现在需要做的是先将HTML table标签放置到页面中,给这个table指定一个ID jQgridPOC (这个table就是我们即将要转变成的JqGrid)。

 

ASP.NET结合JqGrid完整示例_www.fengfly.com



本文地址 : http://www.fengfly.com/plus/view-213736-1.html
标签: ASP.NET jqGrid
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
验证码: