JqGrid—功能強大的jQuery Grid Control作者: 唐瑤瑤 / 臺灣大學計資中心程式設計師 jqGrid 是目前極受歡迎的jQuery表格套件(Grid Control),其免費的版本完全在使用者瀏覽器端執行,與伺服器端使用何種語言開發無關,只要會開發CSS 及jQuery即可,所以無論是PHP、Java Servlets、JSP、ColdFusion、Perl.或ASP.NET的網頁應用程式都可以採用這個套件。 jqGrid 是目前極受歡迎的jQuery表格套件(Grid Control),其免費的版本完全在使用者瀏覽器端執行,與伺服器端使用何種語言開發無關,只要會開發CSS 及jQuery即可,所以無論是PHP、Java Servlets、JSP、ColdFusion、Perl.或ASP.NET的網頁應用程式都可以採用這個套件。以筆者開發的校內行政E化系統來說,訪客中心導覽系統(PHP)及導生綜合資料系統(ASP .NET)等,都是採用jQuery + jqGrid 的範例。 JqGrid 的特色有哪些? 2.1 客製化的工具列。 2.2 預設的Navigator 工具列,可以很容易的使用新增、刪除、編輯、檢視及搜尋等功能。 2.3 完整的分頁功能。 2.4 按下任一欄位的標頭,皆可以該欄位為排序項目。無論是升冪或降冪皆可。 2.5 預設的action formatter,可以快速而直覺地對每筆資料做運算。 2.6 除了jqGrid lib 所提供之formatter(包括email,link,select,checkbox,date 等) 外,開發者可以從資料來源自訂資料顯現方式,即所謂之custom formatter。 - 採用CSS為佈景,搭配jQuery UI,程式設計師不再需要花精神於頁面設計。之前開發程式仍須仰賴美術設計師做畫面修改及圖示設計,往往一來一回就花費了許多時間。 UI CSS Framework 提供我們預設的版型、色系、圖示等可以直接套用,甚至隨時更換。又或者可以直接將預設的版型作客製化,十分方便。有關jQueryUI Theme的說明,請參考http://jqueryui.com/themeroller/。
- 跨瀏覽器:目前測試支援的瀏覽器有 IE 8.0+, FireFox 2.0+, Safari 3.0+, Opera 9.2+ 及Google Chrome。
- 支援多種預設或自訂的資料格式。
- 支援多種編輯功能,包括Inline editing、Form editing 及Cell editing。下圖為Form Editing 模式,使用者選擇新增或編輯資料時,程式會跳出一個對話框供使用者編輯,並聚焦於該表格。
下圖為Inline Editing 模式,使用者可直接於Grid表格上編輯,是一種更為直覺的使用方式。 - 篩選與搜尋:於Navigator 工具列上提供任意欄位之篩選握搜尋功能,對資料量龐大的表格來說十分方便好用。
- 容易自學:jqGrid 的學習門檻主要在jQuery+CSS 的使用,若已經熟習上述技術的開發者應該沒有入門的問題。也由於jqGrid 十分受歡迎,因此使用Google搜尋幾乎可以找到所有的使用及解決方案。當然,原提供者網站內容十分完整,包含Method、API、Event 及option說明文件及範例。
範例: 接著我們用一個簡單的程式來說明jqGrid 的使用。 Step1:下載jqGrid插件,建議所有的元件都一次下載。下載網址http://www.trirand.com/blog/?page_id=6 Step 2:於HTML檔案中須將必要之css及js 檔案引用進來 <link rel="stylesheet" type="text/css" ref=" jquery-ui-1.8.13.custom.css"/> <link rel="stylesheet" type="text/css" href="ui.jqgrid.css" /> <script src="jquery-1.7.1.min.js" type="text/javascript"></script> <script src="grid.locale-zh.js" type="text/javascript"></script> <script src="jquery.jqGrid.min.js" type="text/javascript"></script> Step 3:HTML grid 程式碼 <table id="list"></table> <div id="list_pager"></div> Step 4:java script 程式碼 伺服器端經由getdata.php產生XML 內容交給jqGrid 顯示 $("#list").jqGrid({ url:'getdata.php?act=initial', datatype: 'xml', mtype: 'GET', Step 5:java script 程式碼 建立欄位名稱及屬性 colNames:['ID Number','Last Sales','Name', 'Stock', 'Ship via','Notes'], colModel:[ {name:'id',index:'id', width:90, sorttype:"int", editable: true, xmlmap: "id" }, {name:'sdate',index:'sdate',width:90, editable:true, sorttype:"date", xmlmap: "sdate" }, {name:'name',index:'name', width:150,editable: true, editoptions:{size:"20",maxlength:"30"}, xmlmap: "name" }, {name:'stock',index:'stock',width:60,editable:true,edittype:"checkbox",editoptions:{value:"Yes:No"}, xmlmap: "stock" }, {name:'ship',index:'ship',width:90,editable:true,edittype:"select",editoptions:{value:"FE:FedEx;IN:InTime;TN:TNT;AR:ARAMEX"}, xmlmap: "ship" }, {name:'note',index:'note',width:200,sortable:false,editable:true,edittype:"textarea",editoptions:{rows:"2",cols:"10"}, xmlmap: "note"}], Step 6:java script 程式碼 建立grid屬性,editurl 是指資料新增、編輯及刪除時的伺服器端程式 pager: '#list_pager', autowidth:true, height:'100%', rownumbers: true, rownumWidth:30, toolbar: [true, "top"], toppager: true, pgbuttons: true, pginput: true, rowNum: 15, rowList: [10, 15, 20, 25, 30, 50, 100], rowNum:15, viewrecords: true, loadonce:true, gridview: true, editurl : 'setdata.php?q=dummy', caption: '導覽員列表' Step 7:java script 程式碼 事件處理函示 loadComplete: function () { }, gridComplete: function () { }, onSelectRow:function (id) { } }) Step 8:java script 程式碼 建立Navigator pager $("#list").jqGrid('navGrid','#list_pager',{ cloneToTop: true, edit:false, add:true, del:false, view:true, addtext: "新增資料", addtitle: "新增資料",viewtext: "檢視資料", viewtitle: "檢視資料",searchtext: "搜尋...", searchtitle: "搜尋...", refreshtext: "更新", refreshtitle: "更新"}, {}, /*default settings for edit*/ { url:'setdata.php?act=add', closeAfterAdd:true, closeOnEscape:true, afterComplete: function (response, postdata, formid) { if ($("#list").getGridParam("datatype") === "local") { $("#list").setGridParam({ datatype: 'xml' }); } $("#list").trigger("reloadGrid");}, beforeShowForm: function (form) { } }, /*default settings for add*/ {}, /*default settings for delete*/ {multipleSearch:true,closeOnEscape:true,closeAfterSearch:true,multipleGroup:true, showQuery: true}, /*default settings for search*/ { closeOnEscape:true, viewPagerButtons:false, beforeShowForm: function (form) { $('#viewmodlist').css('width', '450px');} } /*default settings for view*/ ); 參考資料: |