1. 程式人生 > >關於jqGrid框架的 資料表格的展示

關於jqGrid框架的 資料表格的展示

總結下工作專案中遇到的問題,解決。

問題: jgrid 載入 本地資料(不是資料庫傳查詢過來的資料),本地資料資訊之類的,展示到前臺。

 解決

    自定義列名,然後 根據jqgrid 的$("#transferList").jqGrid("addRowData", 1+i, dataResult1, "last");方法,對資料表格的更新

這裡只附上了 前臺JavaScript 的程式碼。

    	var dataResult1 = {};		
                jQuery("#transferList").jqGrid('setGridParam', {}).clearGridData();//清空資料
    			 $.post(g_baseURL + '/sx/*****/***List',{ checkItems:$("#checkItems").val(),showInfo:$("#showInfo").val()}, function(data) {
    					 for(var i=0;i<data.length;i++){
    							var result=data[i]
    							dataResult1.address = result.address;
    							dataResult1.repository = result .repository;
    							$("#transferList").jqGrid("addRowData", 1+i, dataResult1, "last");// 更新資料
    						}
    				 
    			 })

接下來看看資料表格的展示設定

var validationListGird = $("#transferList").jqGrid({
        	 caption :'<div style=" width:100%;">'+
             '<input class="gridExport goSearch" type="button" value="按鈕" style=" margin-right:5px;float:left;"/></div>',
            datatype: "local",
            mtype: 'post',
            height: '100%',
            width:'100%',
           colNames:['ID','地區','倉庫名稱'], 
           prmNames: {page:"pageNo",rows:"pageSize", sort: "orderBy",order: "order", search:"search", nd:"nd"},
            colModel:[  
                {name:'id',index:'id', width:100, key: true, hidden: true},
                {name:'address',index:'address', width:130, align:"center" },
                {name:'repository',index:'repository', width:120, align:"center" }
            ],
            sortorder: "desc",
            rownumbers:true,
            viewrecords: true,
            scroll :false,
            pager:$('#transferPaper')
        });

注意到這裡的設定值 datatype:“local”,一般為:“json”, 我們現在這裡載入本地資料,設定此值。

   當用到 $.post()的請求時,就可以獲得從URL獲得 返回回來的資料data,自定義變數名接受data的資料(Java後臺寫的物件資料接收),接下來的資料表格列名與其相同即可。

   初來乍到,不足之處,望大牛指正,發文也是一個積累,記錄的過程,此為初心,共同前行!