自己开发的web快速开发平台教程(2)，列表(Grid)的使用教程
2013-04-17 17:30
411 查看
上一篇是布局Layout的使用教程，这次主要讲如何使用列表Grid。
列表，是我们在web项目开发中用得最多的组件。为了方便大家学习，每篇都使用上一篇的练习结果代码。
平台列表有以下特点：
>具有列表的基本特性，定义列、列宽、多行表头，多行表尾，合并单元格，按某列分组，可拖拉列宽，点击列头排序(是后台sql结果集排序，不是本页js代码排序)，分页或不分页，列内容字符超宽截取或设置为折行；多种单元格类型支持(单选、单行文本、大文本、多选、下拉、日期、自定义、修饰、按钮、数字、子行、子grid、图片等，并可无限按需要扩展类型，有接口类实现主要方法即可)；可设置可编辑或只读的grid，设置指定的列为可编辑状态；自动侦别用户对grid的编辑操作过程，支持取消、还原；支持tab键在单元格之间跳转；自动完成对单元格输入信息的合法性效验，目前支持字符串长度的限制、输入内容是否重复、输入不能空、email、电话等及以上多种验证方式的组合模式，并支持校验的扩展，通过加入新规则的正则表达式即可，及其他一时未记起的支持。
>平台提供对grid操作的api函数。
列表实例使用教程：
续第一篇例子
1.写列表的SQL查询，在平台中称为设置数据源，配置在xml文件中。题外话，平台有二种配置文件，一种就是数据源配置(SQL)，另一种是业务操作配置(Operate，就是新增、删除、更新这些)。
我们不用管这个SQL的具体业务意思，只知道它能正确执行就行了。
2.在页面上配置Grid
上面的jsp页面代码是第一篇的例子，加入了<BL:Grid .....> </BL:Grid>
3.参数说明
>该grid的id，后面可以用该id对此grid对象进行引用。
>查询结果集中，用作主键的字段名称。题外话，平台的表主键的值是自动产生的，全球唯一编码的数字，不是字符型Guid，数字型的主键。
>每个列的类型，有三种。字符str；数值long；日期date。主要是用于点击列头进行排序。
>每个列要显示字段的名称
dataset="LytXmglPage"
>列表的数据源名称，就是前面数据集写的SQL查询，前面红色的部分。
params="PRO_TYPE_ID,PRO_YEAR"
>列表的数据源查询参数设置，就是前面数据集写的SQL查询，参数兰色的部分。
>设置列表每一列所占的宽度，某一列设置为*号，表明此Grid自适应其所在当前父容器的宽度。
>设置列表每一列的类型，共有
link -href；ch -checkbox；ro -只读；ed -可编辑text；txt -可编辑textarea；coro -只读select；dhxCalendarA -日期；clist -多选下拉；decorate -按业务规则修饰；sub_row -子行； sub_grid -从表Grid等，类型可按需要扩展cell的基类，来完成不同的业务需要。
>设置列表每一列的中文标题。
>设置要隐藏的列，有时为了编程方便，需要把一些不需要显示的列信息隐藏掉，只是隐藏，实际此列还在，它的数据也是可以引用的。
>如果设置了某列为link，其点击后响应的js处理函数。
>如果设置了某列为link，对应此列的字段名称。
>初始化加载Grid脚本支持库。
>是否分页。
>如果grid处于可编辑状态时，对应更新的实体名称。
>默认的排序字段。
4.还有其他未列出的属性。
5.配置完成后，准备加载到layout的a单元格，就是把百度的页面换掉。
6.运行后的效果图。
7.把layout的a单元格，把url="http://www.baidu.com" 去掉，加入 object_id="LytXmglPage_main" ，表明把grid的主容器放到a单元格。写法是grid的id加"_main"。即可把指定的grid放到指定的单元格中。
按照这种做法，照着继续把另一个grid也配置放，放到b单元格，运行后的效果图如下
8.可编辑的单元格
原来的配置
改成
运行后的效果图
输入后的效果图，输入值变化后的单元格会变成淡红色，表示这个单元格编辑过。
其他还有txt，日期等列类型。
9.带校验的grid
设置可编辑单元格后，可设置对其输入的内容进行有效性校验
在grid的标签内加入校验属性
NotEmptyAndExist 是指输入不能为空，并且该列字段的值在表中不能有重复值。
ValidInteger 是指只能输入数值型数字。
远行后的效果如下图
在第二列输入重复的"dddd"，结果如下图
列表，是我们在web项目开发中用得最多的组件。为了方便大家学习，每篇都使用上一篇的练习结果代码。
平台列表有以下特点：
>具有列表的基本特性，定义列、列宽、多行表头，多行表尾，合并单元格，按某列分组，可拖拉列宽，点击列头排序(是后台sql结果集排序，不是本页js代码排序)，分页或不分页，列内容字符超宽截取或设置为折行；多种单元格类型支持(单选、单行文本、大文本、多选、下拉、日期、自定义、修饰、按钮、数字、子行、子grid、图片等，并可无限按需要扩展类型，有接口类实现主要方法即可)；可设置可编辑或只读的grid，设置指定的列为可编辑状态；自动侦别用户对grid的编辑操作过程，支持取消、还原；支持tab键在单元格之间跳转；自动完成对单元格输入信息的合法性效验，目前支持字符串长度的限制、输入内容是否重复、输入不能空、email、电话等及以上多种验证方式的组合模式，并支持校验的扩展，通过加入新规则的正则表达式即可，及其他一时未记起的支持。
>平台提供对grid操作的api函数。
列表实例使用教程：
续第一篇例子
1.写列表的SQL查询，在平台中称为设置数据源，配置在xml文件中。题外话，平台有二种配置文件，一种就是数据源配置(SQL)，另一种是业务操作配置(Operate，就是新增、删除、更新这些)。
<DataSet author="项目信息管理列表" name="LytXmglPage" formatdate="PRO_XM_DWZZ|yyyy-MM-dd,PRO_QD_DATE|yyyy-MM-dd,PRO_START_DATE|yyyy-MM-dd,PRO_END_DATE|yyyy-MM-dd" dataset_type="map" return_entity="" params="PRO_TYPE_ID,PRO_YEAR,CurrUserId" params_type="long,str,long" source="dhx" put_fields="" return_fields="" > select * from lyt_xmgl_project where pro_type_id=? and pro_year=? and user_id=? </DataSet>
我们不用管这个SQL的具体业务意思，只知道它能正确执行就行了。
2.在页面上配置Grid
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ taglib uri="/WEB-INF/bl_tag.tld" prefix="BL"%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <BL:RootBase id="blRoot" valid_login="false"></BL:RootBase> <title></title> </head> <body id="body_layout"> <BL:Grid id="LytXmglPage" primary="PRO_ID" colsort="str,str,str,str,str,str,str,str" headerfields="PRO_NAME,PRO_HTPH,PRO_QD_DATE,PRO_WTDW,PRO_XMBZ_DW,PRO_CD_DW,PRO_START_DATE,PRO_END_DATE" dataset="LytXmglPage" params="PRO_TYPE_ID,PRO_YEAR" colwidths="*,80,80,140,140,140,90,90" coltypes="link,ro,ro,ro,ro,ro,ro,ro" header="项目名称,合同编号,签订日期,委托单位,项目保证单位,承担单位,开始日期,结束日期" hiddencol="" collink="onViewPro" linkindex="PRO_NAME" init_grid_lib="true" sub_grid_url="" ispage="true" table="LytXmglProject" defaultsort="PRO_QD_DATE,DESC" > </BL:Grid> <div id="demo_div" > 您的大名： <input type="text" style="width: 90px"> </div> <BL:Layout patterns="3T" parentid="body_layout" id="p" init_layout_jslib="true"> <BL:LayoutItem height="200" id="a1" parent_layout_id="p" title="链接到百度" url="" object_id="LytXmglPage_main" parent_layout_cell="a" statusbar="<font color=red>这是</font>状态栏a"></BL:LayoutItem> <BL:LayoutItem id="b1" parent_layout_id="p" title="链接到17173.com" url="http://www.17173.com" parent_layout_cell="b"></BL:LayoutItem> <BL:LayoutItem id="c1" append_layout="true" patterns="3T" parent_layout_id="p" title="<font color=red>加载</font>页面的一个div" parent_layout_cell="c"> <BL:LayoutItem id="a2" parent_layout_id="c1" title="子布局" object_id="demo_div" parent_layout_cell="a"></BL:LayoutItem> </BL:LayoutItem> </BL:Layout> </body> </html>
上面的jsp页面代码是第一篇的例子，加入了<BL:Grid .....> </BL:Grid>
3.参数说明
id="LytXmglPage"
>该grid的id，后面可以用该id对此grid对象进行引用。
primary="PRO_ID"
>查询结果集中，用作主键的字段名称。题外话，平台的表主键的值是自动产生的，全球唯一编码的数字，不是字符型Guid，数字型的主键。
colsort="str,str,str,str,str,str,str,str"
>每个列的类型，有三种。字符str；数值long；日期date。主要是用于点击列头进行排序。
headerfields="PRO_NAME,PRO_HTPH,PRO_QD_DATE,PRO_WTDW,PRO_XMBZ_DW,PRO_CD_DW,PRO_START_DATE,PRO_END_DATE"
>每个列要显示字段的名称
dataset="LytXmglPage"
>列表的数据源名称，就是前面数据集写的SQL查询，前面红色的部分。
params="PRO_TYPE_ID,PRO_YEAR"
>列表的数据源查询参数设置，就是前面数据集写的SQL查询，参数兰色的部分。
colwidths="*,80,80,140,140,140,90,90"
>设置列表每一列所占的宽度，某一列设置为*号，表明此Grid自适应其所在当前父容器的宽度。
coltypes="link,ro,ro,ro,ro,ro,ro,ro"
>设置列表每一列的类型，共有
link -href；ch -checkbox；ro -只读；ed -可编辑text；txt -可编辑textarea；coro -只读select；dhxCalendarA -日期；clist -多选下拉；decorate -按业务规则修饰；sub_row -子行； sub_grid -从表Grid等，类型可按需要扩展cell的基类，来完成不同的业务需要。
header="项目名称,合同编号,签订日期,委托单位,项目保证单位,承担单位,开始日期,结束日期"
>设置列表每一列的中文标题。
hiddencol="要隐藏对应列的字段名称"
>设置要隐藏的列，有时为了编程方便，需要把一些不需要显示的列信息隐藏掉，只是隐藏，实际此列还在，它的数据也是可以引用的。
collink="onViewPro"
>如果设置了某列为link，其点击后响应的js处理函数。
linkindex="PRO_NAME"
>如果设置了某列为link，对应此列的字段名称。
init_grid_lib="true"
>初始化加载Grid脚本支持库。
ispage="true"
>是否分页。
table="LytXmglProject"
>如果grid处于可编辑状态时，对应更新的实体名称。
defaultsort="PRO_QD_DATE|DESC"
>默认的排序字段。
4.还有其他未列出的属性。
5.配置完成后，准备加载到layout的a单元格，就是把百度的页面换掉。
6.运行后的效果图。
7.把layout的a单元格，把url="http://www.baidu.com" 去掉，加入 object_id="LytXmglPage_main" ，表明把grid的主容器放到a单元格。写法是grid的id加"_main"。即可把指定的grid放到指定的单元格中。
按照这种做法，照着继续把另一个grid也配置放，放到b单元格，运行后的效果图如下
8.可编辑的单元格
原来的配置
coltypes="link,ro,ro,ro,ro,ro,ro,ro"link是链接，ro是只读。
改成
coltypes="link,ed,ro,ro,ro,ro,ro,ro"ed是可编辑
运行后的效果图
输入后的效果图，输入值变化后的单元格会变成淡红色，表示这个单元格编辑过。
其他还有txt，日期等列类型。
9.带校验的grid
设置可编辑单元格后，可设置对其输入的内容进行有效性校验
在grid的标签内加入校验属性
valid_cols=",NotEmptyAndExist,ValidInteger,,,,,"
NotEmptyAndExist 是指输入不能为空，并且该列字段的值在表中不能有重复值。
ValidInteger 是指只能输入数值型数字。
远行后的效果如下图
在第二列输入重复的"dddd"，结果如下图
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 自己开发的web快速开发平台教程(1)，布局(Layout)的使用教程
- 自己开发的web快速开发平台教程(5)，表单(Form)的使用教程
- 自己开发的web快速开发平台教程(3)，工具条(Toolbar)的使用教程
- 自己开发的web快速开发平台教程(4)，树形结构(Tree)的使用教程
- AgileEAS.NET应用开发平台详细使用教程-简单Web应用
- 使用Ruby on Rails快速开发web应用的教程实例
- 自己开发的j2ee Web快速开发平台简介
- ScriptCase开发平台介绍(八)——列表（Grid）应用程序
- C#实现多级子目录Zip压缩解压实例 NET4.6下的UTC时间转换 [译]ASP.NET Core Web API 中使用Oracle数据库和Dapper看这篇就够了 asp.Net Core免费开源分布式异常日志收集框架Exceptionless安装配置以及简单使用图文教程 asp.net core异步进行新增操作并且需要判断某些字段是否重复的三种解决方案 .NET Core开发日志
- 基于J2EE的WEB应用快速开发构件平台--XFRAME
- Web开发平台快速搭建
- spring boot开发遇到坑之spring-boot-starter-web配置文件使用教程
- 低成本、高效率的Java Web应用快速开发利器-OpenJWeb快速开发平台1.8
- 快速使用node.js进行web开发
- 使用yeoman快速搭建react-webpack开发环境
- webAppbuilder微件使用教程1 快速入门
- 使用VTEditor软件快速开发网站系列教程六 框架篇
- 使用 Grails 快速开发 Web 应用程序--Web 开发的关键要素
- 天纵智能软件快速开发平台标准列表数据管理插件
- MOSS 2010:Visual Studio 2010开发体验（20）——使用ADO.NET Data Service快速访问SharePoint列表数据