【datagrid】动态加载列 2016-01-03 16:32 2013人阅读 评论(19) 收藏

之前我们的项目在前台显示只需要把数据从数据库读出来进行显示就可以，datagrid的表头字段都是写死的，把数据往表里一扔，就基本没什么事儿了，结果客户前几天要求，其中一个字段不能是死的，应该是有多少项显示多少项，比如说，原来只需要显示：其他项总分，现在需要显示的则是：xx加分，xx加分，xx减分，xx加分。。。。字段不固定，有多少项也不确定，需要从数据库中查到相应的字段来进行显示。

不能要求客户来适应咱们的系统啊，而应该全心全意为客户着想，所以，开始改。原来的情况是，所有的字段都是固定的，而且要显示的字段是跟数据库中某张表对应的，只需要查出来就可以。现在的情况是，其中一部分字段是固定的，另一部分字段是不固定的，然后固定字段的数据是从原来的表中查出来的，不固定字段的数据是从另外一张表查出来的。

经过一下午和一晚上的努力，终于初步完成了显示效果，但是还有缺点就是没办法做到分页显示，现在的效果还需要进一步优化，先把当前完成的部分记录一下。

代码如下：

view端：

//datagrid动态加载列
        function getjson()
            {
            $.getJSON('/QueryScores/QueryOtherAssess', null, function (otherscores) {
                var columns = new Array();
                var column2 = {
                    field: '教工号', title: '教工号', width: 50
                }
                columns.push(column2);
                var column3 = { field: '教职工姓名', title: '教职工姓名' }
                columns.push(column3);
                var column4 = { field: '工作效率', title: '工作效率', width: 50 }
                columns.push(column4);
                var column5 = { field: '职业道德', title: '职业道德', width: 50 }
                columns.push(column5);
                var column6 = { field: '业务能力', title: '业务能力', width: 50 }
                columns.push(column6);
                var column7 = { field: '廉洁自律', title: '廉洁自律', width: 50 }
                columns.push(column7);
                var column8 = { field: '工作成绩', title: '工作成绩', width: 50 }
                columns.push(column8);
                //导入其他分值的循环
                for (var i = 0; i < otherscores.sum; i++) {
                    var column1={
                        field:otherscores.OtherScoresAssess[i],title:otherscores.OtherScoresAssess[i],width:70
                    }
                    columns.push(column1);
                }
                var column9 = { field: '总分', title: '总分', width: 50 }
                columns.push(column9);
                initTable(columns);
            })
        }

        function initTable(columns) {
            $('#tt').datagrid({
                title: '查看成绩',
                url: '/QueryScores/QueryScoresIndex',
                width: '100%',
                rownumbers: true,
                columns: [
                    columns
                ]
            });
        }

view端调了controller端两个方法，QueryOtherAssess是为了读取到需要动态加载的列的表头字段。QueryScoresIndex是将数据查到返回的方法。

QueryOtherAssess:

public ActionResult QueryOtherAssess()
        {
            IList<string> OtherScoresAssess = OtherScoresAsscssProgramBLL.LoadEnities(u => u.IsUsed == true).Select(u => u.AsscssProgram).ToArray();

            var OtherScoresAssessList = new
            {
                sum = OtherScoresAssess.Count(),
                OtherScoresAssess = OtherScoresAssess
            };

            return Json(OtherScoresAssessList, JsonRequestBehavior.AllowGet);

        }

QueryScoresIndex首先将数据查出来，然后转成json字符串返回前台。

具体查数据就不贴了，看一下赋值的段落：

 //表头
            DataTable FinalTable = new DataTable();
            FinalTable.Columns.Add("教工号", typeof(int));
            FinalTable.Columns.Add("教职工姓名", typeof(string));
            FinalTable.Columns.Add("工作效率", typeof(string));
            FinalTable.Columns.Add("职业道德", typeof(string));
            FinalTable.Columns.Add("业务能力", typeof(string));
            FinalTable.Columns.Add("廉洁自律", typeof(string));
            FinalTable.Columns.Add("工作成绩", typeof(string));
            for (int i = 0; i < YzOtherProgramEntity.Count; i++)
            {
                FinalTable.Columns.Add(YzOtherProgramEntity[i].AsscssProgram, typeof(string));
            }
            FinalTable.Columns.Add("总分", typeof(string));

然后是赋值：

 DataRow FileRow = FinalTable.NewRow();
                    FileRow["教工号"] = scoresstaffid;
                    FileRow["教职工姓名"] = staffname;
                    FileRow["工作效率"] = staffscoresEntity[i].WorkEfficiency;
                    FileRow["职业道德"] = staffscoresEntity[i].ProfessionalEthics;
                    FileRow["业务能力"] = staffscoresEntity[i].BusinessAbility;
                    FileRow["廉洁自律"] = staffscoresEntity[i].HonestyDiscipline;
                    FileRow["工作成绩"] = staffscoresEntity[i].WorkPerformance;

                    if (YzOtherProgramEntity != null)
                    {
                        for (int j = 0; j < YzOtherProgramEntity.Count; j++)
                        {
                            Decimal othertotalscores = 0;
                            Guid otherprogramEntityID = YzOtherProgramEntity[j].ID;
                            IList<YzOtherScoresEntity> YzOtherScoresEntity = OtherScoresBLL.LoadEnities(u => u.CriticID == staffguid && u.Program == otherprogramEntityID && u.IsUsed == true).ToArray();

                            for (int k = 0; k < YzOtherScoresEntity.Count; k++)
                            {
                                othertotalscores = othertotalscores + YzOtherScoresEntity[k].Number;
                            }

                            FileRow[YzOtherProgramEntity[j].AsscssProgram] = othertotalscores;

                        }

                        FileRow["总分"] = staffscoresEntity[i].TotalScores;
                        FinalTable.Rows.Add(FileRow);

最后转json字符串：

char[] specialChars = new char[] { ',' };
            string JSONstring = "[";

            int index = 0;
            foreach (DataRow dr in FinalTable.Rows)
            {
                JSONstring += "{";

                foreach (DataColumn dc in FinalTable.Columns)
                {
                    JSONstring += "\"" + dc.ColumnName + "\":\"" + dr[dc].ToString() + "\",";
                }
                JSONstring = JSONstring.TrimEnd(specialChars);
                JSONstring += "},";

                index++;
            }
            JSONstring = JSONstring.TrimEnd(specialChars);
            JSONstring += "]";
            return JSONstring;

然后前台进行接收，最后就可以做到动态加载列啦

结果：