ASP.NET Aries 入门开发教程6:列表数据表格的格式化处理及行内编辑

简介:

前言:

为了赶进度,周末也写文了!

前几篇讲完查询框和工具栏,这节讲表格数据相关的操作。

先看一下列表:

接下来我们有很多事情可以做。

1:格式化 - 键值的翻译

对于“启用”列,已经配置了格式化 #是否,已经可以看到效果了。

对于分类ID列,通常显示的是分类名称,而不是ID值。

可是分类名称不在文章表里,在文章分类表,怎么关联格式化呢?

我们有文章分类表:

所以我们写个下拉配置:

然后在配置表头里把它配置上:

效果:

PS:通过自定义语句来翻译下拉项的注意事项:

1
2
3
1:翻译项的数量在100以下,至少也是在可以预见的数量级。
 
2:如果无法预知数量级,则应采用自定义视图语句,在数据呈现的时候直接就是名称。

1.1 自定义视图语句:

新建V_xxx.sql文件在SQLCode目录下,文件在可以随意放,但文件名不能出现重复。

sql里事先关联好表,取值出文章分类的名称。

接着:html中的代码:

1
var dg = new AR.DataGrid("V_ArticleList", "Article", "grid");

把objName参数写为文件的名称即可。

2:格式化 - 自定义JS函数

对于格式化,除了配置#XXX来格式化键值对之外,也可以自定义JS。

系统默认写了3个函数用于格式化:

stringFormatter : 长度太长时,显示成...

dateFormatter :显示成日期

boolFormatter :显示成Checkbox

示例:

定义了showAries函数,把它配置表标题列里:

效果:

3:格式化 - 键值对的二次格式化

如果格式化里用了#XXX配置(就没办法自定义写JS),然后希望二次格式化呢?

效果:

4:样式格式化

定义一个样式函数:

把样式函数配置到配置表头:

效果:

样式的格式其实是处理<td style="样式">内容</td>中的样式。

这个函数后期可能会考虑取消,因为同样的效果,格式化的功能也能完成如:

格式化返回:"<div style="width:100%;background-color:#ffee00;color:red;">value</div>"

5:取消宽度自适应

默认,列表的宽度是自适应的,这对于不同的分辨率,可以适合不同的显示器需求。

但有一种情况下,我们希望取消宽度自适应(自适应没有滚动条):当列很多的时候

控制EasyUI的fitColumns即可。

6:行内编辑 - 开启:

如果只是简单的表操作,开启行内编辑是最省事的做法:

效果:

因为配置了格式化,所以被格式化的会变成下拉的效果。

7:行内编辑 - 指定可编编辑的列:

在配置表头的编辑项里勾选即可:

8:行内编辑 - 新增指定默认值

默认点添加按钮时:

比如对分类和标题指定默认值:

PS:为了兼容Oracle(默认列表的列头和数据的字段名是统一转小写处理的)

效果:

9:行内编辑 - 通过某列的值决定其它列的值:

比如当分类的选择的不同,标题的内容为:分类名称+标题。

效果:

10:行内编辑 - 新增跳到自定义页面处理:

这个回到了上一篇:ASP.NET Aries 入门开发教程5:自定义列表页工具栏区 中的“其它1:"项的内容。

11:主从表:

EasyUI支持主从表,给出思路:

效果:

总结:

这节主要讲两个核心:格式化、行内编辑。

下一节介绍列表的主键操作区。


本文原创发表于博客园,作者为路过秋天,原文链接:http://www.cnblogs.com/cyq1162/p/6079338.html

相关文章
|
1月前
|
设计模式 开发框架 JavaScript
基于.NET8 + Vue/UniApp前后端分离的快速开发框架,开箱即用!
基于.NET8 + Vue/UniApp前后端分离的快速开发框架,开箱即用!
|
2月前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
159 3
|
1月前
|
传感器 人工智能 供应链
.NET开发技术在数字化时代的创新作用,从高效的开发环境、强大的性能表现、丰富的库和框架资源等方面揭示了其关键优势。
本文深入探讨了.NET开发技术在数字化时代的创新作用,从高效的开发环境、强大的性能表现、丰富的库和框架资源等方面揭示了其关键优势。通过企业级应用、Web应用及移动应用的创新案例,展示了.NET在各领域的广泛应用和巨大潜力。展望未来,.NET将与新兴技术深度融合,拓展跨平台开发,推动云原生应用发展,持续创新。
32 4
|
1月前
|
机器学习/深度学习 人工智能 物联网
.NET 技术:引领未来开发潮流
.NET 技术以其跨平台兼容性、高效的开发体验、强大的性能表现和安全可靠的架构,成为引领未来开发潮流的重要力量。本文深入探讨了 .NET 的核心优势与特点,及其在企业级应用、移动开发、云计算、人工智能等领域的广泛应用,展示了其卓越的应用价值和未来发展前景。
60 5
|
1月前
|
存储 缓存 NoSQL
2款使用.NET开发的数据库系统
2款使用.NET开发的数据库系统
|
1月前
|
开发框架 JavaScript 前端开发
2024年全面且功能强大的.NET快速开发框架推荐,效率提升利器!
2024年全面且功能强大的.NET快速开发框架推荐,效率提升利器!
|
2月前
|
JSON C# 开发者
C#语言新特性深度剖析:提升你的.NET开发效率
【10月更文挑战第15天】C#语言凭借其强大的功能和易用性深受开发者喜爱。随着.NET平台的演进,C#不断引入新特性,如C# 7.0的模式匹配和C# 8.0的异步流,显著提升了开发效率和代码可维护性。本文将深入探讨这些新特性,助力开发者在.NET开发中更高效地利用它们。
42 1
|
2月前
|
开发框架 NoSQL MongoDB
C#/.NET/.NET Core开发实战教程集合
C#/.NET/.NET Core开发实战教程集合
|
3月前
|
存储 开发工具 Android开发
使用.NET MAUI开发第一个安卓APP
【9月更文挑战第24天】使用.NET MAUI开发首个安卓APP需完成以下步骤:首先,安装Visual Studio 2022并勾选“.NET Multi-platform App UI development”工作负载;接着,安装Android SDK。然后,创建新项目时选择“.NET Multi-platform App (MAUI)”模板,并仅针对Android平台进行配置。了解项目结构,包括`.csproj`配置文件、`Properties`配置文件夹、平台特定代码及共享代码等。
271 2
|
3月前
|
开发框架 .NET C#
VSCode开发.net项目时调试无效
【9月更文挑战第22天】在使用 VSCode 开发 .NET 项目时遇到调试问题,可从项目配置、调试配置、调试器安装、运行环境、日志和错误信息等方面排查。确认项目类型及文件配置,检查 `launch.json` 文件及配置项,确保调试器扩展已安装并启用,验证 .NET 运行时版本和环境变量,查看 VSCode 输出窗口和项目日志文件,检查权限及代码错误。若问题仍未解决,可查阅官方文档或社区论坛。