信息块

简介

信息块控件提供一种新的方式,可以用来显示一个集合数据,也可以进行数据的维护,它区别于信息块,提供了一种更加扁平化的显示和录入方式,更加贴近于互联网风格。 提供了动态元数据解析,分页,基本的增删改查,序号维护,格式化显示,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为信息块本身定义的辅助区域,一般放置按钮,比如新增按钮.

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

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

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元素

样例集合

  1. 基本案例:
  2. 普通分页加载:
  3. 更多分页加载:
  4. 鼠标滚动加载:
  5. 多展现方式:
  6. 动态化信息块: