1. 功能介绍

    通过页面生成配置文件生成行列式的页面布局。

  2. 主要特性

    1. 通过页面生成配置文件生成行列式的页面布局,可以灵活控制列数,字段与描述的排列方式等;支持if条件判断及Ajax连动刷新;支持多组件一行布局。
  3. 开发步骤

    1. 生成页面配置文件,在HTML里编写组件代码。
  4. 参数说明

    参数名 参数类型 是否必须 默认值 描述
    layouts java.lang.Object(目前支持java.lang.String
    |com.linkage.appframework.data.IData)
      页面配置文件路径或页面配置文件里的布局名[可多个,用“,”号分隔]
    或页面配置文件转换的IData型数据
    preview boolean类型 false 是否为预览模式,该模式下支持无数据绑定
    wrap boolean类型 false 是否需要包装外框
    align java.lang.String center 包装外框时,标题布局,可选值'center','left','right'
  5. 注意事项

    1. 布局路径在classes目录下的pagexml下,目录分隔符用".",xml文件名不需要".xml",指定布局名时用"@"符连接;如:layouts="pagexml.vipcust";layouts="pagexml.vipcust@vipcustquery"
    2. 使用wrap时,指定相同的wrapId则生成并例的两个<table>,否则生成多个<div class="inputField">区.在使用IData对象布局时同样需要指定wrapId,label健才能添加外框
  6. 代码片段

    1. 配置文件代码

      <page LAYOUT_TYPE="1" name="vipcust" scout="true">
      	<layout aclinic="On" class="find_inbox_list" columns="3" name="vipcustquery">
      		<if condition="ognl:condition.CONDITION_TYPE == null">
      			<input class="e_input" datatype="text" desc="开始时间" jwcid="cond_START_DATE@wade:DateField" nullable="yes" value="ognl:condition.cond_START_DATE" />
      			<input class="e_input" datatype="text" desc="结束时间" jwcid="cond_END_DATE@wade:DateField" nullable="yes" value="ognl:condition.cond_END_DATE" />
      		</if>
      		<if condition="ognl:condition.CONDITION_TYPE == null">
      			<input class="e_input" blank="true" datatype="text" desc="客户经理" jwcid="cond_CUST_MANAGER_ID@component:ManagerField" nullable="yes" value="ognl:condition.cond_CUST_MANAGER_ID" />
      			<input class="e_select" datatype="text" desc="VIP类型" jwcid="cond_VIP_TYPE_CODE@PropertySelection" model="ognl:@com.linkage.component.util.Utility@getStaticSelection(page, '#td_m_viptype')" nullable="yes" value="ognl:condition.cond_VIP_TYPE_CODE" onchange="ajaxDirect('examples.basic.pagebuilder.BuilderVipcustList', 'init', null, 'LayoutPart');"/>
      			<input _partId="LayoutPart" class="e_select" datatype="text" desc="VIP级别" jwcid="cond_VIP_CLASS_ID@PropertySelection" model="ognl:@com.linkage.component.util.Utility@getStaticSelection(page, '#td_m_vipclass')" nullable="yes" value="ognl:condition.cond_VIP_CLASS_ID" />
      		</if>
      		<input class="e_input" datatype="text" desc="VIP标识" jwcid="cond_VIP_ID@wade:TextField" nullable="yes" value="ognl:condition.cond_VIP_ID" />
      		<input class="e_input" datatype="text" desc="客户名称" jwcid="cond_USECUST_NAME@wade:TextField" nullable="yes" value="ognl:condition.cond_USECUST_NAME" />
      		<input class="e_input" datatype="text" desc="证件号码" jwcid="cond_USEPSPT_ID@wade:TextField" nullable="yes" value="ognl:condition.cond_USEPSPT_ID" />
      		<input class="e_input" datatype="text" desc="服务号码" jwcid="cond_SERIAL_NUMBER@wade:TextField" nullable="yes" value="ognl:condition.cond_SERIAL_NUMBER" />
      	</layout>
      	<!-- 多组件一行布局:示例代码 [添加position="1"]-->
      	<layout aclinic="On" class="find_inbox_list" columns="1" name="vipcustquery2" position="1" label="呼叫网络类型">
      		<if condition="ognl:condition.cond_LAYOUT_ID == null">
      			<input desc="网内" type="checkbox" id="CALL_NET_TYPE1" jwcid="@wade:Checkbox" value="ognl:condition.cond_CALL_NET_TYPE1" checked="ognl:true" />
      			<input desc="网间" type="checkbox" id="CALL_NET_TYPE2" jwcid="@wade:Checkbox" value="ognl:condition.cond_CALL_NET_TYPE2" checked="ognl:true" />
      		</if>
      		<input desc="网外" type="checkbox" id="CALL_NET_TYPE3" jwcid="@wade:Checkbox" value="ognl:condition.cond_CALL_NET_TYPE3" checked="ognl:true" />
      		<input desc="网外号码组" type="checkbox" id="CALL_NET_TYPE4" jwcid="@wade:Checkbox" value="ognl:condition.cond_CALL_NET_TYPE4" checked="ognl:true" />
      	</layout>
      	<!-- 添加外框布局:示例代码 [添加wrapId="wrap3",label="用户基本信息1"]-->
      	<layout aclinic="On" class="find_inbox_list" columns="3" name="vipcustedit3" wrapId="wrap3" label="用户基本信息1">
      		  <input class="e_input" datatype="numeric" desc="客户标识" jwcid="USECUST_ID@TextField" maxsize="16" nullable="no" value="ognl:info.USECUST_ID" />
      		  <input class="e_input" datatype="text" desc="服务号码" jwcid="SERIAL_NUMBER@TextField" maxsize="40" nullable="no" value="ognl:info.SERIAL_NUMBER" />
      		  <input class="e_input" datatype="text" desc="客户名称" jwcid="USECUST_NAME@TextField" maxsize="100" nullable="no" value="ognl:info.USECUST_NAME" />
      		  <input class="e_select" datatype="text" desc="VIP类型" jwcid="VIP_TYPE_CODE@PropertySelection" model="ognl:@com.linkage.component.util.Utility@getStaticSelection(page, '#td_m_viptype')" nullable="no" value="ognl:info.VIP_TYPE_CODE" />
      		  <input class="e_select" datatype="text" desc="VIP级别" jwcid="VIP_CLASS_ID@PropertySelection" model="ognl:@com.linkage.component.util.Utility@getStaticSelection(page, '#td_m_vipclass')" nullable="no" value="ognl:info.VIP_CLASS_ID" />
      		  <input class="e_input" datatype="text" desc="加入时间" jwcid="JOIN_DATE@wade:DateField" nullable="no" value="ognl:info.JOIN_DATE" />
      		  <input class="e_input" datatype="text" desc="VIP卡号" jwcid="VIP_CARD_NO@TextField" maxsize="20" nullable="yes" value="ognl:info.VIP_CARD_NO" />
      		  <input class="e_select" datatype="text" desc="VIP卡类型" jwcid="VIP_CARD_TYPE@PropertySelection" model="ognl:@com.linkage.component.util.Utility@getStaticSelection(page, 'CUSTVIP_VIPCLASSIDB')" nullable="yes" value="ognl:info.VIP_CARD_TYPE" />
      		  <input class="e_select" datatype="text" desc="VIP卡状态" jwcid="VIP_CARD_STATE@PropertySelection" model="ognl:@com.linkage.component.util.Utility@getStaticSelection(page, 'CUSTVIP_VIPCARDSTATE')" nullable="yes" value="ognl:info.VIP_CARD_STATE" />
      	</layout>
      	<layout aclinic="On" class="find_inbox_list" columns="3" name="vipcustedit4" wrapId="wrap3" label="用户基本信息2">
      		  <input class="e_input" datatype="text" desc="VIP卡起始" jwcid="VIP_CARD_START_DATE@wade:DateField" maxName="VIP_CARD_END_DATE" nullable="yes" value="ognl:info.VIP_CARD_START_DATE" />
      		  <input class="e_input" datatype="text" desc="VIP卡终止" jwcid="VIP_CARD_END_DATE@wade:DateField" minName="VIP_CARD_START_DATE" nullable="yes" value="ognl:info.VIP_CARD_END_DATE" />
      		  <input class="e_input" datatype="text" desc="VIP卡信息" jwcid="VIP_CARD_INFO@TextField" maxsize="100" nullable="yes" value="ognl:info.VIP_CARD_INFO" />
      	</layout>
      	<layout aclinic="On" class="find_inbox_list" columns="3" name="vipcustedit5" wrapId="wrap4" label="用户基本信息3">
      		  <input class="e_input" datatype="text" degree="10" desc="身份优先级" jwcid="IDENTITY_PRI@wade:FlipField" max="1000" min="0" nullable="yes" value="ognl:info.IDENTITY_PRI" />
      		  <input class="e_input" datatype="text" desc="身份有效起始" jwcid="IDENTITY_EFF_DATE@wade:DateField" maxName="IDENTITY_EXP_DATE" nullable="yes" value="ognl:info.IDENTITY_EFF_DATE" />
      		  <input class="e_input" datatype="text" desc="身份有效终止" jwcid="IDENTITY_EXP_DATE@wade:DateField" minName="IDENTITY_EFF_DATE" nullable="yes" value="ognl:info.IDENTITY_EXP_DATE" />
      		  <input class="e_select" datatype="text" desc="证件类型" jwcid="USEPSPT_TYPE_CODE@PropertySelection" model="ognl:@com.linkage.component.util.Utility@getStaticSelection(page, '#td_s_passporttype')" nullable="yes" value="ognl:info.USEPSPT_TYPE_CODE" />
      		  <input class="e_input" datatype="text" desc="证件号码" jwcid="USEPSPT_ID@TextField" maxsize="20" nullable="yes" value="ognl:info.USEPSPT_ID" />
      		  <input class="e_input" datatype="text" desc="证件地址" jwcid="USEPSPT_ADDR@TextField" maxsize="80" nullable="yes" value="ognl:info.USEPSPT_ADDR" />
      	</layout>
      	<layout aclinic="On" class="find_inbox_list" columns="3" name="vipcustedit6" wrapId="wrap5" label="用户基本信息4">
      		  <input class="e_input" datatype="text" desc="联系电话" jwcid="USEPHONE@TextField" maxsize="100" nullable="yes" value="ognl:info.USEPHONE" />
      		  <input class="e_input" datatype="text" desc="通信地址" jwcid="USEPOST_ADDR@TextField" maxsize="80" nullable="yes" value="ognl:info.USEPOST_ADDR" />
      		  <input class="e_input" datatype="text" desc="客户经理" jwcid="CUST_MANAGER_ID@component:ManagerField" nullable="yes" value="ognl:info.CUST_MANAGER_ID" />
      		  <input class="e_input" datatype="text" desc="发展地市" jwcid="DEVELOP_EPARCHY_CODE@component:AreaField" nullable="yes" value="ognl:info.DEVELOP_EPARCHY_CODE" />
      		  <input class="e_input" datatype="text" desc="发展部门" jwcid="DEVELOP_DEPART_ID@component:DeptField" nullable="yes" value="ognl:info.DEVELOP_DEPART_ID" />
      		  <input class="e_input" datatype="text" desc="发展员工" jwcid="DEVELOP_STAFF_ID@component:StaffField" nullable="yes" value="ognl:info.DEVELOP_STAFF_ID" />
      	</layout>
      </page>
      
    2. HTML写法

      1. String布局

        <div class="c_inputField">
        	<div class="top"></div>
        	<div jwcid="@wade:BuilderRow" layouts="pagexml.vipcust@vipcustquery"/>
        </div>
        
      2. IData布局

        <div class="c_inputField l_mt">
        	<div class="top"></div>
        	<div jwcid="@wade:BuilderRow" layouts="ognl:info"/>
        </div>
        
      3. IData布局数据结构

        示例代码:
        IData query = new DataMap();
        IData layout = new DataMap();
        IDataset components = new DatasetList();
        
        IData component = new DataMap();
        component.put("_type", "span");
        component.put("class", "e_input"); 
        component.put("datatype", "text");
        component.put("desc", ""); 
        component.put("jwcid", "cond_START_DATE@Insert");
        component.put("fieldName", "cond_START_DATE");
        component.put("nullable", "yes"); 
        component.put("value", " ");
        components.add(component);
        
        IData component1 = new DataMap();
        component1.put("_type", "input");
        component1.put("class", "e_input");
        component1.put("datatype", "text");
        component1.put("desc", "结束时间");
        component1.put("jwcid", "cond_END_DATE@wade:DateField");
        component1.put("fieldName", "cond_END_DATE");
        component1.put("nullable", "yes");
        component1.put("value", "ognl:condition.cond_END_DATE");
        components.add(component1);
        
        IData component2 = new DataMap();
        component2.put("_type", "input");
        component2.put("class", "e_input");
        component2.put("blank", "true");
        component2.put("datatype", "text");
        component2.put("desc", "客户经理");
        component2.put("jwcid", "cond_CUST_MANAGER_ID@component:ManagerField");
        component2.put("fieldName", "cond_CUST_MANAGER_ID");
        component2.put("nullable", "yes");
        component2.put("value", "ognl:condition.cond_CUST_MANAGER_ID");
        components.add(component2);
        
        IData component3 = new DataMap();
        component3.put("_type", "input");
        component3.put("class", "e_select");
        component3.put("datatype", "text");
        component3.put("desc", "VIP类型");
        component3.put("jwcid", "cond_VIP_TYPE_CODE@PropertySelection");
        component3.put("model", "ognl:@com.linkage.component.util.Utility@getStaticSelection(page,'#td_m_viptype')");
        component3.put("nullable", "yes");
        component3.put("value", "ognl:condition.cond_VIP_TYPE_CODE");
        components.add(component3);
        
        IData component4 = new DataMap();
        component4.put("_type", "input");
        component4.put("class", "e_select");
        component4.put("datatype", "text");
        component4.put("desc", "VIP级别");
        component4.put("jwcid", "cond_VIP_CLASS_ID@PropertySelection");
        component4.put("model", "ognl:@com.linkage.component.util.Utility@getStaticSelection(page,'#td_m_vipclass')");
        component4.put("nullable", "yes");
        component4.put("value", "ognl:condition.cond_VIP_CLASS_ID");
        components.add(component4);
        
        IData component5 = new DataMap();
        component5.put("_type", "input");
        component5.put("class", "e_input");
        component5.put("datatype", "text");
        component5.put("desc", "VIP标识");
        component5.put("jwcid", "cond_VIP_ID@wade:TextField");
        component5.put("nullable", "yes");
        component5.put("value", "ognl:condition.cond_VIP_ID");
        components.add(component5);
        
        IData component6 = new DataMap();
        component6.put("_type", "input");
        component6.put("class", "e_input");
        component6.put("datatype", "text");
        component6.put("desc", "客户名称");
        component6.put("jwcid", "cond_USECUST_NAME@wade:TextField");
        component6.put("nullable", "yes");
        component6.put("value", "ognl:condition.cond_USECUST_NAME");
        components.add(component6);
        
        IData component7 = new DataMap();
        component7.put("_type", "input");
        component7.put("class", "e_input");
        component7.put("datatype", "text");
        component7.put("desc", "证件号码");
        component7.put("jwcid", "cond_USEPSPT_ID@wade:TextField");
        component7.put("nullable", "yes");
        component7.put("value", "ognl:condition.cond_USEPSPT_ID");
        components.add(component7);
        
        IData component8 = new DataMap();
        component8.put("_type", "input");
        component8.put("class", "e_input");
        component8.put("datatype", "text");
        component8.put("desc", "服务号码");
        component8.put("jwcid", "cond_SERIAL_NUMBER@wade:TextField");
        component8.put("nullable", "yes");
        component8.put("value", "ognl:condition.cond_SERIAL_NUMBER");
        components.add(component8);
        
        /*添加组件到布局*/
        layout.put("_components",components);
        
        layout.put("aclinic", "On");
        layout.put("columns", "3");
        layout.put("name", "vipcustquery");
        layout.put("_type", "layout");
        
        /* 添加布局 */
        query.put("_layouts_vipcustquery", layout);
        
    3. 加外框布局

      <div class="c_edge l_mb">
      	<h4><span class="text">费用列表</span></h4>
      	<div class="c_edgeBody"><div class="l_padding">
      		<div jwcid="@wade:BuilderRow" wrap="true" align="left" layouts="examples.vipcust@vipcustedit3,examples.vipcust@vipcustedit4,examples.vipcust@vipcustedit5,examples.vipcust@vipcustedit6"/>
      	</div></div>
      </div>
      
  7. 效果演示

    BuilderRow组件

    返回后,如下图: