上一篇是布局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.运行后的效果图。
列表,是我们在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",结果如下图