[Javascript] jQuery Grid Control - jqGrid 簡介

jqGrid 是目前極受歡迎的jQuery表格套件(Grid Control)，有分為免費版本和付費版本。是個執行於Client端瀏覽器的套件，只要會開發CSS 及jQuery便可上手，後端開發語言無論是PHP、Java Servlets、JSP、或ASP.NET都可以使用這個套件。

相關的特色如下：

• 資料格式：XML、JSON、ARRAY。
• AJAX-enabled。
• 完整的表格功能：包含換頁、欄位排序、grouping、新增、修改及刪除資料等功能。
• 支援CSS：可搭配jQuery UI和CSS，快速設定表格樣式。
• 跨瀏覽器。
• 支援多種資料格式：例如 int、float、string、date。
• 內建編輯功能。
• 內建篩選與搜尋。
• 容易自學：學習門檻主要在jQuery+CSS 的使用。

jqGrid範例畫面

以下簡單做個範例：
HTML

<table id="grid"></table>
​

Javascript
(需要import的js檔：jquery.min.js、jquery.jqGrid.min.js、jquery-ui.css、ui.jqgrid.css)

//Array[JSON] data
var data = [{"id":1, "lastname":"Lin", "number":"02200220", "status":"OPEN"}, 
            {"id":2, "lastname":"Chen", "number":"77733337", "status":"CLOSE"}, 
            {"id":3, "lastname":"Chang", "number":"1574682", "status":"SURE"}];

//defined jqGrid
$("#grid").jqGrid({
    datatype: "local",
    width: 400,
    height: 150,
    colNames: ['No', 'LastName', 'Number', 'Status'],
    colModel: [{
        name: 'id',
        index: 'id',
        width: 60,
        sorttype: "int"},
    {
        name: 'lastname',
        index: 'lastname',
        width: 90,
        sorttype: "string"},
    {
        name: 'number',
        index: 'number',
        width: 80,
        sorttype: "float"},
    {
        name: 'status',
        index: 'status',
        width: 80,
        sorttype: "float"}
    ],
    caption: "jqGrid Example",
    multiselect: true
});

//bind Array[JSON] data
for (var i = 0; i <= data.length; i++) {
    $("#grid").jqGrid('addRowData', i + 1, data[i]);
}

//row加上事件
$("#grid").jqGrid('setGridParam', {onSelectRow: function(rowid,iRow,iCol,e){alert('row clicked');}});
$("#grid").jqGrid('setGridParam', {ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}});
​​

執行結果

更多詳盡的jqGrid參數說明可參考 jqGrid Wiki，以及在 jqGrid Demo網站有更多的範例可參考。


文章參考：台大電子報