前端组件初始化

在页面加载完成后，通过sword.initial(); 来进行组件的初始化操作。该语句会依次执行的操作为(执行成功会在控制台打印日志)：

1. iCheck控件初始化（条件：使用checkTag）
2. iRadio控件初始化 (条件：使用radioTag)
3. sunConfig初始化选项(条件，页面中存在含有”sun-param-id”属性的select控件，如果使用selectTag,则送入paramid属性)
4. select控件初始化（条件，页面中存在含有“select2”类的select标签，即使用selectTag，则送入multiple属性）
5. dateTime日期控件初始化（条件，用inputTag，且type为datetime）
6. barRating评分控件初始化（条件，用inputTag，且type为rating）
7. filter控件初始化(条件，inputTag 且包含filter/filterMethord/filterTarget属性)
8. pageCtrl控件初始化(条件：使用pageCtrl)
9. modal关闭清除控件初始化(条件:使用modalTag)

参数说明

1. 初始化函数的入参为数组格式。

如果不送，则默认启动iCheck,iRadio,select,dateTime,barRating插件，每个数组对象的参数说明如下：

2.sunConfig

sunConfig方法可以根据select、input(radio)、input(checkbox)组件上的paramId(实际在html中为sun-param-id属性)值来获取对应的选项数据，并将其渲染的方法。使用的方式说明如下：

• 2.1 编写相应的后台方法，取出制定数据库的选项数组。

//1.前台会请求url/paramkey这个地址，其中url会初始化``sword.initial()```命令时送入的sunConfig的后台地址，paramkey及为前台组件paramId的值。
//2.后台根据paramkey值，生成相应的选项数组数据，返回给前台，返回的格式为：
{
    field:[{
            fldname:'选项1',     //选项的中文名称
            fldvalue:'1',        //选项对应的key值
            isdefault:'true'       //是否默认选中(可以不送)
        },
        ...
        ],
    default:'1'                //默认选中的选项(和每个选项的isdefault字段选择一种即可，否则可能会引发问题)
    paramId:paramkey,
    paramType:'option'/'radio'/'check', //其中option对应select的下拉框，radio对应是单选，check对应多选
    name:'test'  //最后生成的radio或者checkbox的name属性(仅仅对html格式的有效)
}

• 2.2 在调用sword.initial()命令时，将后台方法对应的url参数送入

• 2.3 编写swordTag标签时，添加paramId属性，属性值会为后台选项列表对应的key。编写html标签时，添加sun-param-id属性，属性值为后台选项列表对应的key。

代码说明

js代码

sword.initial([
    {
        target:'iCheck',
        active:true    
    },
    {
        target:'iCheck',
        active:true    
    },
    {
        target:'sunConfig',
        active:true,
        url:'109.0.14.14/root/getParam/'
    }
])

jsptag部分代码

<!-- selectTag -->
<sword:select id = "select1" paramId="paramkey"></sword:select>

<!-- checkTag -->
<sword:check chname="多选1|多选2|多选3" name="choose1|choose2|choose3" checked="true|false|true" value="duoxuan1|duoxuan2|duoxuan3" swordFormName="duox"/>
<input name="duox" value="" hidden/>

<!-- radioTag -->
<sword:radio chname="单选1|单选2|单选3" name="radiotest" checked="1" value="danxuan1|danxuan2|danxuan3" swordFormName="danx"/>
<input name="danx" value="" hidden/>


<!-- radio 参数从后台拉取 -->
<div sun-param-id="paramkey"></div>
后台返回的json数据为
{
    field:[{
            fldname:'单选1',     //选项的中文名称
            fldvalue:'1',        //选项对应的key值
        },
        {
            fldname:'单选2',     //选项的中文名称
            fldvalue:'2',        //选项对应的key值
        },
        {
            fldname:'单选3',     //选项的中文名称
            fldvalue:'3',        //选项对应的key值
        } 
        ],
    default:'1'
    paramId:paramkey,
    paramType:'radio'
    name:'testradio'
}

<!-- checkbox 参数从后台拉取 -->
<div sun-param-id="paramkey"></div>
后台返回的json数据为
{
    field:[{
            fldname:'多选1',     //选项的中文名称
            fldvalue:'1',        //选项对应的key值
            isdefault:'false'
        },
        {
            fldname:'多选2',     //选项的中文名称
            fldvalue:'2',        //选项对应的key值
            isdefault:'true'
        },
        {
            fldname:'多选3',     //选项的中文名称
            fldvalue:'3',        //选项对应的key值
            isdefault:'true'
        } 
        ],
    paramId:paramkey,
    paramType:'check'
    name:'testcheck'
}

<!-- filter form表单  -->
<!-- 使用方法见inputTag说明  -->
<sword:input id="money"  placeholder="请输入金额" filter="toThousands" filterMethord="html" filterTarget="div_money"/>
<div id="div_money"></div>


<!-- filter list-table表单  -->
<!-- 使用方法见dataTable说明  -->
<sword:listTable id="table_sword_info">
  <tr>
    <th data-columns="Name"  width="120px">Name</th>
    <th data-columns="Position" data-columns-align="left">Position</th>
    <th data-columns="Office" data-columns-align="left" width="80px">Office</th>
    <th data-columns="Start_date" width="60px">Start_date</th>
    <th data-columns="Extn"  width="60px" filter="isBetween|Extn,'1000','5000'">Extn</th>
    <th data-columns="Extn"  width="60px">Extn</th>
  </tr>
</sword:listTable>