IPLAT平台常用组件学习笔记

1、EFInput、EFPopupInput

EFInput用于渲染生成页面上的表单元素（input、checkbox、radio、textarea），还能对输入元素提供EiInfo数据绑定以及一个数据校验、格式化；
EFPopupInput是一个个性化比较高的表单时输入，用户根据自己需要，自定义弹出显示的内容，通常根据服务名，查询方法配置服务，渲染出Grid；

2、EFSelect、EFMultiSelect标签作用：

EFSelect标签 用于产生html的下拉框控件，EFSelect通过结合 EFOption 、 EFOptions 、EFCodeOption标签来达到这一目的。其中，EFOption标签，用于一条一条option的写入，EFOptions标签则用于批量option的写入，EFCodeOption标签用于指定小代码的option批量写入。

EFMultiselect标签 用于产生html的下拉多选框控件，EFMultiselect通过结合 EFOption 、 EFOptions 、EFCodeOption、EFTableOption标签来达到这一目的。

EFSelect的下拉选项来源仅包括EFOption/EFOptions/EFCodeOption/EFTableOption子标签时，无需设置textField和valueField属性；
EFSelect的下拉选项来自serviceName，methodName查询时，必须设置textField和valueField属性；
EFSelect混合使用serviceName，methodName查询和EFOptions子标签时，必须设置textField和valueField属性；
注意：
上述的三种使用场景中，EFSelect的下拉选项模板template或valueTemplate，均固定的由"textField"和"valueField"组合而成（即使textField的值不是"textField",valueField的值不是"valueField"）（template="#=valueField#-#=textField#"）
因为在封装过程中，EFOption/EFOptions/EFCodeOption的textField和valueField的值已经固化为"textField"和"valueField"。
不同于EFSelect，EFCascadeSelect(template和valueTemplate灵活可配，根据textField和valueField实际的取值来搭配)
不同于EFSelect，EFComboColumn(itemTemplate和columnTemplate同样可以灵活配置)
template与valueTemplate属性不一定都需要进行配置，没有配置时，下拉选项默认显示textField值；

3、EFColumn、EFComboColumn

EFColumn是EF:EFGrid的子标签，用来描述表格的列信息
EFComboColumn将提供数据以下拉列表编辑的方法，为EFGrid的子标签。

4、EFDatePicker、EFDateSpan

单个日期/日期时间

<div class="row">
    <EF:EFDatePicker ename="inqu_status-0-start" cname="单个的日期"
                     format="yyyy/MM/dd" required="true">
    </EF:EFDatePicker>
    <EF:EFDatePicker ename="inqu_status-0-end" cname="日期时刻" role="datetime"  //可设置role="datetime"显示时刻
                     format="yyyy-MM-dd HH:mm:ss" required="true">
    </EF:EFDatePicker>
</div>

EFDateSpan可设置开始和结束日期

（1）两个单元格

<div class="row">
    <EF:EFDateSpan startName="ss" endName="ee" startCname="开始日期" endCname="结束日期"
                   role="datetime" required="true" interval="15" startRatio="4:8"
                   startValue="2017-09-20 12:30" parseFormats="['yyyy-MM-ddHH:mm']"/>
</div>

（2）一个单元格

<div class="row">
    <EF:EFDateSpan startName="s1" endName="e1" startCname="开始时间" endCname="结束时间" role="datetime"
                   required="true"  interval="15"  bindWidth="6" />
    <EF:EFDateSpan startName="s2" endName="e2" startCname="开始时间" endCname="结束时间"
                   role="datetime" required="true"  interval="15" bindWidth="6" 
                   bindName="起止时间" extChar="到"/>
</div>

注意： 设置 bindWidth，bindName，bindRatio 属性来实现此功能

bindWidth属性：用来控制是否将单元格合并

bindName属性：用于显示合并后的EFDateSpan的标签名，如“开始时间-结束时间”

bindRation属性：例如4:4:4、3:4:5。（总数为12）(警告)
注意：比例格式错误或者不写将采用默认比例4:4:4。(错误格式如6:6；2:3:4:3，或其他非比例格式)

除此以外，新增extChar，可以在控件中增加字符串。

5、 ratio/input框的栅格比例（默认4:8）

colWidth用于控制整个控件的宽度，radio用于控制label和input框的比例，inline用户控制label是否显示（在普通input框中），在checkbok、radio中控制水平和垂直排列与否；

6、input框ename

前台页面对ename属性值进行三段式定义，可使对应数据渲染到相应的input框

1、“一段式绑定”直接从attr属性区获得EiInfo的属性值，

2、 “两段式绑定”从对应blockId的attr区获得EiBlock的属性值，

3、“三段式绑定”获得对应blockId的对应列名的第rowNo行数据。

示例代码：

<EF:EFRegion id="R8" title="三段式绑定EiInfo">
    <div class="row">
        <EF:EFInput ename="info" cname="绑定EiInfo属性区" colWidth="6"/>  //一段式
        <EF:EFInput ename="result-block" cname="绑定EiBlock属性区" colWidth="6"/> //二段式
        <EF:EFInput ename="result-0-data" cname="绑定EiBlock数据区" colWidth="6"/> //三段式
        <EF:EFInput ename="result-0-data1" cname="绑定EiBlock数据区" colWidth="6"/>
        <EF:EFInput ename="result-1-data" cname="绑定EiBlock数据区" colWidth="6"/>
        <EF:EFInput ename="result-1-data1" cname="绑定EiBlock数据区" colWidth="6"/>
        <EF:EFInput ename="result-1-data2" x="1" y="2" class="k-state-hover" readonly="true" cname="默认值优先"
                    value="默认值" colWidth="6"/>
        <EF:EFInput ename="result-1-data3" style="color:red;" readonly="true"
                    cname="动态属性" value="红色的文字" colWidth="6"/>
    </div>
    <p class="text-info"> 前端的数据绑定到EiInfo对象，在EiInfo测试页面展示 </p>
</EF:EFRegion>