[轉貼] JqGrid—功能強大的jQuery Grid Control

 

出處：http://www.cc.ntu.edu.tw/chinese/epaper/0021/20120620_2109.html

作者： 唐瑤瑤 / 臺灣大學計資中心程式設計師

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 的特色有哪些？

  • AJAX-enabled：AJAX應用可以僅向伺服器非同步的發送並取回少量的數據，使得動態網頁頁面的產生可以十分的快速。它使用SOAP或其它一些基於XML的頁面服務介面，並在客戶端採用JavaScript處理來自伺服器的回應。因為在伺服器和瀏覽器之間交換的數據大量減少（大約只有原來的5%），我們就能看到伺服器回應得更快。同時很多的處理工作可以在發出請求的客戶端機器上完成，所以Web伺服器的處理時間也減少了。此外，AJAX所採用的技術皆為internet 標準，程式師不須擔心瀏覽器不相容之問題。有關AJAX 的介紹，請參考w3schools 網站http://www.w3schools.com/ajax/ajax_intro.asp。
  • 完整的表格呈現與運算功能，包含換頁、欄位排序、grouping、新增、修改及刪除資料等功能。如下圖所示

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*/
);
參考資料：

留言

張貼留言

這個網誌中的熱門文章

TeknoParrot 模擬器介紹，俗稱《鸚鵡模擬器》

圖片
此款模擬器都是大型機台上的遊戲 目前所支持模擬的遊戲有下列 Examu eX-Board Global VR PC Based Konami PC Based Namco System ES3 (A/B/X) Namco System N2 Raw Thrills PC Based SEGA Europa-R SEGA Lindbergh Yellow SEGA Lindbergh Red/Red EX SEGA Nu SEGA PC Based SEGA RingEdge SEGA RingEdge 2 SEGA RingWide Taito NESiCAxLive Taito Type X Taito Type X2 Taito Type X3 Taito Type X Zero 此款模擬器,硬體要求比較高,建議至少CPU i5 以上等級,顯卡越高階越順暢 基本設定蠻容易的 首先下載免費版的 TeknoParrot 頭文字 D8 Infinity下載 下載完後請先把 ID8_Update.7z 解壓縮覆蓋至遊戲根目錄， 之後再將 InitialD8_GLW_RE_SBZZ_redumped_.7z 解壓縮覆蓋遊戲根目錄 頭文字 D 把手設定 推薦使用 XBOX 把手 或者 DS4 把手 DS4 把手可以使用 DS4Windows 模擬 XBOX 把手 連接成功後按照下方設定按鈕 灣岸 5（Wangan Midnight 5） 頭文字 D7 AAX
閱讀完整內容

[轉貼] ASP.NET傳遞參數給Crystal Report做Export或Print的動作

圖片
近有網友提到此問題...小弟就做一個demo範例分享給大家呀.. 首先準備一個crystal report檔( CrystalReport.rpt ),內容如下: 在 欄位總管 新增一個參數,如下所示: 接下來就是程式碼 asp.net(C#) ReportView.aspx <%@ Page Language="C#" AutoEventWireup="true" CodeFile="ReportView.aspx.cs" Inherits="ReportView" %> <%@ Register Assembly="CrystalDecisions.Web, Version=10.2.3600.0, Culture=neutral, PublicKeyToken=692fbea5521e1304" Namespace="CrystalDecisions.Web" TagPrefix="CR" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title>ReportView</title> </head> <body> <form id="form1" runat="server"> <div> <asp:TextBox ID="txbLogo" runat="server"></asp:TextBox>
閱讀完整內容

Raspberry Pi 樹莓派 - Raspbian 忘記密碼簡單重設

Raspbain 下載連結 - https://www.raspberrypi.org/downloads/raspbian/ pi的預設密碼是raspberry ，如果忘記密碼的解決方法如下 將記憶卡拔出 ，放到電腦裡，修改第一個分割區裡的cmdline.txt，裡頭只有一行，原本內容應該是這樣 dwc_otg.lpm_enable=0 console=ttyAMA0,115200 kgdboc=ttyAMA0,115200 console=tty1 root=/dev/mmcblk0p2 rootfstype=ext4 elevator=deadline rootwait 在最後面加上 init=/bin/sh 修改完後應該如下 dwc_otg.lpm_enable=0 console=ttyAMA0,115200 kgdboc=ttyAMA0,115200 console=tty1 root=/dev/mmcblk0p2 rootfstype=ext4 elevator=deadline rootwait init=/bin/sh 然後記憶卡放回Pi開機，就會出現「#」提示字元，然後輸入下方指令 切換為Super user #su  重新設定pi user的密碼 #passwd pi 清除緩衝，讓設定儲存生效 #sync 執行開機後的程序 # exec /sbin/init  接著會看到開機訊息，看到login:之後，登入帳號pi 最後記得將之前修改的 /boot/cmdline.txt 還原，將init=/bin/sh 移除。
閱讀完整內容