jqgrid 加载mysql数据_jqGrid动态加载列及数据

后台组装colNames以及colModel:

楼主这里是两个固定列+(开始日期—结束日期)之间的时间列

ps:begin为开始日期，End为结束日期

public class DataGridSale

{

public string HeaderName { get; set; }//列标题

public string BindingValue { get; set; }//数据对应列

}

List dataGridSaleList = new List();

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

//然后新建一个实体(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完成