1. 程式人生 > >jqGrid初始化資料簡單封裝

jqGrid初始化資料簡單封裝

/**
 * 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'});
}