【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;


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


结果:


相关文章
|
Web App开发 存储 缓存
Web页面优化专项>Lighthouse>性能分数优化
Web页面优化专项>Lighthouse>性能分数优化
1319 0
Web页面优化专项>Lighthouse>性能分数优化
|
4月前
|
人工智能 Linux API
阿里云/本地部署OpenClaw+自我迭代体系+百炼大模型配置实战,让AI助手告别重复犯错
很多人使用AI助手时都会遇到这样的困境:反复强调不要精简内容,AI依然自作主张压缩信息;同样的格式错误纠正多次仍会出现;长任务中断后进度完全丢失,只能从头再来。单纯的口头提醒毫无作用,核心问题在于AI缺少一套标准化、可落地的自我纠错机制。OpenClaw作为轻量化、可高度定制的AI Agent框架,通过构建完整的自我迭代流程,让AI从被动执行转向主动反思,真正实现持续进化。本文将完整拆解OpenClaw五步自我迭代法,同时提供2026年阿里云部署、本地MacOS/Linux/Windows11部署流程,以及阿里云千问大模型API、免费Coding Plan API配置方案与常见问题解答,帮助大
810 0
|
3月前
|
存储 JSON 算法
京东商品 SKU 信息接口技术干货:数据拉取、规格解析与字段治理(附踩坑总结 + 可运行代码
本文详解京东SKU接口对接核心技术:涵盖高精度参数校验(如SKU ID纯数字、时间戳格式)、权限申请要点(认证材料、用途合规说明)、MD5签名生成(空值过滤、ASCII排序)、规格编码解析与区域库存处理,并总结7类高频坑及解决方案,附可直接运行的Python客户端代码。
|
3月前
|
人工智能 运维 Apache
Flink Agents 0.3 Roadmap解读
Apache Flink Agents 是 Apache Flink 新晋子项目,专注构建事件驱动的流式 AI Agent。0.3 版本 roadmap 已公布:支持 Agent Skills 集成、Mem0 长期记忆、跨语言 Action/Events、Python 3.12、日志分级与可观测性增强等,目标打造生产级流式 Agent 框架。
613 2
|
6月前
|
编解码 并行计算 物联网
【实战教程】Flux.1-dev 360° 全景驾驶舱:从零到一的“零坑”部署指南
本教程教你如何在24G显存单卡环境下部署超大文生图模型Flux.1-dev。通过ModelScope极速下载、Hugging Face身份鉴权与显存顺序卸载技术,解决下载慢、授权难、显存溢出等问题,实现稳定推理。
996 1
|
6月前
|
存储 缓存 弹性计算
阿里云ECS内存型r7实例(ecs.r7.xlarge)4核32G云服务器优惠活动配置价格及性能测评
阿里云ECS内存型r7实例(规格ecs.r7.xlarge)是专为企业级内存密集型场景设计的主力机型,核心配置为4核32G CPU内存(1:8黄金配比)、1M-5M可灵活选择的带宽以及40GB ESSD云盘。该实例依托第三代神龙架构和Intel Ice Lake处理器,在内存性能、存储I/O效率与网络稳定性上做了针对性优化,特别适合需要大内存支撑的高性能数据库、缓存服务和数据分析等业务。本文从配置细节、性能优势、适用场景等维度展开解析,帮大家直观理解这款实例的核心价值和使用要点。
|
机器学习/深度学习 存储
RT-DETR改进策略【模型轻量化】| PP-LCNet:轻量级的CPU卷积神经网络
RT-DETR改进策略【模型轻量化】| PP-LCNet:轻量级的CPU卷积神经网络
628 0
RT-DETR改进策略【模型轻量化】| PP-LCNet:轻量级的CPU卷积神经网络
|
大数据 C# 数据库
WPF DataGrid 性能加载大数据
原文:WPF DataGrid 性能加载大数据 版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010265681/article/details/76651725  WPF(Windows Presentation Foundation)应用程序在没有图形加速设备的机器上运行速度很慢是个公开的秘密,给用户的感觉是它太吃资源了,WPF程序的性能和硬件确实有很大的关系,越高档的机器性能越有优势。
2484 0
|
JavaScript 算法
【Vue面试题十七】、你知道vue中key的原理吗?说说你对它的理解
这篇文章深入探讨了Vue中`key`的原理及其作用,解释了`key`是为每个虚拟DOM节点提供的唯一标识符,作为`diff`算法的优化策略,有助于更快速准确地识别和重用DOM元素。文章通过实际代码示例展示了使用`key`与否在列表渲染时对DOM操作的影响,分析了`key`在不同场景下的性能表现,并提供了源码层面的分析,解释了Vue如何通过`key`来识别和更新虚拟DOM节点。
【Vue面试题十七】、你知道vue中key的原理吗?说说你对它的理解