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

时间:2021-12-10 09:23:36

  这两天在做项目的时候,遇到了这样一个需求:“我需要给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,这样就不会报错了。