郑浩 架构师之路

           stay hungry,stay young!

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已经给我们封装了很多很好的东西,只是我们不会用而已,也


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

   


阅读更多

扫码向博主提问

去开通我的Chat快问

u013045437

博客专家

非学,无以致疑;非问,无以广识
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u013045437/article/details/50816179
文章标签: 数据 datagrid
个人分类: @项目学习
上一篇多种方式解决EasyUI—DataGrid中DateTime的格式化问题
下一篇WebAPI学习(一)——创建Web API程序
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