【datagrid】动态加载列

简介: 【datagrid】动态加载列

之前我们的项目在前台显示只需要把数据从数据库读出来进行显示就可以,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;


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


结果:


目录
相关文章
|
3月前
|
开发框架 前端开发 JavaScript
在DevExpress的GridView的列中,动态创建列的时候,绑定不同的编辑处理控件
在DevExpress的GridView的列中,动态创建列的时候,绑定不同的编辑处理控件
|
6月前
|
前端开发 C#
浅谈WPF之DataGrid动态生成列
在日常开发中,DataGrid作为二维表格,非常适合数据的展示和统计。通常情况下,一般都有固定的格式和确定的数据列展示,但是在某些特殊情况下,也可能会需要用到动态生成列。本文以一些简单的小例子,简述在WPF开发中,如何动态生成DataGrid的行和列,仅供学习分享使用,如有不足之处,还请指正。
334 2
|
JavaScript
VUE element-ui之table表格勾选复选框动态合计某列的值
VUE element-ui之table表格勾选复选框动态合计某列的值
588 0
VUE element-ui之table表格勾选复选框动态合计某列的值
|
JavaScript
EasyUI的datagrid每行数据添加操作按钮的方法
EasyUI的datagrid每行数据添加操作按钮的方法
234 0
动态合并行和列(element-ui)
动态合并行和列(element-ui)
130 0
|
JavaScript
VUE element-ui 之table表格勾选复选框动态带出(将某列的值赋值给指定列)对应列的数据
VUE element-ui 之table表格勾选复选框动态带出(将某列的值赋值给指定列)对应列的数据
998 0
VUE element-ui 之table表格勾选复选框动态带出(将某列的值赋值给指定列)对应列的数据
|
JavaScript 数据库
EasyUI_datagrid实现动态加载列并为其绑定数据
EasyUI_datagrid实现动态加载列并为其绑定数据
643 0