因為內容比較多,所以每篇講解一些內容,最后會放出全部代碼,可以參考。操作中總會遇到各式各樣的問題,個人對部分問題的研究在最后一篇 問題研究 里。歡迎大家探討學習。
代碼都經過個人測試,但仍可能有各種未考慮到問題,歡迎提出。
精通可能誇張了些,但估計能解決使用過程中遇到的大部分問題。
這一篇為 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.問題研究
目錄
2.JQGrid簡介
3.安裝
1.說明
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/#!
項目新建一個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