信息块控件提供一种新的方式,可以用来显示一个集合数据,也可以进行数据的维护,它区别于信息块,提供了一种更加扁平化的显示和录入方式,更加贴近于互联网风格。 提供了动态元数据解析,分页,基本的增删改查,序号维护,格式化显示,VIEW和EDIT之间的切换,多种展现方式,和信息块之间的切换等诸多功能。
<wafctrl:infoBlock id="id" name="name" />
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);
<div id="entry"></div>
waf("#entry").wafInfoBlock(options);
//调用方法
waf("#id").wafInfoBlock('method', parameter...);
//eg:更改事件
waf("#id").wafInfoBlock("options","onchange",fn);
定义信息块的id.(必填)
定义信息块的宽度.
定义信息块的高度.
定义信息块样式类,可以添加一个或多个.
定义信息块的样式.
定义初始化时是否自动装载数据。
如果初始化时不自动装载数据,一般在initalizeAction中手动调用waf(“#list2”).wafInfoBlock(“reload”)来装载数据.
定义请求方式,值为:post或get.
定义信息块的数据源格式,有两种方式,分别为json和local. json要求url必须存在,会从对应的url获取数据。local为定义在客户端的数组数据,比如分录信息块。如果没有必要从后台请求数据,则使用local方式.
定义是否可以被多选,多选时按住ctrl键来多选.
设置直接通过url传递到服务器的参数. 本属性的调用方式是传递一个形如{name1:value,name2:value2…}的数组.
定义请求的URL地址.
定义当datatype为local时,信息块加载数据的数据源对象,为一个数组.
如果定义为true,则会在信息块的左边增加序号.
如果定义为true,在保存时调用方法getRowData和getData时,会将序号返回到数据模型中.
定义序号对应的Info对象属性,如果序号需要保存,一般这个属性需要设置,默认为seq.
信息块展示时需要的元数据信息,控件会根据这些元数据信息动态的创建行、行按钮区域和信息块脚注区域等。信息块的rowMeta对象中包含了三个部分,分别是rowButtonPanel,rowObject,footerPanel. rowButtonPanel和rowObject会随着新增行进行循环,footerpanle为信息块本身定义的辅助区域,一般放置按钮,比如新增按钮.
信息块展示时是否需要分页,默认不分页,分页提供两种展现方式,一种是普通的分页,另外一种是加载更多,一直往页面下方加载.
默认每页显示多少行.
是否显示每行的标题,如果设置为true,则会根据定义的rowTitleTemplate来显示行标题.
当行标题显示的时候,定义行标题显示的内容.
定义那个属性为每行数据对应的主键,默认为id.
规定信息块为隐藏状态,默认值为false.
当view状态显示时,显示的方式,可以只显示文字,也可以显示为禁用状态.
分录在info对象中对应的属性名,默认为entrys,一个界面有多个分录时,必须设置这个属性.
信息块提供了两种保存方式,此参数控制是否Form提交时自动的将信息块的参数作为JSON数据传递到后台. 如果参数为true,则信息块会自动的 创建一个hidden域加入到form中,hidden的name为entryProp属性对应的值. 此时hidden域中存放的JSON数据为分录中的所有值.
以cell的方式进行展现.
cell之间存在间隙,使用列布局来实现目的.
数据展示分页后,显示的页数(建议最好为奇数).
是否显示序号旁边的上移、下移.如果不为null,则显示.
获得或设置显示信息块/可编辑信息块某属性的值,当value参数存在时,设置控件的property属性值,且无返回值,否则返回控件的property属性值.
刷新信息块,内容重新加载.
获取所有行id.
清除数据.
获取当前选中行的id.
获取当前选中行的索引.
设置数据集合.
获取数据集合.
新增行.
插入行.
根据行id获取序号.
根据序号获取行id.
根据行id删除行.
根据行id获取控件索引.
获取行数据.
获取行数据.
选中某行.
选中某行.
设置某行某个控件的值.
获得某行某个控件的值.
得到所有行中某个属性的值.
合计所有行中某个属性的值.
切换为编辑状态.
切换为查看状态.
事件在开始请求数据之前触发,如果事件返回false,不会发起远程请求,此事件调用时还未发送ajax请求
刚从服务器端返回的数据还未处理之前触发.
注意:数据会依据datatype的类型来格式化,如果是local,则数据是一个Javascript对象
当从服务器端返回数据并装载完成后触发
在每行记录被插入后触发. 注意:在gridview设置为true时,该事件不会触发
设置发送ajax请求时的序列化数据,返回值是序列化后的数据。如果想加自定义的参数传递到后台,可以使用这个函数
在处理好行对象的元数据之后,准备调用动态渲染前触发,可以在之前修改元数据的内容
在处理好行对象的按钮区域元数据之后,准备调用动态渲染前触发,可以在之前修改行对象的按钮区域元数据的内容
在更改行序号时,调用此回调函数,可以在这里更改行标题等