ecology开发之表单布局组件-赫非域

组件

表单布局组件

备注

功能说明

基于java自定义标签库及xml模板解析的页面布局组件，其特点如下：
1、java后端解析，安全可靠；
2、支持多种页面布局样式，可以自行设计布局模板应用，灵活；
3、支持快速页面布局切换；
4、全面封装布局的总体样式控制；
5、同一页面支持多个布局组件的运行；
6、开放必要的属性，开发人员可以灵活设置元素的属性及样式；
7、常用于页面的总体布局设计

使用说明

1.引入如下标签库
<%@ taglib uri=”/WEB-INF/weaver.tld” prefix=”wea”%>

2、按如下格式编写代码：
<wea:layout type=”fourCol”>
<wea:group context=”常用条件” attributes=”{‘class’:\”e8_title e8_title_1\”}”>
<wea:item>标题</wea:item>
<wea:item>
<wea:required id=”aaspan” required=”true”>
<input type=”text” name=”aa” id=”aa”/>
</wea:required>
</wea:item>
<wea:item>编号</wea:item>
<wea:item><input type=”text” name=”bb” id=”bb” value=”b”/></wea:item>
<wea:item>创建日期</wea:item>
<wea:item attributes=”{\”colspan\”:\”3\”}”>
<select class=”inputStyle” name=”ccc” id=”ccc”>
<option value=””>全部</option>
<option value=”1″>今天</option>
<option value=”2″>本周</option>
<option value=”3″>本月</option>
</select>
</wea:item>
<wea:item>批准日期</wea:item>
<wea:item>
<select name=”ccc” id=”ccc”>
<option value=””>全部</option>
<option value=”1″>今天</option>
<option value=”2″>本周</option>
<option value=”3″>本月</option>
</select>
</wea:item>

</wea:group>
</wea:layout>

运行效果图

例子

例子：http://192.168.4.44:8080/web/query.jsp

<wea:layout>标签的属性定义

组件初始化参数

是否必须

类型

描述

type

否

string

用于指定应用的模板，默认值从weaver_layout.properties中读取
目前可选值有：twoCol,fourCol,2col,4col,table
table：普通列表

needImportDefaultJsAndCss

否

string

用于指定是否需要引入模板自行引入的js和css文件，默认为true

attributes

否

string

json格式的字符串，用于定义布局组件的各种属性，如id等。
目前可用属性：
layoutTableId：定义模板table的ID；
layoutTableDisplay：定义模板table是否显示，取值同display属性。
formTableId：定义模板元素区table的ID；
formTableDisplay：定义模板元素区table是否显示，取值同display属性。
expandAllGroup：定义该layout下的所有的group是否默认展开，设置为true时默认展开，默认为false。group中的itemAreaDisplay属性设置为none的组依旧不会展开。
cols：当type=table时，定义该表格有多少列
cws：当type=table时，定义该表格每列的宽度
cw1：
cw2：
cw3：
cw4：以上4个参数用于定义表格列的宽度，当type!=table时生效。

注：如果该attributes中定义了相关属性，那么该key必须在模板中有相关定义才能应用

template

否

string

指定该布局使用的模板，必须是完整路径，如:/wui/theme/ecology8/templates/default/fourCol.xml

否

string

指定该模板要加载的js文件，多个js文件用,分隔，完整路径

css

否

string

指定该模板要加载的css文件，多个css文件用,分隔，完整路径

<wea:group>标签的属性定义

组件初始化参数

是否必须

类型

描述

context

是

string

控件组的显示名称

attributes

否

string

