jqGrid初始化資料簡單封裝
阿新 • • 發佈:2019-02-16
/** * options:建立表格所需要配的引數:<br> * { <br> * sid: service ID (必配)<br> * pagerId: 分頁欄ID (必配,不顯示分頁欄可配為空字串)<br> * colNames: 表格列的列名 (必配)<br> * colModels:表格列的屬性 (必配)<br> * datatype : 伺服器端返回的資料型別,預設為local(不載入),json(初始化就載入資料)(選配)<br> * height : 手動設定表格高度,預設為auto (選配)<br> * rowNum : 設定初始化顯示錶格記錄數,預設顯示10條資料,預設顯示所有資料配為-1(選配)<br> * searchParam:蒐集查詢條件 (選配)<br> * formId : 條件查詢formId (選配)<br> * shrinkToFit: 是否按比例初始化表格寬度(選配,預設按比例初始化,不按比例(即顯示橫向滾動條)配為true)<br> * rownumbers:是否顯示行號 (選配,預設不顯示,顯示配為true)<br> * viewrecords:是否顯示總記錄數 (選配,預設顯示,不顯示配為true)<br> * rowList:是否顯示可選記錄數 (選配,預設為[10,20,50],不顯示配為{},修改可配為 例:[5,10,20])<br> * multiselect:是否支援多選 (選配,預設支援,不支援配為true)<br> * pgbuttons:是否顯示翻頁按鈕 (選配,預設顯示,不顯示配為true)<br> * pginput:是否顯示跳轉頁面的輸入框 (選配,預設顯示,不顯示配為true)<br> * caption:是否顯示錶格標題 (選配,預設不顯示,顯示直接配表格標題字串)<br> * } <br> * callback:beforeRequest()回撥函式 * callback1:loadComplete()回撥函式 */ var isSearch = false; var successMsg; $.fn.initTable = function (options,callback,callback1) { var sid = options.sid; var pagerId = options.pagerId; var colNames = options.colNames; var colModels = options.colModels; var searchParam = options.searchParam; var formId = options.formId; var me = this; var pageIndex = 1; var pageSize = 10; var fullurl = extUtil.getProjectName() + staticParam.action_reqPath_main + "?" + utils.createUUID(); var sJsonData = extUtil.json2Str(utils.createPageGrid(searchParam, pageIndex, pageSize)); var sdata = { _sid: sid, json: sJsonData, uid: sessionStorage.getItem("uid") }; var tableId = $(me).attr("id"); var pager = "#" + pagerId; me.jqGrid({ url: fullurl, mtype : "POST", postData : sdata, datatype: options.datatype ? options.datatype : "local", height: options.height ? options.height : 'auto', colNames: colNames, colModel: colModels, jsonReader : { total: "totalPages", records: "total" }, altRows : true, rowNum: options.rowNum ? options.rowNum : pageSize, pager: pager, //顯示分頁欄 shrinkToFit : options.shrinkToFit ? false : true,//是否按比例初始化列寬度 rownumbers: options.rownumbers ? true : false, //顯示行號 viewrecords : options.viewrecords ? false : true,//是否顯示總記錄數 rowList : options.rowList ? options.rowList : [10,20,50],//是否顯示可選記錄數 multiselect: options.multiselect ? false : true, //是否支援多選 pgbuttons: options.pgbuttons ? false : true, //是否顯示翻頁按鈕 pginput: options.pginput ? false : true, //是否顯示翻頁按鈕 caption: options.caption ? options.caption : "", //是否顯示錶格標題 onPaging : function(pgButton){ if(pgButton == "first_"+pagerId){ pageIndex = 1; } if(pgButton == "last_"+pagerId){ pageIndex = $("#sp_1_"+pagerId).text(); } if(pgButton == "prev_"+pagerId){ pageIndex--; } if(pgButton == "next_"+pagerId){ pageIndex++; } if(pgButton == "user"){ pageIndex = $("#sp_1_"+pagerId).prev().val(); } if(pgButton == "records"){ pageSize = $("#last_"+pagerId).next().find($(".ui-pg-selbox")).val(); pageIndex = 1; } fSearch(pageIndex,pageSize,sid,tableId,formId); }, beforeRequest : function() { //向伺服器端發起請求之前設定分頁按鈕樣式 var table = this; setTimeout(function(){ updatePagerIcons(table); enableTooltips(table); }, 0); if(callback) callback(); }, loadComplete : function(o){ if(o.success == false){ if(o.msg)toastr.warning(o.msg); } if(isSearch){ isSearch = false; if(!o.total || o.total==0){ toastr.info("沒有查詢到資料!"); }else{ toastr.success(successMsg); } } if(callback1) callback1(); } }); $(window).triggerHandler('resize.jqGrid'); }; //查詢方法 function fSearch(pageIndex,pageSize,sid,tableId,formId,msg){ isSearch = true; successMsg = msg?msg:"查詢成功!"; if(pageIndex == null || pageSize == null){ pageIndex = 1; pageSize = $("#"+tableId).getGridParam('rowNum'); } var searchParam = getSearchCondition(formId); var sJsonData = extUtil.json2Str(utils.createPageGrid(searchParam, pageIndex, pageSize)); var sdata = { _sid: sid, json: sJsonData, uid: sessionStorage.getItem("uid") }; $("#"+tableId).jqGrid("setGridParam", { datatype : 'json', postData : sdata, page : pageIndex, }).trigger("reloadGrid"); } //獲取查詢條件 function getSearchCondition(formId){ var searchCondition = extUtil.serializeObject($('#'+formId)); // 迴圈searchCondition,若內key值為“”則置為null for (var i in searchCondition) { if (searchCondition[i] == "") { searchCondition[i] = null; } } return searchCondition; } //設定jqgrid的分頁按鈕樣式 function updatePagerIcons(table) { var replacement = { 'ui-icon-seek-first' : 'ace-icon fa fa-angle-double-left bigger-140', 'ui-icon-seek-prev' : 'ace-icon fa fa-angle-left bigger-140', 'ui-icon-seek-next' : 'ace-icon fa fa-angle-right bigger-140', 'ui-icon-seek-end' : 'ace-icon fa fa-angle-double-right bigger-140' }; $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){ var icon = $(this); var $class = $.trim(icon.attr('class').replace('ui-icon', '')); if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]); }); } function enableTooltips(table) { $('.navtable .ui-pg-button').tooltip({container:'body'}); $(table).find('.ui-pg-div').tooltip({container:'body'}); }