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

 

 
        

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM