EasyUI_datagrid实现动态加载列并为其绑定数据

   引言

   最近项目中遇到了这么一个需求，在datagrid中显示的数据需要动态的加载，也就是说表格中显示的列是不固

定的，显示的列的名称和列的数量都是不固定的，这些数据都是需要我们从后台拿来数据然后在动态的绑定到表格

中。这种需求就需要我们将datagrid做活，下面就给大家分享一下我的想法。

  之前我们的viewmodel都是和我们的数据库中的表差不多，也是这个元婴导致我在前期思考这个需求的时候花费了

一定的时间，后来查询了一些资料改变了这种想法，我将datagrid的属性封装了一个viewmodel；

  

namespace LFBidSystem.ViewModel{    [DataContract]    public class TableHeaderViewModel    {        /*表头描述            * 1.FieldValue:键值            * 2.FieldText:显示名称            * 3.Hidden：是否隐藏            * 4.Editor：启用编辑        */        [DataMember]        public string FieldValue;        [DataMember]        public string FieldText;        [DataMember]        public bool Hidden;        [DataMember]        public string Editor;    }}

   动态加载表头信息：

<pre name="code" class="csharp">public ActionResult ShowBidProperties()        {            //定义一个变量来接收js传递的标号            string bidProjectId;            //表头实体集合            List<TableHeaderViewModel> listHeaderVM = new List<TableHeaderViewModel>();            //隐藏的表头列“评分项得分编号”            TableHeaderViewModel judgeHeader1Hide = new TableHeaderViewModel            {                FieldValue = "BidUserId",                FieldText = "投标商Id",                Hidden = true            };            listHeaderVM.Add(judgeHeader1Hide);            //隐藏的表头列“评分项得分编号”            //TableHeaderViewModel judgeHeader2Hide = new TableHeaderViewModel            //{            //    FieldValue = "ItemScoreId",            //    FieldText = "专家评分Id",            //    Hidden = true            //};            //listHeaderVM.Add(judgeHeader2Hide);            //第一列“公司名称”            TableHeaderViewModel judgeHeaderFirst = new TableHeaderViewModel            {                FieldValue = "BidUserName",                FieldText = "招标商",                Hidden = false            };            listHeaderVM.Add(judgeHeaderFirst);            //第一列“公司名称”            TableHeaderViewModel judgeHeaderSecond = new TableHeaderViewModel            {                FieldValue = "QutoScore",                FieldText = "报价得分",                Hidden = false            };            listHeaderVM.Add(judgeHeaderSecond);            //第二列及倒数第二列之前，各评分项遍历            //获取页面上的招标编号,并转化成Guid格式的数据类型            //string bidRecordId = Request.Params["BidRecordId"];            bidProjectId = Request.Params["BidProjectId"];            //Guid recordId = new Guid(bidRecordId);            //根据招标编号，获取所对应的所有评分项信息，评分名称作为表头            List<BidJudgeViewModel> listBidJudge = iBidJudgeService.GetBidJudge(bidProjectId);            //去除报价得分选项            for (int i = 0; i < listBidJudge.Count; i++)            {                if (listBidJudge[i].JudgeItemName == "报价得分")                {                    listBidJudge.Remove(listBidJudge[i]);                }            }            foreach (var item in listBidJudge)            {                TableHeaderViewModel JudgeHeader = new TableHeaderViewModel();                JudgeHeader.FieldValue = item.JudgeId.ToString();                JudgeHeader.FieldText = item.JudgeItemName;                JudgeHeader.Hidden = false;                JudgeHeader.Editor = "text";                listHeaderVM.Add(JudgeHeader);            }            //最后一列“总分”            TableHeaderViewModel judgeHeaderLast = new TableHeaderViewModel            {                FieldValue = "Score",                FieldText = "总分",                Editor = "text",                Hidden = false            };            listHeaderVM.Add(judgeHeaderLast);            //将封装的表头信息返回给前台            return Json(listHeaderVM, JsonRequestBehavior.AllowGet);        }

   js中将表头信息绑定到datagrid中：

//加载表头数据function load_data() {////本地数据    var bidProjectId = document.getElementById('BidProjectId').value;    $.post('/BiddingResult/ShowBidProperties?BidProjectId=' + bidProjectId, function (jsonObj) {        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);            }            //重新加载表格            $('#dg').datagrid({                height: 500,                singleSelect: true,                url: '',                //editor: 'text',                 fit: true,                singleSelect: true,                toolbar: '#tb',                method: 'get',                columns: [columnsAll],                //onClickRow: onClickRow, //单击事件                            }).datagrid('loadData', { total: 0, rows: [] });            //('reload');        }        else {            $.messager.alert('提示信息', '没有可用数据，请联系管理员！', 'warning');        }    }, 'JSON');}

   我们在controller中返回多个list，实现数据的对应：

 

var data = new            {                CompanyName = companyNameList,     //投标商的数量                ScoreAvg = finalScoreAll,    //每一个专家对某个投标商的评分                BidJudgeInfo = listBidJudge,                QutoScore = qutoScore            };

   动态给datagrid绑定数据

 

$.ajax({            url: '/BiddingResult/QueryAllResult',            data: { "BidProjectId": bidProjectId },            success: function (data) {                var array = new Array();                for (var i = 0; i < data.CompanyName.length; i++) {                    //赋值投标商信息                    var obj = new Object();                    obj.BidUserName = data.CompanyName[i];                    //赋值报价得分                    obj.QutoScore = data.QutoScore[i].toFixed(2);                    var scoreAll = 0;                    for (var j = 0; j < data.BidJudgeInfo.length; j++) {                        //循环将各个评分项赋值到各个列中                        obj[data.BidJudgeInfo[j].JudgeId.toLowerCase()] = data.ScoreAvg[i][j].toFixed(2);                        //循环计算各个评分项的和                        scoreAll = Number(scoreAll.toFixed(2)) + Number(data.ScoreAvg[i][j].toFixed(2));                    }                    obj.Score = (Number(data.QutoScore[i]) + Number(scoreAll)).toFixed(2);                    array.push(obj);                }                $('#dg').datagrid('loadData', array);           //确定中标者是谁                var Rows = $("#dg").datagrid("getRows");                var max = Rows[0];                for (var i = 1; i < Rows.length; i++) {                    //alert(data.length)                    if (max.Score < Rows[i].Score) {                        max = Rows[i];                    }                }                //alert(max.CompanyName)                document.getElementById("win").value = max.BidUserName            }        })

   小结

   当我们在实现某些功能受阻的时候，我们需要改变一种想法或者换一种思路来解决，这样我们就可能会有意想

不到的收获，不能被原有的思想束缚，其实我们jQuery已经给我们封装了很多很好的东西，只是我们不会用而已，也

就是说我们对这个东西不是很熟悉，当我们知道的东西越多的时候实现需求的思路就越多。加油吧！！！