| 组件 | 表单布局组件 | 备注 | ||||
| 功能说明 | 基于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> |
||||||
| 运行效果图 | ||||||
|
|
||||||
| 例子 | 例子：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 | |||
| js | 否 | 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>标签的属性定义 | ||||||
| 组件初始化参数 | 是否必须 | 类型 | 描述 | |||
| id | 是 | 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开发之表单布局组件