数据展示

简介

    数据展示控件(DataView)提供一种新的展示方式，可以用来显示本地数据或者远程数据，提供了模板的定义与解析，多种分页功能，序号的处理，多种展现方等功能。
    本控件利用模板来将展示与逻辑进行分离，控件本身的HTML结构不再是固定的，可以通过定义模板来修改DataView本身的HTML结构，但必须遵守一定的规范。同时还可以通过定义每行的模板，来使得DataView的显示多样化。

使用方法

1. 静态框架使用方法仅EAS7.5版本
<wafctrl:dataView id="id" name="name" />
2. JS动态创建EAS8.0+
页面div需要加入行模板代码，即
<body>
  <script id="testdataview" type="text/html">
    <div class='row' seq='' index='' id=''>
		<span class='seq'>
			<span class='rowNum'>
			</span>
			<span class='move'>
				<span class='up'></span>
				<span class='down'></span>
			</span>
		</span>
        <div class='rowContent' id='_r_'>
            <div class='rowCtrls' id='_rcs_'>
                <table class="table-default">
                    <tr>
                        <td width="30%">
                            <span>测试：</span>
                        </td>
                    </tr>
                </table>
            </div>
            <div class='rowButtons'>
                <a href='javascript:void(null)' class='editRow hide-text btn-edit'></a>
            </div>
        </div>
    </div>
  </script>
</body>
再创建展示类：
var options = {
	title:'dataView' ,id:'dataView',name:"dataViewName",
	afterCreateSwitcher:null,
	rowTemplate:$("#testdataview").html(),seqProp:'seq',
	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:"",
	cell:false,
	cellGap:false,
	move:null
}; 
var rowMeta={
    "id":options.id,
    "componentType":"com.kingdee.bos.ctrl.web.dataView",
    "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":"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 dom = waf.createDOM("dataView", options);
waf.appendDOM(waf("body"), dom);
waf.initComponent("dataView", options, dom);
3. 通用DOM创建EAS8.0+
<input id="id" name="number" type="text" class="enter2tab ui-dataView form" ctrlrole="dataView" aria-disabled="false" style="" tabindex="0">
<!--DOM创建好之后，使用js初始化控件-->
waf.initComponent("dataView", options, dom);
4. 方法&事件使用EAS7.5+
//调用方法
waf("#id").wafDataView('method', parameter...);
//eg:更改事件
waf("#id").wafDataView("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.

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

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

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

默认每页显示多少行.

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

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

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

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

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”]
  • 返回值说明:
            - 无

事件说明

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,则不再请求数据

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

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

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

样例集合

  1. 基本案例:
  2. 普通分页加载:
  3. 更多分页加载:
  4. 鼠标滚动加载:
  5. 综合案例:
  6. 信息块编辑: