关闭

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

标签: 数据datagrid
4694人阅读 评论(18) 收藏 举报
分类:


   引言


   最近项目中遇到了这么一个需求,在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已经给我们封装了很多很好的东西,只是我们不会用而已,也


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

   


1
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

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

这两天在做项目的时候,遇到了这样一个需求,我需要给DataGrid绑定表头,但是表头有多少列并不固定,表头的有多少列名也不固定,也就是说,表头可以有一列,也可以有许多列,这个datagrid具体有多少...
  • u013067402
  • u013067402
  • 2016-03-10 00:37
  • 4243

easyUI datagrid ajax实时刷新 动态添加列名

上一篇实现了datagrid加载时列名的动态添加,因项目需求,需要对此页面设置定时器,3秒刷新一次,用datagrid的reload方法刷新时会有闪屏的效果,网上搜的在本页面中添加css样式的方法虽然...
  • sxlxmh1314
  • sxlxmh1314
  • 2015-06-09 19:53
  • 2804

JS EasyUI DataGrid动态加载数据

  • 2016-03-15 16:25
  • 2KB
  • 下载

easyui动态加载表格并绑定数据

在做试卷管理时,选择好学院和课程后,要根据课程的题型数动态加载表格,表格行数=题型数。 1.html 题型 章节 难度等级 操作 ...
  • ggibenben1314
  • ggibenben1314
  • 2015-01-24 11:41
  • 6411

easyui中datagrid动态绑定json加载列的解决方案

在做项目中有这样一个问题:在前台输入sql语句,传入后台后获得数据,将数据绑定在datagrid上显示。 这个问题困扰我很久,因为如果是传入sql语句的话,很难确定是哪个表,也不好确定到底有多少...
  • GGdido
  • GGdido
  • 2016-08-03 20:26
  • 383

EasyUI DataGrid动态加载数据

1:直接通过table标签内嵌<table class="easyui-datagrid" data-options="url:'https://www.driverlive.co.u...
  • dzq_feixiang
  • dzq_feixiang
  • 2016-03-15 16:55
  • 2994

easyui中datagrid动态加载列表

在工作中遇到需求:用户可以根据自身的需求设置列表显示哪些列的信息并且这些列的顺序也是可以改变的。而以往正常的datagrid的列的书写是这样的: columns:[[ {fie...
  • m0_37266740
  • m0_37266740
  • 2017-05-23 17:30
  • 371

Easyui-Datagrid实例-----动态加载数据生成Datagrid

上次说到tree的使用,点击tree节点的时候,新增tabs,今天顺便讲一下生成增加tabs的同时生成Datagrid。首先说一下我的想法,根据API提供的通过iframe加载新的页面或者一个url请...
  • chenqk_123
  • chenqk_123
  • 2017-12-13 17:37
  • 38

jQuery EasyUI-DataGrid动态加载表头

在前面两篇文章中,我们已经介绍了在jQuery EasyUI-DataGrid中有参数和无参数的情况下将数据库中数据显示到前台,但是对于前面两篇文章显示的数据表头是固定的,如果我们显示到前台的数据来自...
  • icanlove
  • icanlove
  • 2014-10-28 12:55
  • 818

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

这两天在做项目的时候,遇到了这样一个需求,我需要给DataGrid绑定表头,但是表头有多少列并不固定,表头的有多少列名也不固定,也就是说,表头可以有一列,也可以有许多列,这个datagrid具体有多少...
  • u013067402
  • u013067402
  • 2016-03-10 00:37
  • 4243
    个人资料
    • 访问:532060次
    • 积分:18180
    • 等级:
    • 排名:第600名
    • 原创:272篇
    • 转载:20篇
    • 译文:0篇
    • 评论:5656条
    和我交谈
    点击这里给我发消息 点击这里给我发消息
    时间你好?
    博客专栏
    最新评论