信息块

简介

信息块控件提供一种新的方式，可以用来显示一个集合数据，也可以进行数据的维护，它区别于信息块，提供了一种更加扁平化的显示和录入方式，更加贴近于互联网风格。提供了动态元数据解析，分页，基本的增删改查，序号维护，格式化显示，VIEW和EDIT之间的切换，多种展现方式，和信息块之间的切换等诸多功能。

使用方法

1. 静态框架使用方法仅EAS7.5版本

<wafctrl:infoBlock id="id" name="name" />

2. JS动态创建EAS8.0+

var options = {
	title:'infoBlock' ,id:'infoBlock',name:"infoBlockName",
	afterCreateSwitcher:null,
	afterInsertRow:null,afterProcessRowButtonMeta:null,afterProcessRowContentMeta:null,afterRefreshIndex:null,
	beforeProcessing:null,beforeRequest:null,data:"系统提供",datatype:"local",height:"",
	hidden:false,initStatus:"view",loadComplete:null,loadInit:true,multiselect:false,
	pager:true,pagerModel:"block",rowNum:"1",rowTitle:false,rowTitleTemplate:"分录{0}",seq:false,
	seqSave:false,serializeGridData:null,style:"",switcher:false,tagClass:""		
}; 
var rowMeta={
"id":options.id,
"componentType":"com.kingdee.bos.ctrl.web.InfoBlock",
"parent":"result",
"parentEl":"result",
"properties":{},
"childrens":[
    {
    	"buttonPanel":{
            "id":"buttonPanel",
            "parent":"entry",
            "parentEl":"entry",
            "properties":{},
            "childrens":[
                {
                    "id":"addNew",
                    "componentType":"com.kingdee.bos.ctrl.web.Button",
                    "parent":"buttonPanel",
                    "parentEl":"buttonPanel",
                    "properties":{"id":"addNew", "caption":"新增",  "onclick":"addRow", tagClass:"btn",iconCls:"ui-icon-add"},
                    "childrens":[]
                }
            ]
        },
        "rowButtonPanel":{
            "id":"rowButtonPanel",
            "parent":"entry",
            "parentEl":"entry",
            "properties":{},
            "childrens":[]
        },
        "rowObject":{
            "id":"rowObject",
            "parent":"entry",
            "parentEl":"entry",
            "properties":{},
            "childrens":[
                {"id":"section_gridLayoutPanel", "componentType":"com.kingdee.bos.ctrl.web.GridLayoutPanel", "parent":"rowObject", "parentEl":"rowObject", "properties":{"id":"section_gridLayoutPanel", "cols":3, "rows":1}, "childrens":[
                    {"id":"section_gridLayoutPanel_0_0", "componentType":"com.kingdee.bos.ctrl.web.GridLayoutCell", "parent":"section_gridLayoutPanel", "parentEl":"section_gridLayoutPanel", "properties":{"id":"section_gridLayoutPanel_0_0", "startRow":1, "endRow":1, "startCol":1, "endCol":1}, "childrens":[
                        {"id":"labelsection_client_id", "componentType":"com.kingdee.bos.ctrl.web.LabelContainer", "parent":"section_gridLayoutPanel_0_0", "parentEl":"section_gridLayoutPanel_0_0", "properties":{"id":"labelsection_client_id", "labelPosition":"right", "caption":"客户"}, "childrens":[
                            {"id":"section_client_id", "componentType":"com.kingdee.bos.ctrl.web.TextField", "field":"client_id", "parent":"labelsection_client_id", "parentEl":"labelsection_client_id_ctrl", "properties":{"id":"section_client_id", "title":"客户"}, "childrens":[]}
                        ]}
                    ]}
                ]}
            ]
        }
    }
]};

options.rowMeta = rowMeta;
options.data = [ 
			{"invid":1820,"id":"testId","amount":135,"client_id":2052,"invdate":"2011-10-03 00:00:00","note":"This is record 641","total":1429,"tax":685,"status":1,"personid":null,"net":0,"clienttype":"old","birthdayTime":"23:56:59"}
		];

