《EasyUI》——给DataGrid动态绑定表头和数据，实现表头与数据的真正解耦

  这两天在做项目的时候，遇到了这样一个需求：“我需要给EasyUI的datagrid绑定表头，但是表头有多少列并不固定，当然，表头的这些列名也是不固定的，也就是说，表头可以有一列，也可以有许多列，这个datagrid具体有多少列是由用户确定的，我们需要在数据库中将这些字段搜出来，然后将其绑定成表头”。

  当我们把表头绑定好了的时候，我们怎样给对应的表头赋值哪？以前我们在使用DataGrid的时候，我们提前将表头帮定好，将其title设置为将要显示的字段，将其field设定为一个标识。当我们给这个DataGrid传递一个json数据时，DataGrid会根据我们之前设定的field和title自动将json中的数据自动填充进去。

  但是现在，我们不能这样做了，因为表头的field具体绑定哪个标识不固定，所以我们采取这样一个方法，先绑定表头，利用一个方法获取表头中的所有field，我们在根据表头中的field再给其赋值。大体的逻辑思维是这样的。

  1、先对DataGrid创建一个ViewModel，这个ViewModel中封装了一些字段，这些字段都是DataGrid的属性，代码如下所示。

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

  2、JS加载表头方法

<pre name="code" class="javascript">function load_Table() {//加载本地表头
$.ajax({
url: '/DevelopmentQualitative/ShowDataTables',
async: false, // 注意此处需要同步，因为先绑定表头，才能绑定数据
type: "POST",
dataType: "json",
success: function (jsonObj) {
var columnsAll = new Array();
//如果返回的数据不为空,则添加遍历该数据集合
if (jsonObj.length > 0) {
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,
singleSelect: true,
url: '',
fit: true,
singleSelect: true,
method: 'get',
columns: [columnsAll],
//onClickRow: onClickRow, //单击事件
}).datagrid('loadData', { total: 0, rows: [] });
}
}
});
}

  3、后台加载表头方法，被JS加载表头方法调用（返回Json数据）

<span style="color:#000000;">public ActionResult ShowDataTables()
{
//表头实体集合
List<TableHeaderViewModel> listHeaderVM = new List<TableHeaderViewModel>();
//固定表头
TableHeaderViewModel judgeHeader1Hide = new TableHeaderViewModel
{
FieldValue = "DevelopmentName",
FieldText = "开发区名称",
Hidden = false
};
listHeaderVM.Add(judgeHeader1Hide);

string QualitativeTargetID = "14865e20-637f-4d40-8728-0014808aa5a1";
Guid ID = new Guid(QualitativeTargetID);
int year = 2016;

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);
}

return Json(listHeaderVM, JsonRequestBehavior.AllowGet);
}</span>

 
4、JS请求数据方法

<span style="color:#000000;">function LoadData() {  //加载数据的方法，将数据绑定在datagrid中
load_Table();//1、调用加载表头的方法，注意，此方法是同步请求的，目的是加载表头，后加载数据。
var fields = $("#dgno").datagrid('getColumnFields');//获取表头的field，这样能实现给表头动态绑定数据。
$.ajax({
url: '/DevelopmentQualitative/LoadData',//请求后台加载数据的方法
success: function (data) {
var array = new Array();
for (var i = 0; i < data.sum; i++) {
var obj = new Object();
//以下是动态的给表格添加数据
obj.DevelopmentName = data.list[i].DevelopmentName;
obj.QualitativeTargetName = data.list[i].QualitativeTargetName;
for (var j = 2; j < fields.length; j++) {
obj[fields[j]] = data.list[0].Votes;
}
array.push(obj);
}
$('#dgno').datagrid('loadData', array);//加载数据
}
})
}</span>

  5、后天请求数据方法，被JS请求数据方法调用。

public ActionResult LoadData()
{
Guid TargetID = new Guid("14865e20-637f-4d40-8728-0014808aa5a1");
string targetName = "zk测试";
int year = 2016;
//查询未录入的定性指标信息
List<DevelopmentQualitativeViewModel> notQualitativeResult = DevelopmentObeject.QueryNoInputQualitative(year, TargetID);
//循环查询的未录入定指标信息，给定性指标赋名
for (int i = 0; i < notQualitativeResult.Count; i++)
{
notQualitativeResult[i].QualitativeTargetName = targetName;
}
var data = new
{
sum = notQualitativeResult.Count,
list = notQualitativeResult
};
return Json(data, JsonRequestBehavior.AllowGet);
}

  6、小结

  将数据与表头解耦可是真不容易啊，前几天的研究大方向错了，这两天多亏浩哥的帮助，给了我一个月方向。上面的代码有值得注意的地方，在第2步和第4步的时候，我们应该将加载表头的Ajax方法设置成同步的，也就是async: false,默认是异步请求，因为只有当表头加载完了，我们才能根据表头加载数据，小编今天就吃了这个亏了，因为加载表头的Ajax和加载数据 Ajax默认都是异步的，这就有可能造成数据在表头之前加载，这样js是报错的，我们可以将加载表头的Ajax方法设置成同步之后，也就是等待表头加载完成之后，我们在执行加载数据的Ajax，这样就不会报错了。