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

时间: 2024-08-18 06:55:31

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

ASP.NET Aries 入门开发教程4:查询区的下拉配置

背景: 今天去深圳溜达了一天,刚回来,看到首页都是微软大法好,看来离.NET的春天就差3个月了~~ 回到正题,这篇的教程讲解下拉配置. 查询区的下拉配置: 1:查询框怎么配置成下拉? 在配置表头:格式化配置 #是否 PS:格式化配置除了用来格式化表格的内容,同样也会下拉进行格式化. 效果: 那"#是否"是哪里来的? 在配置维护里来的,对于固定的选项,统一在这里配置: 2:查询框下拉能不能多选? 配置格式规则即可:multiple属性 效果: 3:查询框下拉能不能级联? 配置格式化规则指

ASP.NET Aries 入门开发教程3:开发一个列表页面及操控查询区

前言: Aries框架毕竟是开发框架,所以重点还是要写代码的,这样开发人员才不会失业,哈. 步骤1:新建html 建一个Html,主要有三步: 1 2 3 1:引入Aries.Loader.js 2:弄一个table标签 3:new 一个AR.DataGrid 当然了,虽然才这么点代码,我也是从UserList.html里Copy过来改的. 步骤二:配置菜单权限,并F5运行. 配置菜单权限上一篇有,不重复.(PS:这里复用上一个菜单,直接改菜单路径.) F5运行后的效果是这样的: objName

ASP.NET Aries 入门开发教程2:配置出一个简单的列表页面

前言: 朋友们都期待我稳定地工作,但创业公司若要躺下,也非意念可控. 若人生注定了风雨飘摇,那就雨中前行了. 最机开始看聊新的工作机会,欢迎推荐,创业公司也可! 同时,趁着自由时间,抓紧把这系列教程给写完了. 谢谢大伙的关注和支持. 步骤1:准备好数据库和表(或视图) 由于框架支持跨数据库,所以可以先不用管系统权限的那个数据库,先随意找个数据库. 当然你也可以找个视图(只是视图就不能编辑或删除[权限控制]) 步骤2:配置数据库链接: 以数据库名+Conn 为name(这是跨库的约定,不要乱取).

ASP.NET Aries 入门开发教程8:树型列表及自定义右键菜单

前言: 前面几篇重点都在讲普通列表的相关操作. 本篇主要讲树型列表的操作. 框架在设计时,已经把树型列表和普通列表全面统一了操作,用法几乎是一致的. 下面介绍一些差距化的内容: 1:树型列表绑定: var tg = new AR.DataGrid('Demo_Area', null, "grid", true); tg.options = { idField: "code", treeField: "name", parentField: &qu

ASP.NET Aries 入门开发教程5:自定义列表页工具栏区

前言: 抓紧时间,继续写教程,因为发现用户期待的内容,都在业务处理那一块. 不得不继续勤劳了. 这节主要介绍工具栏区的玩法. 工具栏的默认介绍: 工具栏默认包括5个按钮,根据不同的权限决定显示: 1 2 3 4 添加:add 删除:del 导出.export 导入和(导入模板下载,简称)导出模板:import 在页面的标准4请求里,可以看到其中的一个actionKeys值,用于决定权限的呈现:   你可以通过AR.Global.Variable.actionKeys拿到这个值. 下面介绍各种常用

ASP.NET Aries 入门开发教程1:框架下载与运行

背景: 鉴于框架的使用者越来越多,文档太少,不少用户反映框架的入门门槛太高. 好吧,再辛苦下,抽时间写教程吧! 步骤1:下载框架源码 开源地址:https://github.com/cyq1162/Aries 建议用SVN或Git下载,因为随时可以更新.(打包Zip下的载的,更新升级不方便) 步骤2:F5 运行起来 数据库默认是指向文本数据库,所以可以直接运行,看到登陆界面: 默认用户名密码是:admin,111111,已经写在html中了. 点登陆,如果提示如下: 那你就打开web.confi

ASP.NET Aries 入门开发教程9:业务表单的开发

前言: 经过前面那么多篇的列表的介绍,终于到了大伙期待的表单开发了. 也是本系列的最后一篇文章了! 1:表单页面的权限设置与继承 对于表单页面,权限的设置有两种: 1:你可以选择添加菜单(设置为不显示)并配置权限. 2:不设置权限,继承自父页面. 因此,如果你单独打开一个没有单独设置权限的页面,得到的效果就是: 2:简单单表的开发Demo 1:新建ArticleEdit.html html是从UserEdit.html Copy过来简单调整的,毕竟为了统一样式. 当然你也可以自定义样式,那样的话

使用ASP.NET Atlas ListView控件显示列表数据

asp.net|控件|数据|显示 English Version: http://dflying.dflying.net/1/archive/113_display_listible_data_using_aspnet_atlas_listview_control.html 在这个系列中,我将介绍一些Atlas Sys.UI.Data中较高级的控件,包括: Sys.UI.Data.ListView:使用ASP.NET Atlas ListView控件显示列表数据 Sys.UI.Data.Item

ASP.NET MVC入门 8、ModelState与数据验证

ViewData有一个ModelState的属性,这是一个类型为ModelStateDictionary的 ModelState类型的字典集合.在进行数据验证的时候这个属性是比较有用的.在 使用Html.ValidationMessage()的时候,就是从ViewData.ModelState中检测是否 有指定的KEY,如果存在,就提示错误信息.例如在前一篇文章ASP.NET MVC 入门 7.Hellper与数据的提交与绑定中使用到的UpdateModel方法: 我们在View中使用Html.