var infoDOM = waf.createDOM("infoBlock", options);
waf.appendDOM($("body"), infoDOM);
waf.initComponent("infoBlock", options, infoDOM);

3. 通用DOM创建EAS7.5+

<div id="entry"></div>
waf("#entry").wafInfoBlock(options);

4. 方法&事件使用EAS7.5+

//调用方法
waf("#id").wafInfoBlock('method', parameter...);
//eg:更改事件
waf("#id").wafInfoBlock("options","onchange",fn);

属性说明

id String 缺省值: 无 EAS7.5+

定义信息块的id.(必填)

width String 缺省值: auto EAS7.5+

定义信息块的宽度.

height String 缺省值: auto EAS7.5+

定义信息块的高度.

tagClass String 缺省值: tagClass EAS7.5+

定义信息块样式类，可以添加一个或多个.

style String 缺省值: 空 EAS7.5+

定义信息块的样式.

loadInit 类型：Boolean 缺省值: true EAS7.5+

定义初始化时是否自动装载数据。
如果初始化时不自动装载数据，一般在initalizeAction中手动调用waf(“#list2”).wafInfoBlock(“reload”)来装载数据.

mtype 类型：String 缺省值: get EAS7.5+

定义请求方式，值为：post或get.

datatype 类型：String 缺省值: local EAS7.5+

定义信息块的数据源格式，有两种方式，分别为json和local. json要求url必须存在，会从对应的url获取数据。local为定义在客户端的数组数据，比如分录信息块。如果没有必要从后台请求数据，则使用local方式.

multiselect 类型：Boolean 缺省值: false EAS7.5+

定义是否可以被多选，多选时按住ctrl键来多选.

postData 类型：Array 缺省值: 空数组 EAS7.5+

设置直接通过url传递到服务器的参数. 本属性的调用方式是传递一个形如{name1:value,name2:value2…}的数组.

url 类型：String 缺省值: 空 EAS7.5+

定义请求的URL地址.

data 类型：Array 缺省值: 空 EAS7.5+

定义当datatype为local时，信息块加载数据的数据源对象，为一个数组.

seq 类型：Boolean 缺省值: false EAS7.5+

如果定义为true，则会在信息块的左边增加序号.

seqSave 类型：Boolean 缺省值: true EAS7.5+

如果定义为true，在保存时调用方法getRowData和getData时，会将序号返回到数据模型中.

seqProp 类型：String 缺省值: seq EAS7.5+

定义序号对应的Info对象属性，如果序号需要保存，一般这个属性需要设置，默认为seq.

rowMeta 类型：JSON对象缺省值: {} EAS7.5+

信息块展示时需要的元数据信息，控件会根据这些元数据信息动态的创建行、行按钮区域和信息块脚注区域等。信息块的rowMeta对象中包含了三个部分，分别是rowButtonPanel，rowObject，footerPanel. rowButtonPanel和rowObject会随着新增行进行循环，footerpanle为信息块本身定义的辅助区域，一般放置按钮，比如新增按钮.

信息块展示时是否需要分页，默认不分页,分页提供两种展现方式，一种是普通的分页，另外一种是加载更多，一直往页面下方加载.

rowNum 类型：Number 缺省值: 10 EAS7.5+

默认每页显示多少行.

rowTitle 类型：Boolean 缺省值: false EAS7.5+

是否显示每行的标题，如果设置为true，则会根据定义的rowTitleTemplate来显示行标题.

rowTitleTemplate 类型：String 缺省值: “” EAS7.5+

当行标题显示的时候，定义行标题显示的内容.

key 类型：String 缺省值: “id” EAS7.5+

定义那个属性为每行数据对应的主键，默认为id.

hidden 类型：Boolean 缺省值: false EAS7.5+

规定信息块为隐藏状态，默认值为false.

viewDisplayType 类型：String 缺省值: “wordonly” EAS7.5+

当view状态显示时，显示的方式，可以只显示文字，也可以显示为禁用状态.

entryProp 类型：Boolean 缺省值: “entrys” EAS7.5+

分录在info对象中对应的属性名，默认为entrys，一个界面有多个分录时，必须设置这个属性.

saveWhenSubmit 类型：Boolean 缺省值: true EAS7.5+

信息块提供了两种保存方式，此参数控制是否Form提交时自动的将信息块的参数作为JSON数据传递到后台. 如果参数为true，则信息块会自动的创建一个hidden域加入到form中，hidden的name为entryProp属性对应的值. 此时hidden域中存放的JSON数据为分录中的所有值.

cell 类型：Boolean 缺省值: false EAS7.5+

以cell的方式进行展现.

cellGap 类型：Boolean 缺省值: false EAS7.5+

cell之间存在间隙，使用列布局来实现目的.

pgbuttons 类型：Integer 缺省值: 5 EAS7.5+

数据展示分页后，显示的页数（建议最好为奇数）.

move 类型：Object 缺省值:null EAS7.5+

是否显示序号旁边的上移、下移.如果不为null，则显示.

方法说明

option 参数: (property[,value]) 返回值类型: any EAS7.5+

获得或设置显示信息块/可编辑信息块某属性的值，当value参数存在时，设置控件的property属性值，且无返回值，否则返回控件的property属性值.

参数说明:
- property 必要参数，信息块控件的属性
- value 可选参数，信息块控件的属性值
返回值说明:
- 当value参数不存在时，有返回值，该返回值为与property对应的属性值，可以是任意类型的javascript对象。

reload 参数: 无返回值类型: 无 EAS7.5+

刷新信息块，内容重新加载.

参数说明:
- 无
返回值说明:
- 无

getDataIDs 参数: 无返回值类型: 无 EAS7.5+

获取所有行id.

参数说明:
- 无
返回值说明:
- 无

clearData 参数: 无返回值类型: 无 EAS7.5+

清除数据.

参数说明:
- 无
返回值说明:
- 无

getCurrentRowId 参数: 无返回值类型: 无 EAS7.5+

获取当前选中行的id.

参数说明:
- 无
返回值说明:
- 无

getCurrentSeq 参数: 无返回值类型: 无 EAS7.5+

获取当前选中行的索引.

参数说明:
- 无
返回值说明:
- 无

setData 参数: (data) 返回值类型: 无 EAS7.5+

设置数据集合.

参数说明:
- data 数组：[{name:”test”,value:”testValue”}]形式
返回值说明:
- 无

getData 参数: 无返回值类型: 无 EAS7.5+

获取数据集合.

参数说明:
- 无
返回值说明:
- 无

addRow 参数: (data) 返回值类型: 无 EAS7.5+

新增行.

参数说明:
- data json格式的字符串：{name:”test”,value:”testValue”}
返回值说明:
- 无

addRow 参数: (data,pos) 返回值类型: 无 EAS7.5+

插入行.

参数说明:
- data json格式的字符串：{name:”test”,value:”testValue”}
- pos 索引值
返回值说明:
- 无

getSeq 参数: (rowId) 返回值类型: 无 EAS7.5+

根据行id获取序号.

参数说明:
- rowId 行id
返回值说明:
- 无

getRowId 参数: (seq) 返回值类型: 无 EAS7.5+

根据序号获取行id.

参数说明:
- seq 序号
返回值说明:
- 无

delRow 参数: (rowId) 返回值类型: 无 EAS7.5+

根据行id删除行.

参数说明:
- rowId 行id
返回值说明:
- 无

getRowIndex 参数: (rowId) 返回值类型: 无 EAS7.5+

根据行id获取控件索引.

参数说明:
- rowId 行id
返回值说明:
- 无

getRowData 参数: (rowId) 返回值类型: 无 EAS7.5+

获取行数据.

参数说明:
- rowId 行id
返回值说明:
- 无

setRowData 参数: (rowId,data) 返回值类型: 无 EAS7.5+

获取行数据.

参数说明:
- rowId 行id
- data json格式的字符串：{name:”test”,value:”testValue”}
返回值说明:
- 无

setSelection 参数: (rowId) 返回值类型: 无 EAS7.5+

选中某行.

参数说明:
- rowId 行id，可以为单个行id；或者为数组的形式：[“id1”,”id2”]
返回值说明:
- 无

removeSelection 参数: (rowId) 返回值类型: 无 EAS7.5+

选中某行.

参数说明:
- rowId 行id，可以为单个行id；或者为数组的形式：[“id1”,”id2”]
返回值说明:
- 无

setFieldValue 参数: (rowId,field,value) 返回值类型: 无 EAS7.5+

设置某行某个控件的值.

参数说明:
        - rowId 行id
        - field 控件属性名
        - value 控件值
返回值说明:
- 无

getFieldValue 参数: (rowId,field) 返回值类型: 无 EAS7.5+

获得某行某个控件的值.

参数说明:
- rowId 行id
- field 控件属性名
返回值说明:
- 无

getFieldValues 参数: (field) 返回值类型: 无 EAS7.5+

得到所有行中某个属性的值.

参数说明:
- field 控件属性名
返回值说明:
- 无

getFieldValues 参数: (field,methodOpr) 返回值类型: 无 EAS7.5+

合计所有行中某个属性的值.

参数说明:
- field 控件属性名
- methodOpr 方法：”sum” – 求合计，”avg” – 求平均值，”count” – 统计个数，”min” –求最小值，”max” – 求最大值
返回值说明:
- 无

edit 参数: 无返回值类型: 无 EAS7.5+

切换为编辑状态.

参数说明:
- 无
返回值说明:
- 无

view 参数: (rowId,type) 返回值类型: 无 EAS7.5+

切换为查看状态.

参数说明:
- rowId 行id；如果为undefined，则设置所有行属性
返回值说明:
- type 有2个值：”wordonly” – 查看状态，只显示文字；”disable” – 查看状态，不可编辑

事件说明

beforeRequest 参数: (无) EAS7.5+

事件在开始请求数据之前触发，如果事件返回false，不会发起远程请求，此事件调用时还未发送ajax请求

参数说明:
- 无

beforeProcessing 参数: (data, status, xhr) EAS7.5+

刚从服务器端返回的数据还未处理之前触发.
注意：数据会依据datatype的类型来格式化，如果是local，则数据是一个Javascript对象

参数说明:
        - data 请求传回来的数据
        - status 返回状态信息
        - xhr ajax请求对象

loadComplete 参数: (data) EAS7.5+

当从服务器端返回数据并装载完成后触发

参数说明:
        - data 装载完成后的表格相关数据,data是个对象，包括以下四个属性:
            - page 当前页码
            - records 总记录数
            - rows 行数据，是一个数组
            - userdata 用户自定义数据

afterInsertRow 参数: (rowid,rowdata,rowelem) EAS7.5+

在每行记录被插入后触发. 注意：在gridview设置为true时，该事件不会触发

参数说明:
        - rowid 插入行的id
        - rowdata 当前行对应的数据，只包含了表格列对应的数据
        - rowelem 是从服务器返回的元素

serializeGridData 参数: (postData) EAS7.5+

设置发送ajax请求时的序列化数据，返回值是序列化后的数据。如果想加自定义的参数传递到后台，可以使用这个函数

参数说明:
- postData 传递到后台的相关数据，默认包括page,rows,sidx,sord等参数
返回值说明:
- 此回调必须有返回值。如果返回undefined,则不再请求数据

afterProcessRowContentMeta 参数: (rowObjectMeta,index) EAS7.5+

在处理好行对象的元数据之后，准备调用动态渲染前触发，可以在之前修改元数据的内容

参数说明:
- rowObjectMeta 修改了id之后的元数据
- index 控件索引
返回值说明:
- 此回调必须有返回值。如果返回undefined,则不再创建行对象

afterProcessRowButtonMeta 参数: (buttonMeta,index) EAS7.5+

在处理好行对象的按钮区域元数据之后，准备调用动态渲染前触发，可以在之前修改行对象的按钮区域元数据的内容

参数说明:
- buttonMeta 修改了id之后的元数据
- index 控件索引
返回值说明:
- 此回调必须有返回值。如果返回undefined,则不再创建行对象中的按钮

afterRefreshIndex 参数: (seq,rowElem) EAS7.5+

在更改行序号时，调用此回调函数，可以在这里更改行标题等

参数说明:
- seq 行序号，从0开始
- rowElem 当前行的HTML元素

信息块

简介