《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，这样就不会报错了。