1. 功能介绍

    页面布局,使用后台配置动态生成可拖放保存位置和局部放大的基于功能部件的动态页面。

  2. 主要特性

    1. 通过配置就可以组合成需要的功能集合页面
    2. 配置页面时一次完成,无需刷新页面,设计布局时拖放实现,所见即所得,简单方便。
  3. 开发步骤

    1. 生成配置文件。通过图形化配置工具配置页面布局并生成配置文件,也可以手工编写页面布局配置文件。图形化工具提供了:从文件系统生成配置文件;通过LCU生成的XML文件生成配置文件;通过数据表结构生成配置文件;通过手工编写SQL,按SQL查询字段或SQL查询数据生成配置文件。配置过程中提供页面布局预览功能。
    2. 在HTML中编写页面生成组件[行列式布局:BuilderRow;表格式布局:BuilderTable]。
  4. 代码片段

    1. 部件页面(必须为一段页面内容,而不是一个完整的页面)

      //嵌入局部页面即可,不要嵌入所有页面,如果要引入js文件,必须和外部页面无关的js,否则会导致错误
      <div class="c_table">
      	<div class="table"><div class="wrapper"><div class="wrapper2">
      		<table>
      			<tbody>
      				<tr>
      					<td class="label">姓名</td>
      					<td><span jwcid="@Insert" value="ognl:info.NAME" raw="true"/></td>
      				</tr>
      				<tr>
      					<td class="label">手机</td>
      					<td><span jwcid="@Insert" value="ognl:info.SERIAL_NUMBER" raw="true"/></td>
      				</tr>
      				<tr>
      					<td class="label">证件类型</td>
      					<td><span jwcid="@Insert" value="ognl:info.PSPT_TYPE" raw="true"/></td>
      				</tr>
      				<tr>
      					<td class="label">证件号码</td>
      					<td><span jwcid="@Insert" value="ognl:info.PSPT_ID" raw="true"/></td>
      				</tr>
      				<tr>
      					<td class="label">用户套餐</td>
      					<td><span jwcid="@Insert" value="ognl:info.PRODUCT_ID" raw="true"/></td>
      				</tr>
      				<tr>
      					<td class="label">用户状态</td>
      					<td><span jwcid="@Insert" value="ognl:info.STATUS" raw="true"/></td>
      				</tr>
      			</tbody>
      		</table>
      	</div></div></div>
      </div>
      
    2. 统计图表部件页面的页面

      //嵌入局部页面即可,不要嵌入所有页面,如果要引入js文件,必须和外部页面无关的js,否则会导致错误
      <div class="c_table">
      	<div class="table"><div class="wrapper"><div class="wrapper2">
      		<table>
      			<tbody>
      				<tr>
      					<td class="label">姓名</td>
      					<td><span jwcid="@Insert" value="ognl:info.NAME" raw="true"/></td>
      				</tr>
      				<tr>
      					<td class="label">手机</td>
      					<td><span jwcid="@Insert" value="ognl:info.SERIAL_NUMBER" raw="true"/></td>
      				</tr>
      				<tr>
      					<td class="label">证件类型</td>
      					<td><span jwcid="@Insert" value="ognl:info.PSPT_TYPE" raw="true"/></td>
      				</tr>
      				<tr>
      					<td class="label">证件号码</td>
      					<td><span jwcid="@Insert" value="ognl:info.PSPT_ID" raw="true"/></td>
      				</tr>
      				<tr>
      					<td class="label">用户套餐</td>
      					<td><span jwcid="@Insert" value="ognl:info.PRODUCT_ID" raw="true"/></td>
      				</tr>
      				<tr>
      					<td class="label">用户状态</td>
      					<td><span jwcid="@Insert" value="ognl:info.STATUS" raw="true"/></td>
      				</tr>
      			</tbody>
      		</table>
      	</div></div></div>
      </div>
      
  5. 效果演示

    页面类型维护

    页面布局选择

    确定选择布局

    生成列配置

    添加和选择部件

    对部件位置进行拖放布置

    编辑部件名称和数据源