jqGrid動態加載列及數據

后台組裝colNames以及colModel:

樓主這里是兩個固定列+（開始日期—結束日期）之間的時間列

ps:begin為開始日期，End為結束日期

public class DataGridSale
{
public string HeaderName { get; set; }//列標題
public string BindingValue { get; set; }//數據對應列
}

List<DataGridSale> dataGridSaleList = new List<DataGridSale>();
dataGridSaleList.Add(new DataGridSale{HeaderName = "名稱",BindingValue = "ShopName"});

dataGridSaleList.Add(new DataGridSale{HeaderName = "總計",BindingValue = "RealSumCurr"});

for (DateTime i = begin; i <= End; i = i.AddDays(1))

{
var j = i.Day;
DataGridSale grid = new DataGridSale(){

HeaderName = i.ToString("M-d"),//label
BindingValue = "DAY" + i.ToString("MMdd")//name
};
dataGridSaleList.Add(grid);
}

 string[] colNames = new string[dataGridSaleList.Count+1]; 

 Object[] colModel = new Object[dataGridSaleList.Count+1];

//因為前端需要用到ID，所以添加在最后，並隱藏，不需要的可以刪除+1，以及下面兩句賦值代碼

colNames[dataGridSaleList.Count] = "ID";//設置最后一列為ID

colModel[dataGridSaleList.Count] = new { name = "ID", hidden = true, key = true, width = 100, sortable = false };//設置最后一列為主鍵

//組裝colNames和colModel

int c = 0;
foreach (var GridSale in dataGridSaleList)
{
colNames[c] = GridSale.HeaderName;
var colm = new{name = GridSale.BindingValue,width = 100,align = "left",frozen=false,//設置不凍結列 sortable = false//設置不排序};

if (c < 2)

colm = new{name = GridSale.BindingValue,width = 100,align = "left",frozen=true,//設置凍結前兩列 sortable=false//設置列不排序};

colModel[c] = colm;
c++;
}

//組裝數據

var data = GetShopDaySaleByDate(begin,End); //獲取數據 ps：數據格式Dictionary<key, value>
//然后新建一個實體（DayEntity）裝載上面組裝的數據

DayEntity de = new DayEntity();

de.colNs = colNames;
de.colMS = colModel;
de.colModelList = data;

//////////////////////////////至此后台已組裝完成，傳遞至前端解析

獲取后台傳遞的數據

$(function () {
   GetDynamicCols(1);
})

index：判斷是加載界面還是清除界面，因為每次重新加載界面必須先清除界面，1.加載，2清除

function GetDynamicCols(index) {

$.ajax({

type: "Get",
async: false,
url: "請求數據的地址“,
success: function (datajson) {
if (index == 1) {
var data = jQuery.parseJSON(datajson);
//數據頁
var colModelList = eval(data.colModelList)
var colNs = eval(data.colNs);
var colMS = eval(data.colMS);
gridList(colNs, colMS, colModelList);

} else {
jQuery("#gridList").gridUnload("gridList");
jQuery("#gridList").jqGrid('clearGridData');
GetDynamicCols(1);
}

}
});

}

//顯示界面

function gridList(colNs, colMS, colModelList) {

var $gridList = $("#gridList");
$gridList.dataGrid({
       height: $(window).height() - $(window).height() / 1.5,
       colNames: colNs,//列名稱
       colModel: colMS,//列屬性
       viewrecords: true,//顯示記錄數
       rowNum: -1,設置返回記錄count為可顯示行數
       beforeSelectRow: function (ID) {//行點擊事件（點擊之前，onSelectRow點擊之時）
       var shopid = $("#gridList").jqGrid("getRowData", ID).shopid;
      GetShopTurnoverChart(shopid);
       },

});
jQuery("#gridList").jqGrid('setFrozenColumns');//凍結列
for (var i = 0; i <= colModelList.length; i++) {
jQuery("#gridList").jqGrid('addRowData', i + 1, colModelList[i]);//加載數據
}

$("#btn_search").click(function () {
    GetDynamicCols(2);//查詢按鈕，查詢的時候先清除界面
});
}

好了，至此動態加載jqGrid完成