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完成