json格式的字符串，用于定义布局组件的各种属性，如id等
目前可用属性：
groupDisplay：控制组TITLE信息是否显示，取值同display
groupSHBtnDisplay：控制组的【显示/隐藏】按钮是否显示，取值同display
itemAreaDisplay：控制该组的元素区域是否显示，取值同display属性。默认除第一个分组外，其他分组隐藏。
samePair：该参数常用于联动的情况，给td增加一个_samePair属性，_samePair值相同的项被认为是一对，那么隐藏时将该_samePair属性传入会全部隐藏这些项；
isColspan：最后一个item是否需要自动跨列，默认为自动跨列(true），取值为true和false。

注：如果该attributes中定义了相关属性，那么该key必须在模板中有相关定义才能应用

对组件提供了以下功能函数

方法1

返回类型

描述

showGroup

无

用于显示指定的group

方法参数

是否必须

类型

描述

samePair

是

string

group上设置的samePair参数

方法2

返回类型

描述

hideGroup

无

用于隐藏指定的group

方法参数

是否必须

类型

描述

samePair

是

string

group上设置的samePair参数

方法3

返回类型

描述

showItemArea

无

用于显示某个组下的元素区

方法参数

是否必须

类型

描述

selector

是

string

位于组结构内的某个元素的jQuery选择器描述，如”#basicset”

_document

否

document

selector所在位置的document对象

<wea:item>标签的属性定义

组件初始化参数

是否必须

类型

描述

type

否

string

用于指定该item的类型：默认为null值，一般类型
1、toolbar：表示该项是操作行，将用于替换模板中<toolbar>的定义；
2、groupHead：表示该项为group操作栏，将用于替换<groupRightContext>中定义的操作项
3、thead：当type=table时，该属性用于指定该item是thead类型

attributes

否

string

json格式的字符串，用于定义布局组件的各种属性，如id等
目前可用属性：
isTableList：控制该item的内容是否是一个列表或者是另一个布局组件，取值true或者false，默认为false。
colspan：控制该item占据几列，该参数增加了两个可选值，half和full，表示占一半列数和剩余全部列数，避免使用硬性跨列参数(该参数尽可能少用)。
id：给该td增加id和name属性
samePair：该参数常用于联动的情况，给td增加一个_samePair属性，_samePair值相同的项被认为是一对，那么隐藏时将该_samePair属性传入会全部隐藏这些项；
display：该参数用于控制该td的默认显示状况，取值为css中display的取值
customAttrs：该参数用于对td设置自定义属性，格式如下：’customAttrs’:’id=td_1 value=td_2′

注：如果该attributes中定义了相关属性，那么该key必须在模板中有相关定义才能应用

对组件提供了以下功能函数

方法1

返回类型

描述

__defaultTemplNamespace__.showEle

无

用于显示指定的td

方法参数

是否必须

类型

描述

samePair

是

string

td上设置的samePair参数

方法2

返回类型

描述

__defaultTemplNamespace__.hideEle

无

用于隐藏指定的td

方法参数

是否必须

类型

描述

samePair

是

string

td上设置的samePair参数

方法参数

是否必须

类型

描述

needHideTr

否

boolean

是否需要隐藏tr，默认为true。

方法3

返回类型

描述

__defaultTemplNamespace__.showItemArea

无

用于显示指定的组元素区

方法参数

是否必须

类型

描述

selector

是

string

位于组结构内的某个元素的jQuery选择器描述，如”#basicset”

方法参数

是否必须

类型

描述

_document

否

document

selector所在位置的document对象

方法4

返回类型

描述

__defaultTemplNamespace__.showGroup

无

用于显示指定的group元素区

方法参数

是否必须

类型

描述

samePair

是

string

tr上设置的samePair参数

方法5

返回类型

描述

__defaultTemplNamespace__.hideGroup

无

用于隐藏指定的group元素区

方法参数

是否必须

类型

描述

samePair

是

string

tr上设置的samePair参数

<wea:required>标签的属性定义

组件初始化参数

是否必须

类型

描述

是

string

用于指定存放必填标识的span的ID

required

否

boolean

用于指定该item项是否必填

value

否

string

该item项的值，用于判断必填标识是否需要显示

isOutValue

否

boolean

如果value不为空，是否在span中输出value值，默认为false

模板定义说明

1、模板是一个标准的xml文件

<?xml version=”1.0″ encoding=”UTF-8″?>
<!– 所有没有内容的标签请增加一个空格 –>
<start>
<table class=”LayoutTable” id=”#{layoutTableId}” style=”display:#{layoutTableDisplay}”>
<colgroup>
<col width=”15%”></col>
<col width=”35%”></col>
<col width=”15%”></col>
<col width=”35%”></col>
</colgroup>
<tbody>
<!– 分组循环 –>
<groups>
<!– 分组title信息 –>
<group>
<tr class=”intervalTR” style=”display:#{groupDisplay}”>
<td class=”interval”>
<span class=”#{class}”> </span>
<span>#{context}</span>
</td>
<td class=”interval” colspan=”3″ style=”text-align:right;”>
<groupRightContext>
<span class=”toolbar”>
#{context}
</span>
</groupRightContext>
<span class=”hideBlockDiv” style=”display:expression(isFirstGroup?’none’:groupOperDisplay)”>
隐藏 <img src=”/wui/theme/ecology8/templates/default/images/2.png”> </img>
</span>
</td>
</tr>
<tr class=”Spacing” style=”height:1px;display:#{groupDisplay}”>
<td class=”Line” colspan=”4″></td>
</tr>
</group>
<!– 分组元素区域 –>
<itemArea>
<tr class=”items intervalTR”>
<td colspan=”4″>
<table class=”ViewForm”>
<!– 分组元素循环区 –>
<items>
<tr class=”expression(isTableList?’intervalTR’:”)”>
<!– 行元素定义区 –>
<item>
<everyItem>
<td class=”expression(isTableList?’tableField’:’fieldName’)” colspan=”#{colspan}”>
#{context}
</td>
</everyItem>
<everyItem>
<td class=”field” colspan=”#{colspan}”>#{context}</td>
</everyItem>
<everyItem>
<td class=”fieldName” colspan=”#{colspan}”>
#{context}
</td>
</everyItem>
<everyItem>
<td class=”field” colspan=”#{colspan}”>#{context}</td>
</everyItem>
</item>
</tr>
<tr style=”height:1px!important;display:expression(isTableList?’none’:”);” class=”Spacing”>
<td class=”expression(isLastRow?’paddingLeft0′:’paddingLeft18′)” colspan=”4″>
<div class=”intervalDivClass”></div>
</td>
</tr>
</items>
</table>
</td>
</tr>
</itemArea>
</groups>
<toolbar>
<tr class=”intervalTR”>
<td class=”interval” colspan=”4″ style=”text-align:center;”>#{ context }</td>
</tr>
</toolbar>
</tbody>
</table>
<importJsCss>
<link rel=”stylesheet” href=”/wui/theme/ecology8/templates/default/css/default.css” type=”text/css”> </link>
<script type=”text/javascript” src=”/wui/theme/ecology8/templates/default/js/default.js”> </script>
<link rel=”stylesheet” type=”text/css” href=”/js/ecology8/selectbox/css/jquery.selectbox.css”/>
<script src=”/js/ecology8/selectbox/js/jquery.selectbox-0.2.js”> </script>
<link href=”/js/checkbox/jquery.tzCheckbox.css” type=”text/css” rel=”STYLESHEET” />
<script language=”javascript” src=”/js/checkbox/jquery.tzCheckbox.js”> </script>
<LINK href=”/wui/theme/ecology8/jquery/js/e8_zDialog_btn.css” type=”text/css” rel=”STYLESHEET” />
</importJsCss>
</start>

2、新建模板时红色标注的节点如<groups>请保持原样，引擎解析时需要根据这些节点来决定解析结构

3、引擎内置的变量(expression表达式)

变量名

功能

isFirstGroup

用于判断该group是否布局中的第一个group，用于决定是否显示隐藏/显示按钮，如果前端强行指定groupOperDisplay属性，则认为控制

isTableList

用于决定item是否是一个tableList或者是另一个布局组件，用于控制布局的样式效果

isLastRow

用于判断是否是该group的最后一行组件，用于控制线条的样式显示。

转载请注明：赫非域 » ecology开发之表单布局组件

与本文相关的文章