jqGrid

出自 ProgWiki
於 2013年10月11日 (五) 22:00 由 Player (對話 | 貢獻) 所做的修訂 (通過HotCat移除分類「JQuery」及快速增加分類「jQuery Plugin」)

(差異) ←上個修訂 | 最新修訂 (差異) | 下個修訂→ (差異)
前往: 導覽搜尋

jqGrid,一套基於jQuery基礎的Gird

技術文件

FAQ

Server端傳入參數

讀取資料(一般)
  • 在jqGrid的初始定義中, 由 url 參數指定Server端網址
  • 傳入參數 _search (不搜尋=false)
  • 傳入參數 sidx 排序用的資料欄位名稱
  • 傳入參數 sord 排序方向 ("desc","asc")
  • 傳入參數 page 第幾頁
  • 傳入參數 rows 每頁資料筆數
讀取資料(單一搜尋條件模式)
  • 傳入參數 _search (搜尋=true)
  • 傳入參數 sidx 排序用的資料欄位名稱
  • 傳入參數 sord 排序方向 ("desc","asc")
  • 傳入參數 page 第幾頁
  • 傳入參數 rows 每頁資料筆數
  • 傳入參數 searchField 搜尋的攔位名稱
  • 傳入參數 searchString 搜尋內容
  • 傳入參數 searchOper 搜尋條件
條件 反向條件
等於="eq" 不等於="ne"
小於="lt" 小於等於="le"
大於="gt" 大於等於="ge"
開始於="bw" 不開始於="bn"
在其中="in" 不在其中="ni"
結束於="ew" 不結束於="en"
包含="ce" 不包含="nc"
讀取資料(多重搜尋條件模式)
  • 傳入參數 _search (搜尋=true)
  • 傳入參數 sidx 排序用的資料欄位名稱
  • 傳入參數 sord 排序方向 ("desc","asc")
  • 傳入參數 page 第幾頁
  • 傳入參數 rows 每頁資料筆數
  • 傳入參數 filters 篩選條件(json格式), 例如: {"groupOp":"AND"%2C"rules":[{"field":"CategoryNo"%2C"op":"eq"%2C"data":"1"}]}
  • 傳入參數 searchField (不使用, 為空字串)
  • 傳入參數 searchString (不使用, 為空字串)
  • 傳入參數 searchOper (不使用, 為空字串)
新增/修改/刪除
  • 在jqGrid的初始定義中, 由 editurl 參數指定Server端網址, 預設採POST模式
  • 傳入參數 oper (新增="add", 修改="edit", 刪除="del")
  • 傳入參數 id (修改或刪除時, 表單模式新增時="_empty", inline模式新增時="jqg1")
  • 傳入參數 (新增或修改時,資料欄位)

欄位定義

  • 宣告為ID用的欄位 key: true
  • 欄位寬度 width: 55
  • 對齊 align: "right"
  • 可編輯 editable: true
  • 可隱藏 hidden: true
  • 可搜尋 search: true
  • 可排序 sortable: true
  • 編輯時必填 editrules: { required: true }
  • 參照:wiki:common_rules - jqGrid Wiki
模式 一般顯示(預設值為'text') 編輯時(預設值為'text') 搜尋時(預設值為'text')
text
textarea edittype: "textarea", editoptions: { rows: "4", cols: "45" }
select formatter: "select", formatoptions: { value: "C:支票;N:本票;E:匯票", defaultValue: "C", disabled: true } edittype: "select", editoptions: { value: "C:支票;N:本票;E:匯票" } stype: "select", searchoptions: { value: "C:支票;N:本票;E:匯票" }
checkbox formatter: "checkbox", formatoptions: { value: "True:False" }, defaultValue: "False", disabled: false } edittype: "checkbox", editoptions: { value: "True:False" } stype: "checkbox", searchoptions: { value: "True:False" }
currency formatter: "currency", formatoptions: { decimalPlaces: 0, defaultValue: "", prefix: , suffix: , thousandsSeparator: ',' }


在資料列使用預設的(編輯、刪除、儲存、取消)的按鈕

  • 參照:
  • 在 colModel 裡用 { name: 'act', index: 'act', width: 60, sortable: false, formatter:'actions'}
  • 同時使用 inline編輯模式,需先 var 定義 2個變數備用
var lastsel;
var lastrow = null;
例如使用在
<table id="list" class="scroll" cellpadding="0" cellspacing="0"></table>
<div id="pager" class="scroll" style="text-align:center;"></div>

jqGrid裡的定義加上

onSelectRow: function (id) {
    if (id && id !== lastsel) {
        if (lastrow != null) {
            jQuery.fn.fmatter.rowactions.call(lastrow.find('.ui-inline-cancel'), 'cancel');
        }
        jQuery.fn.fmatter.rowactions.call($('#list').find('tr:hover').find('.ui-inline-edit'), 'edit');
        lastsel = id;
        lastrow = $('#list').find('tr:hover');
    }
},

