Web jquery表格組件 JQGrid 的使用 - 從入門到精通 開篇及索引

 由於內容比較多，因此每篇講解一些內容，最後會放出所有代碼，能夠參考。操做中總會遇到各式各樣的問題，我的對部分問題的研究在最後一篇 問題研究 裏。歡迎你們探討學習。

代碼都通過我的測試，但仍可能有各類未考慮到問題，歡迎提出。

 

精通可能誇張了些，但估計能解決使用過程當中遇到的大部分問題。

 

這一篇爲 JQGrid 簡單介紹及系列文章索引。

 

系列索引

Web jquery表格組件 JQGrid 的使用 - 從入門到精通 開篇及索引

Web jquery表格組件 JQGrid 的使用 - 4.JQGrid參數、ColModel API、事件及方法

Web jquery表格組件 JQGrid 的使用 - 5.Pager翻頁、搜索、格式化、自定義按鈕

Web jquery表格組件 JQGrid 的使用 - 6.準備工做 & Hello JQGrid

Web jquery表格組件 JQGrid 的使用 - 7.查詢數據、編輯數據、刪除數據

Web jquery表格組件 JQGrid 的使用 - 8.Pager、新增數據、查詢、刷新、查看數據

Web jquery表格組件 JQGrid 的使用 - 所有代碼

Web jquery表格組件 JQGrid 的使用 - 11.問題研究

 

JQGrid導出Excel文件

 

 

目錄

1.說明

2.JQGrid簡介

3.安裝

 

1.說明

最近在使用JQGRID，因此進行了一些研究，這個系列博文就是研究成果。以代碼爲主，說明爲輔，請在調試中理解，再多的文字描述比不上幾行代碼的實現。

 

2.JQGrid簡介

JQGrid是一個在jquery基礎上作的一個表格控件，以ajax的方式和服務器端通訊。

JQGrid Demo 是一個在線的演示項目。在這裏，能夠知道jqgrid能夠作什麼事情。

 

使用場景：

數據多且雜時，若是想要給表格數據的顯示增長方便的查詢/刪選功能。

JqGrid免費，開源，使用方便，是一個不錯的選擇。

 

JqGrid的一些說明

·         外觀時髦，功能齊全

·         JS控件，用來顯示和操做表格數據

·         使用AJAX方式

·         能夠被集成到任何服務器端技術，例如ASP, JavaServelets, JSP, PHP 等等.

·         由Trirand公司Tony Tomov開發.

·         和ASP.NET集成很是簡單

 

3.安裝

新建一個ASP.NET Web 應用程序，選擇web form方式便可。新建一個web頁面JQGrid.aspx，設爲起始頁。

 

由於jqGrid依賴於jQuery ，因此要下載並引入。從下面網址下載最新的或使用已有的便可。

http://jqueryui.com/download/#!

http://jquery.com/download/

 

項目新建一個JQGrid文件夾，此文件夾下只存儲js和css相關文件。實際項目固然不會這麼用，此處僅爲示例。

添加jQuery文件。

<script src="JQGrid/jquery-1.11.1.min.js"></script>

<link href="JQGrid/jquery-ui-1.11.1.custom/jquery-ui.css" rel="stylesheet" />

 

這樣jQuery的東西就準備好了。

下面再開始逐個添加咱們JqGrid文件。

從這裏下載吧 https://github.com/tonytomov/jqGrid/tree/master

<link href="JQGrid/ui.jqgrid.css" rel="stylesheet" />

<script src="JQGrid/grid.locale-cn.js"></script>

<script src="JQGrid/jquery.jqGrid.js"></script>

 

 

注意JqGrid文件引用必須在jQuery引用的下方。

 

效果圖：

 

參考及致謝

http://www.cnblogs.com/cobble19/archive/2013/02/05/2892894.html

http://www.trirand.com/jqgridwiki/doku.php?id=start

http://www.trirand.com/blog/jqgrid/jqgrid.html

http://www.codeproject.com/Articles/609442/Using-JqGrid-in-ASP-NET

http://www.cnblogs.com/miro/p/jqGrid.html

http://blog.csdn.net/feiying008/article/details/38036729