datagrid动态加载列（续）

最新推荐文章于 2020-11-24 10:06:36 发布

Grace_sisi

最新推荐文章于 2020-11-24 10:06:36 发布

阅读量3k

点赞数 1

本文链接：https://blog.csdn.net/zhangsify/article/details/51234443

版权

之前有一篇博客写到了如何动态加载datagrid的列，上次只是介绍如何动态动态表头，并没有将数据添加到datagrid中，本次主要来说如何将数据库中的数据，动态添加到每一列中。

先说一下为什么会需要拼接数据，由于我们datagrid中显示的一条数据，可能对应数据库中多条数据，这就需要将多条数据拼接成一条数据，对应显示在表格中。如图所示：

一、通过后台查询查到了多条数据：

     public List<QualitativeLevelViewModel> QueryTargetLevel(string id, int year)
        {
            Guid ID = new Guid(id);

            List<QualitativeLevelViewModel> QualitativeLevel1 = this.CurrentDal.LoadItems(u => u.QualitativeTargetID == ID && u.IsEnable == 1 && u.CheckYear == year).Select(s => new QualitativeLevelViewModel()
            {
                QualitativeLevalName = s.QualitativeLevalName,
                QualitativeLevelID = s.QualitativeLevelID
            }).ToList();
          
            return QualitativeLevel1;
        }

二、Controller中拼接

从后台获得数据后，返回到MVC的Controller中，这是一个对象可以对应多个档次值，需要将多条数据拼接起来，由于表头是灵活加载的，我们需要将表头和每一列的数据动态绑定在一起，接下来就是在controller中拼接表头。

public string LoadInputData()
        {
            //获取定性指标ID
            Guid TargetID = new Guid(Request["TargetID"]);
            string QualitativeTargetID = TargetID.ToString();
            //获取年
            int year = int.Parse(Request["CheckYear"]);
            //获取定性指标名称
            string targetName = Request["TargetName"];

            //实例化一个实体
            DevelopmentQualitativeViewModel enDevelopmentQualitativeVM = new DevelopmentQualitativeViewModel();
            //将年份放到实体中
            enDevelopmentQualitativeVM.CheckYear = year;

            //获得从前台传过来的页数和每页的数量
            int pageSize = Request["rows"] == null ? 10 : int.Parse(Request["rows"]);
            int pageIndex = Request["page"] == null ? 1 : int.Parse(Request["page"]);
            int total = 0;

            //查询已录入的定性指标信息
            List<DevelopmentQualitativeViewModel> InputQualitativeResult = DevelopmentQualitativeResult.QueryYesInputQualitativeResult(year, TargetID);

            #region 调用服务端方法，并拼写datatable动态表头--张思思-2016年4月22日14:19:52
            //调用服务端，查询定性档次表头信息
            List<QualitativeLevelViewModel> listQualitativeLevelVM = SetQualitativeTargetLeval.QueryTargetLevel(QualitativeTargetID, year);

            for (int i = 0; i < InputQualitativeResult.Count; i++)
            {
                InputQualitativeResult[i].QualitativeTargetID = TargetID;
                InputQualitativeResult[i].QualitativeTargetName = targetName;
            }

            //实例化datatable
            DataTable DataDevelopmentQualitiveResult = new DataTable();
            //判断是否获得表头
            if (listQualitativeLevelVM.Count > 0)
            {
                //向datatable中添加表头
                DataDevelopmentQualitiveResult.Columns.Add("DevelopmentObjectID");
                DataDevelopmentQualitiveResult.Columns.Add("DevelopmentName");
                DataDevelopmentQualitiveResult.Columns.Add("QualitativeTargetID");
                DataDevelopmentQualitiveResult.Columns.Add("QualitativeTargetName");
                //循环向datatable中添加动态表头
                for (int i = 0; i < listQualitativeLevelVM.Count; i++)
                {
                    //DataColumn dataName = new DataColumn();
                    string QualitativeLevelID = listQualitativeLevelVM[i].QualitativeLevelID.ToString();
                    DataDevelopmentQualitiveResult.Columns.Add(QualitativeLevelID);
                }
                DataDevelopmentQualitiveResult.Columns.Add("Remark");
            }
            #endregion

            //定义一个临时变量，用来判断是否有重复的行
            string test = "";

            //通过循环获得的list集合并将其数据添加到datatable中
            foreach (var item in InputQualitativeResult)
            {
                //实例化一个datatable行实体
                DataRow row = DataDevelopmentQualitiveResult.NewRow();

                //通过对象id判断是否有重复的行
                if (test != item.DevelopmentObjectID.ToString())
                {
                    //将对象ID交给临时变量text
                    test = item.DevelopmentObjectID.ToString();
                    //将对应的数据添加到datatable实体中
                    row["DevelopmentObjectID"] = item.DevelopmentObjectID;
                    row["DevelopmentName"] = item.DevelopmentName;
                    row["QualitativeTargetID"] = item.QualitativeTargetID;
                    row["QualitativeTargetName"] = item.QualitativeTargetName;
                    row["Remark"] = item.Remarks;
                    row[item.QualitativeLevelID.ToString()] = item.Votes;
                    //将此行添加到table集合中
                    DataDevelopmentQualitiveResult.Rows.Add(row);
                }
                else
                {
                    //通过循环查询到对应的票数添加到datatable中
                    for (int i = 0; i < DataDevelopmentQualitiveResult.Rows.Count; i++)
                    {
                        //定义临时变量用来判断是否更新datatable表
                        string strF = DataDevelopmentQualitiveResult.Rows[i][0].ToString();
                        //判断是否更新datatable表
                        if (strF == item.DevelopmentObjectID.ToString())
                        {
                            //将票数添加到datatable中对应的行
                            DataDevelopmentQualitiveResult.Rows[i][item.QualitativeLevelID.ToString()] = item.Votes;
                        }
                    }
                }
            }

            //将datatable转换成json串
            return Dtb2Json(DataDevelopmentQualitiveResult);

        }