以及
                jQuery('#list').jqGrid('navGrid', "#pager",
                    { edit: false, add: false, del: false, search: true, refresh: true },
                    {}, // default settings for edit
                    {}, // default settings for add
                    {}, // default settings for delete
                    { closeOnEscape: true, multipleSearch: true, closeAfterSearch: true }, // search options
                    {}
                );
                jQuery("#list").jqGrid('inlineNav', "#pager",
                    {
                        edit: false, add: true, save: false, cancel: false,
                        addParams: {useFormatter: true}
                    }                        
                );
  • 預設的按鈕圖是採用 jQuery UI的 icon 圖,它顯示的Size是16x16px,如果要放大的話
div.ui-pg-div {
    width: 28px;
    height: 28px;
}
 
span.ui-icon {
    zoom:1.6;
    -moz-transform:scale(1.6);
    -moz-transform-origin: 0 0;
}

jqGrid與Search

jqGrid與Autocomplete

jqGrid與Validation

自訂在inline編輯模式下要回傳給Server儲存的變數

$.jgrid.inlineEdit = $.extend(true, $.jgrid.inlineEdit,{
   extraparam: { 變數名: 變數值 }
});

自訂擴充

$.jgrid.defaults
$.jgrid.defaults = = $.extend($.jgrid.inlineEdit, {
    url: "",
    height: 150,
    page: 1,
    rowNum: 20,
    rowTotal : null,
    records: 0,
    pager: "",
    pgbuttons: true,
    pginput: true,
    colModel: [],
    rowList: [],
    colNames: [],
    sortorder: "asc",
    sortname: "",
    datatype: "xml",
    mtype: "GET",
    altRows: false,
    selarrrow: [],
    savedRow: [],
    shrinkToFit: true,
    xmlReader: {},
    jsonReader: {},
    subGrid: false,
    subGridModel :[],
    reccount: 0,
    lastpage: 0,
    lastsort: 0,
    selrow: null,
    beforeSelectRow: null,
    onSelectRow: null,
    onSortCol: null,
    ondblClickRow: null,
    onRightClickRow: null,
    onPaging: null,
    onSelectAll: null,
    onInitGrid : null,
    loadComplete: null,
    gridComplete: null,
    loadError: null,
    loadBeforeSend: null,
    afterInsertRow: null,
    beforeRequest: null,
    beforeProcessing : null,
    onHeaderClick: null,
    viewrecords: false,
    loadonce: false,
    multiselect: false,
    multikey: false,
    editurl: null,
    search: false,
    caption: "",
    hidegrid: true,
    hiddengrid: false,
    postData: {},
    userData: {},
    treeGrid : false,
    treeGridModel : 'nested',
    treeReader : {},
    treeANode : -1,
    ExpandColumn: null,
    tree_root_level : 0,
    prmNames: {page:"page",rows:"rows", sort: "sidx",order: "sord", search:"_search", nd:"nd", id:"id",oper:"oper",editoper:"edit",addoper:"add",deloper:"del", subgridid:"id", npage: null, totalrows:"totalrows"},
    forceFit : false,
    gridstate : "visible",
    cellEdit: false,
    cellsubmit: "remote",
    nv:0,
    loadui: "enable",
    toolbar: [false,""],
    scroll: false,
    multiboxonly : false,
    deselectAfterSort : true,
    scrollrows : false,
    autowidth: false,
    scrollOffset :18,
    cellLayout: 5,
    subGridWidth: 20,
    multiselectWidth: 20,
    gridview: false,
    rownumWidth: 25,
    rownumbers : false,
    pagerpos: 'center',
    recordpos: 'right',
    footerrow : false,
    userDataOnFooter : false,
    hoverrows : true,
    altclass : 'ui-priority-secondary',
    viewsortcols : [false,'vertical',true],
    resizeclass : '',
    autoencode : false,
    remapColumns : [],
    ajaxGridOptions :{},
    direction : "ltr",
    toppager: false,
    headertitles: false,
    scrollTimeout: 40,
    data : [],
    _index : {},
    grouping : false,
    groupingView : {groupField:[],groupOrder:[], groupText:[],groupColumnShow:[],groupSummary:[], showSummaryOnHide: false, sortitems:[], sortnames:[], summary:[],summaryval:[], plusicon: 'ui-icon-circlesmall-plus', minusicon: 'ui-icon-circlesmall-minus', displayField: []},
    ignoreCase : false,
    cmTemplate : {},
    idPrefix : ""
});
$.jgrid.inlineEdit
$.jgrid.inlineEdit = $.extend($.jgrid.inlineEdit, {
    keys : false,
    oneditfunc: null,
    successfunc: null,
    url: null,
    extraparam: {},
    aftersavefunc: null,
    errorfunc: null,
    afterrestorefunc: null,
    restoreAfterError: true,
    mtype: "POST"
});