datagrid动态加载列

    最近参加了组织部的项目，由于加载的表头需要从数据库中读取，而且你也不知道有几个，这就用到了动态加载列。经过研究理解，有了一点点成效。。。

    由于本项目中既有固定的列也有动态添加的列，这个思路就是：先将固定的列写下来，从数据库中查询动态添加的列，将这些列表头信息放到一个对象数组中，再循环数组分别为每一列赋值。这是实现的主要思想，接下来就看如何去实现。

    首先先建一个ViewModel，用来表示加载表头的属性：

<span style="font-size:18px;"> public class TableHeaderViewModel
{
[DataMember]
public string FieldValue;//FieldValue:键值
[DataMember]
public string FieldText;//FieldText:显示名称
[DataMember]
public bool Hidden;//是否隐藏
[DataMember]
public string Editor;//启用编辑
//如果我们还想扩展这个这个DataGrid的属性，在此添加相应的属性
//注意一些using引用

}</span>

    采用mvc框架，controller中的代码如下：

public ActionResult ShowDataTables()
{
//表头实体集合
List<TableHeaderViewModel> listHeaderVM = new List<TableHeaderViewModel>();
//固定表头

TableHeaderViewModel judgeHeader1Hide = new TableHeaderViewModel //固定的列
{
FieldValue = "DevelopmentName",
FieldText = "开发区名称",
Hidden = false
};
listHeaderVM.Add(judgeHeader1Hide);

TableHeaderViewModel judgeHeader2Hide = new TableHeaderViewModel //固定的列
{
FieldValue = "QualitativeTargetName",
FieldText = "指标名称",
Hidden = false
};
listHeaderVM.Add(judgeHeader2Hide);

//获取界面数据
string QualitativeTargetID = Request["TargetID"];
int year = int.Parse(Request["year"]);
//从数据库获取要动态加载的表头
List<QualitativeLevelViewModel> unitBasicInfoList = SetQualitativeTargetLeval.QueryTargetLevel(QualitativeTargetID, year);
//动态加载表头
foreach (var item in unitBasicInfoList)
{
TableHeaderViewModel JudgeHeader = new TableHeaderViewModel();
JudgeHeader.FieldValue = item.QualitativeLevelID.ToString();
JudgeHeader.FieldText = item.QualitativeLevalName;
JudgeHeader.Hidden = false;
JudgeHeader.Editor = "text";
listHeaderVM.Add(JudgeHeader);
}
TableHeaderViewModel judgeHeaderHide = new TableHeaderViewModel //固定的列
{
FieldValue = "Remark",
FieldText = "备注",
Hidden = false,
Editor="text"
};
listHeaderVM.Add(judgeHeaderHide);

return Json(listHeaderVM, JsonRequestBehavior.AllowGet);
}

    从controller中传来值之后，接下来就是将传过来的值在js中改变排列方式，显示到界面中。
      function load_Table() {//加载本地表头
var TargetID = $('#target').combobox("getValue");
var year = $('#CheckYear').combobox("getValue");

$.ajax({
url: '/DevelopmentQualitative/ShowDataTables',
async: false, // 注意此处需要同步，因为先绑定表头，才能绑定数据
type: "POST",
data:"year=" + year + "&TargetID=" + TargetID,
dataType: "json",
success: function (jsonObj) {
var columnsAll = new Array();

//如果返回的数据不为空,则添加遍历该数据集合
if (jsonObj.length > 0) {
var col1 = {}
col1['field'] = 'ck';
col1['checkbox'] = true;
columnsAll.push(col1); //添加多选框列
for (var i = 0; i < jsonObj.length; i++) {
var col = {}
//把返回的数据封装到一个对象中
col['title'] = jsonObj[i].FieldText;
col['field'] = jsonObj[i].FieldValue;
col['editor'] = jsonObj[i].Editor; //TODO，启用编辑
col['width'] = 100;
col['align'] = 'center'
col['hidden'] = jsonObj[i].Hidden;

//把这个对象添加到列集合中
columnsAll.push(col);
}
//重新加载表格
$('#dgno').datagrid({
height: 500,
url: '',
fit: true, //自动大小
singleSelect: true, //单行选取
method: 'get',
columns: [columnsAll], //要显示的列
//onClickRow: onClickRow, //单击事件
}).datagrid('loadData', { total: 0, rows: [] });
}
}
});
}
      
    图中是实现的效果

    


     接下来就是要实现动态加载数据，由于一条数据是由数据库中多条记录来拼接实现的，接下来来详细介绍如何将数据动态添加行，让数据能够准确的显示到界面上。。。