调用一个方法，将datatable转换为json串

      public static string Dtb2Json(DataTable dtb)
        {
            JavaScriptSerializer jss = new JavaScriptSerializer();
            System.Collections.ArrayList dic = new System.Collections.ArrayList();
            foreach (DataRow dr in dtb.Rows)
            {
                System.Collections.Generic.Dictionary<string, object> drow = new System.Collections.Generic.Dictionary<string, object>();
                foreach (DataColumn dc in dtb.Columns)
                {
                    drow.Add(dc.ColumnName, dr[dc.ColumnName]);
                }
                dic.Add(drow);
            }
            //序列化  
            return jss.Serialize(dic);
        }

三、JS调用

   $('#Inputdg').datagrid({
        url: '/DevelopmentQualitative/LoadInputData?CheckYear=' + year + "&TargetID=" + TargetID + "&TargetName=" +   TargetName,
        width: "100%",
        striped: true,//行背景交换
        fitColumns: true,
        idField: 'ID',
        loadMsg: '正在加载用户的信息...',
        pagination: true,
        singleSelect: false,

        pageList: [10, 20, 30, 40, 50],
        pageSize: 10,
        pageNumber: 1,

    }).datagrid("reload");
    $('#Inputdg').datagrid('clearSelections');//清空选中的行

四、显示在界面：

   <div id="haveRecord" title="已录入单位" style="padding: 10px" >
            <div id="toolbar">
                <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-edit" plain="true" οnclick="editData()">修改</a>
                <a href="javascript:void(0)" class="easyui-linkbutton" iconcls="icon-remove" plain="true" οnclick="deleteData()">删除</a>
            </div>
            <table id="Inputdg" class="easyui-datagrid" style="width: 1070px; height: auto"
                data-options="
				iconCls: 'icon-edit',
				singleSelect: false,
				@*url: 'datagrid_data1.json',*@
				method:'get',
				onClickCell: onClickCell
			">
                
            </table>

        </div>

总结：

经过和小马的努力，终于大功告成将数据显示到界面上，面对问题从该开始的无措，对开始各种尝试，一遍遍的去实验，终于成功了。这一阶段的调试，对前台的理解更深刻了，接下来继续奋斗。。。