数据表格 Datagrid

Constructor

Implements: Widget

Tutorials: 控件对象使用快速入门

可设置的属性

出于效率等方面的原因，本控件绝大部分属性均不支持动态设置，仅能通过模板设置一次

Name	Type	Default	Description
name	String		控件的名字，唯一标志
title	String		控件title
hidden	Boolean		隐藏
value	Array		数据集合
readonly	Boolean		只读
toolbar	String		设置启用工具按钮
bindWindow_url	String		绑定弹出框页面的URL
checkbox	Boolean		增加一列复选框
mulitSelect	Boolean	false	是否多选
url	String		数据URL
pagination	Boolean		启用分页
pageSize	Number		每页数据
height	Number		高度
footer	Boolean		启用表格footer
footerData	Object｜Array		footer的数据
preset	Number		预置空行
hideToolbar	Boolean		是否隐藏顶部工具栏
lineRemoveButton	Boolean		启用行号删除按钮
oncs	Boolean		选择行和勾选行联动
pageNoField	String		页码field
pageSizeField	String		每页数量field
initNotLoad	Boolean		初始化不加载数据
loadDataNotAutoSize	Boolean		阻止载入数据自动计算列宽
hideRownumber	Boolean		隐藏行号
showPageList	Boolean		分页显示pageSizeList
pageList	Array.<Number>｜String		pageSizeList的候选数量
pageLayout	Array.<Number>｜String		分页布局

可读取的属性

Name	Type	Description
name	String	控件的名字，唯一标志
title	String	控件title
hidden	Boolean	隐藏
value	Array	数据集合
readonly	Boolean	只读
toolbar	String	设置启用工具按钮
bindWindow_url	String	绑定弹出框页面的URL
checkbox	Boolean	增加一列复选框
mulitSelect	Boolean	是否多选
url	String	数据URL
pagination	Boolean	启用分页
pageSize	Number	每页数据
height	Number	高度
footer	Boolean	启用表格footer
footerData	Object｜Array	footer的数据
preset	Number	预置空行
hideToolbar	Boolean	是否隐藏顶部工具栏
lineRemoveButton	Boolean	启用行号删除按钮
oncs	Boolean	选择行和勾选行联动
pageNoField	String	页码field
pageSizeField	String	每页数量field
initNotLoad	Boolean	初始化不加载数据
loadDataNotAutoSize	Boolean	阻止载入数据自动计算列宽
hideRownumber	Boolean	隐藏行号
showPageList	Boolean	分页显示pageSizeList
pageList	Array.<Number>	pageSizeList的候选数量
pageLayout	Array.<Number>	分页布局

方法

validate

Description： 执行校验

Name	Type	Description
调用参数		无
返回值	Boolean	校验是否成功

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
var result = widget.doMethod('validate');

intoView

Description： 把控件移动到页面可视范围

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.doMethod('intoView');

addValidator

Description： 增加校验器

调用参数

Name	Type	Description
validator	Object	校验器对象

返回值： 无

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
//通过api增加必填校验器
widget.doMethod('addValidator' , vjsp.Validators.get(
    'required',
    [],
    widgetLang.validate.required
));

removeValidator

Description： 删除校验器

调用参数

Name	Type	Description
name	String	校验器名称

返回值： 无

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
//删除必填校验
widget.doMethod('removeValidator' , 'required');

showValidateMsg

Description： 显示校验信息,多用于自定义校验器的开发

调用参数

Name	Type	Description
msg	String	提示信息

返回值： 无

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
//提示不能为空
widget.doMethod('showValidateMsg' , '控件不能为空');

hideValidateMsg

Description： 隐藏校验信息，多用于自定义校验器的开发

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.doMethod('hideValidateMsg');

insertRow

Description： 插入一行

调用参数

Name	Type	Description
index	Number	插入位置
rowData	Object	行数据

返回值： 无

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.doMethod('insertRow' , 2 , {column1:'cell1' , column2:'cell2'});

appendRow

Description： 追加一行

调用参数

Name	Type	Description
rowData	Object	行数据

返回值： 无

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.doMethod('appendRow' , {column1:'cell1' , column2:'cell2'});

deleteRow

Description： 删除一行

调用参数

Name	Type	Description
index	Number	行号,0开始

返回值： 无

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.doMethod('deleteRow' , 2);

selectRow

Description： 选中一行

调用参数

Name	Type	Description
index	Number	行号,0开始

返回值： 无

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.doMethod('selectRow' , 2);

unselectRow

Description： 取消选中一行

调用参数

Name	Type	Description
index	Number	行号,0开始

返回值： 无

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.doMethod('unselectRow' , 2);

selectAll

Description： 全部选中

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.doMethod('selectAll');

unselectAll

Description： 全部取消选中

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.doMethod('unselectAll');

getSelected

Description： 获取所有选中行。单选下 返回一行数据 或 null，多选下 返回数组。

返回值：Object｜Array.<Object> mulitSelect设置为可以多选时返回数组 否则返回一行的数据对象

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
var selected = widget.doMethod('getSelected');

checkRow

Description： 勾选一行

调用参数

Name	Type	Description
index	Number	行号,0开始

返回值： 无

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.doMethod('checkRow' , 2);

uncheckRow

Description： 取消勾选一样

调用参数

Name	Type	Description
index	Number	行号,0开始

返回值： 无

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.doMethod('uncheckRow' , 2);

checkAll

Description： 全部勾选

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.doMethod('checkAll');

uncheckAll

Description： 全部取消勾选

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.doMethod('uncheckAll');

getChecked

Description： 获取勾选的行

返回值：Array.<Object> 返回勾选的数据对象集合 没勾选时空数组

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
var checked = widget.doMethod('getChecked');

fullScreen

Description： 全屏显示

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.doMethod('fullScreen');

restore

Description： 从全屏恢复

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.doMethod('restore');

getIndexByRowData

Description： 通过行数据获取行号

调用参数

Name	Type	Description
rowData	Object	表格行数据对象，必须是从表格对象中获取的

返回值： 无

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
//这里rowData必须从表格对象中获取的 而不是一个新定义的对象
var index = widget.doMethod('getIndexByRowData' , rowData);

getRowDataByIndex

Description： 通过行号获取数据

调用参数

Name	Type	Description
index	Number	行号,0开始

返回值： 无

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
var rowData = widget.doMethod('getRowDataByIndex' , 2);

getDataByField

Description： 通过field获取一列的数组集合

调用参数

Name	Type	Description
field	String	列名

返回值： Array 一列数据的集合

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
var data = widget.doMethod('getDataByField' , 'column1');

getCellValue

Description： 获取单元格的值

调用参数

Name	Type	Description
index	Number	行号,0开始
field	String	列名

返回值： Array 单元格的值

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
var cellVal = widget.doMethod('getCellValue' , 2 , 'column1');

refreshRow

Description： 刷新行

调用参数

Name	Type	Description
index	Number	行号,0开始

返回值： 无

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.doMethod('refreshRow' , 2);

resize

Description： 重新计算大小

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.doMethod('resize');

updateRow

Description： 更新行

调用参数

Name	Type	Description
val	Object	更新参数对象，包括索引(index)和行数据(row),数据格式参考调用举例

返回值： 无

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.doMethod('updateRow' , {
    index : 2,
    row : {
        column1 : 'cellvalue1'
    }
});

reloadData

Description： 重新载入数据

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.doMethod('reloadData');

resetPagination

Description： 分页重置

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.doMethod('resetPagination');

toPage

Description： 跳转到页

调用参数

Name	Type	Description
pageNo	Number	页码

返回值： 无

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.doMethod('toPage' , 2);

hideColumn

Description： 隐藏指定列

调用参数

Name	Type	Description
column	String	列名

返回值： 无

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.doMethod('hideColumn' , 'column1');

showColumn

Description： 显示指定列

调用参数

Name	Type	Description
column	String	列名

返回值： 无

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.doMethod('showColumn' , 'column1');

mergeCells

Description： 合并单元格

调用参数

Name	Type	Description
column	Number	起始行号
field	String	起始列名
rowspan	Number	横向合并数量
colspan	Number	纵向合并数量

返回值： 无

调用举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.doMethod('mergeCells' , 0 , 'column1' , 2 , 2);

事件

load

Description： 载入数据（多用于处理原始数据到符合表格数据格式的数据）

回调函数参数

Name	Type	Description
dataRef	Object	dataRef.data1为原始数据 dataRef.data2 为处理后数据

绑定举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.on('load' , function(dataRef){
    //这里原始数据默认为vjsp后端分页格式数据 
    //clone data
    dataRef.data2 = $.exntend(true ,  , dataRef.data1);
    //给每条数据加一个exval字段
    for(var i=0 ; i<dataRef.data2.list.length ; i++){
        dataRef.data2.list[i].exval = 'by load event';
    }
});

loaded

Description： 载入数据完成

回调函数参数

Name	Type	Description
data	Object	载入的数据（如果在load事件更改，则此处事更改后的数据）

绑定举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.on('loaded' , function(data){
    vjsp.alert('数据载入完成!');
});

clickRow

Description： 单击行

回调函数参数

Name	Type	Description
rowIndex	Number	行索引
rowData	Object	行数据

绑定举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.on('clickRow' , function(rowIndex , rowData){
    vjsp.alert('单击 '+rowIndex+' 行');
});

clickCell

Description： 单击单元格

回调函数参数

Name	Type	Description
rowIndex	Number	行索引
column	String	列名
value	Any	单元格的值

绑定举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.on('clickCell' , function(rowIndex , column , value){
    vjsp.alert('单元格值：'+value);
});

dblClickRow

Description： 双击行

回调函数参数

Name	Type	Description
rowIndex	Number	行索引
rowData	Object	行数据

绑定举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.on('dblClickRow' , function(rowIndex , rowData){
    vjsp.alert('双击 '+rowIndex+' 行');
});

dblClickCell

Description： 双单击单元格

回调函数参数

Name	Type	Description
rowIndex	Number	行索引
column	String	列名
value	Any	单元格的值

绑定举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.on('dblClickCell' , function(rowIndex , column , value){
    vjsp.alert('单元格值：'+value);
});

beforeSelect

Description： 选择前事件

回调函数参数

Name	Type	Description
rowIndex	Number	行索引
rowData	Object	行数据

返回值： Boolean this.returnValue=false 阻止选择

绑定举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.on('beforeSelect' , function(rowIndex , rowData){
    //偶数行不允许选择
    if(rowIndex%2 == 0){
        this.returnValue = false;
    #125;
});

select

Description： 选中一行

回调函数参数

Name	Type	Description
rowIndex	Number	行索引
rowData	Object	行数据

绑定举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.on('select' , function(rowIndex , rowData){
    vjsp.alert('选择：'+rowIndex+' 行');
});

beforeUnselect

Description： 取消选中前事件

回调函数参数

Name	Type	Description
rowIndex	Number	行索引
rowData	Object	行数据

返回值： Boolean this.returnValue=false 阻止取消选中

绑定举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.on('beforeUnselect' , function(rowIndex , rowData){
    //偶数行不允许取消选中
    if(rowIndex%2 == 0){
        this.returnValue = false;
    #125;
});

unselect

Description： 取消选中一行

回调函数参数

Name	Type	Description
rowIndex	Number	行索引
rowData	Object	行数据

绑定举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.on('unselect' , function(rowIndex , rowData){
    vjsp.alert('取消选中：'+rowIndex+' 行');
});

selectAll

Description： 全部选中 绑定举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.on('selectAll' , function(){
    vjsp.alert('全部选中');
});

unselectAll

Description： 全部取消选 绑定举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.on('unselectAll' , function(){
    vjsp.alert('全部取消选中');
});

beforeCheck

Description： 勾选前事件

回调函数参数

Name	Type	Description
rowIndex	Number	行索引
rowData	Object	行数据

返回值： Boolean this.returnValue=false 阻止取消勾选

绑定举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.on('beforeCheck' , function(rowIndex , rowData){
    //偶数行不允许勾选
    if(rowIndex%2 == 0){
        this.returnValue = false;
    #125;
});

check

Description： 勾选一行

回调函数参数

Name	Type	Description
rowIndex	Number	行索引
rowData	Object	行数据

绑定举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.on('check' , function(rowIndex , rowData){
    vjsp.alert('勾选：'+rowIndex+' 行');
});

beforeUncheck

Description： 取消勾选前事件

回调函数参数

Name	Type	Description
rowIndex	Number	行索引
rowData	Object	行数据

返回值： Boolean this.returnValue=false 阻止取消勾选

绑定举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.on('beforeUncheck' , function(rowIndex , rowData){
    //偶数行不允许取消勾选
    if(rowIndex%2 == 0){
        this.returnValue = false;
    #125;
});

uncheck

Description： 取消勾选一行事件

回调函数参数

Name	Type	Description
rowIndex	Number	行索引
rowData	Object	行数据

绑定举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.on('uncheck' , function(rowIndex , rowData){
    vjsp.alert('取消勾选：'+rowIndex+' 行');
});

checkAll

Description： 全部勾选事件 绑定举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.on('checkAll' , function(){
    vjsp.alert('全部勾选');
});

uncheckAll

Description： 全部取消勾选事件 绑定举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.on('uncheckAll' , function(){
    vjsp.alert('全部取消勾选');
});

appendRow

Description： 追加行事件(用于修改append数据)

回调函数参数

Name	Type	Description
rowData	Object	新增数据

绑定举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.on('appendRow' , function(rowData){
    //增加exval字段
    rowData.exval = 'from appendRow event';
});

beforeEdit

Description： 编辑前

回调函数参数

Name	Type	Description
rowIndex	Number	行索引
column	String	列名
rowData	Object	行数据

返回值： Boolean this.returnValue=false 阻止编辑

绑定举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.on('beforeEdit' , function(rowIndex , column , rowData){
    //偶数行不允许编辑
    if(rowIndex%2 == 0){
        this.returnValue = false;
    #125;
});

afterEdit

Description： 编辑后

回调函数参数

Name	Type	Description
rowIndex	Number	行索引
column	String	列名
rowData	Object	行数据

绑定举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.on('afterEdit' , function(rowIndex , column , rowData){
    vjsp.alert('afterEdit event');
});

beforeExport

Description： 导出数据前

回调函数参数

Name	Type	Description
param	Object	导出参数

返回值： String this.returnValue=false 阻止导出

绑定举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.on('beforeExport' , function(param){
    //如果设置表格分页 则不可导出
    if(this.get('pagination')){
        this.returnValue = false;
    }
});

rowRendering

Description： 行渲染

回调函数参数

Name	Type	Description
rowIndex	Number	行索引
rowData	Object	行数据
styleObj	Object	样式对象（回调通过修改此对象添加样式）

绑定举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.on('rowRendering' , function(rowIndex , rowData , styleObj){
    //增加红色背景
    styleObj.backgroundColor = '#f00';
});

beforeSort

Description： 排序前

回调函数参数

Name	Type	Description
column	String	列名
order	String	排序方向（ASC

返回值： String this.returnValue=false 阻止排序

绑定举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.on('beforeSort' , function(column , order){
    //如果列名为test 则不允许排序
    if(column == 'test'){
        this.returnValue = false;
    }
});

ExportColumns

Description： 导出excel表头事件，可以增删待选表头

回调函数参数

Name	Type	Description
columns	Array	列数据集合

绑定举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.on('exportColumns' , function(columns){
    //去掉第一列
    columns.splice(0 , 1);
});

ExportDialogShow

Description： 导出excel对话框弹出事件

回调函数参数

Name	Type	Description
win	Object	弹出窗口对象

绑定举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.on('exportDialogShow' , function(win){
    vjsp.alert('弹出导出窗口了！');
});

headerContextMenu

Description： 表头右键事件

回调函数参数

Name	Type	Description
e	Object	事件对象
column	Object	弹出窗口对象

绑定举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.on('headerContextMenu' , function(e , column){
    vjsp.alert('headerContextMenu event');
});

rowContextMenu

Description： 行右键事件

回调函数参数

Name	Type	Description
e	Object	事件对象
rowIndex	Number	行索引
rowData	Object	行数据

绑定举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.on('rowContextMenu' , function(e , rowIndex , rowData){
    vjsp.alert('rowContextMenu event');
});

hidden

Description： 隐藏事件（隐藏显示触发 回调参数为隐藏状态）

回调函数参数

Name	Type	Description
hiddenState	Boolean	隐藏状态true为隐藏、false为取消隐藏

绑定举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.on('hidden' , function(hiddenState){
    if(hiddenState){
        vjsp.alert('控件被隐藏');
    }else{
        vjsp.alert('控件取消隐藏');
    }
});

readonly

Description： 只读事件 （只读状态改变触发 回调参数为只读状态）

回调函数参数

Name	Type	Description
readonlyState	Boolean	只读状态 true为只读、false为取消只读

绑定举例：

var widget = vjsp.Parser.getWidgetByName('datagrid');
widget.on('readonly' , function(readonlyState){
    if(readonlyState){
        vjsp.alert('控件只读');
    }else{
        vjsp.alert('控件取消只读');
    }
});

列属性

Name	Type	Description
name	String	列名
title	String	列显示名
rowspan	Number	合并行
colspan	Number	合并列
width	Number	宽度
hidden	Boolean	列隐藏
halign	Boolean	表头对齐（left｜center｜right）
align	String	数据对齐（left｜center｜right）
editor	String	编辑器名称
sortable	Boolean	是否开启排序
sorter	function	自定义排序函数
nvcolumn	Boolean	是否非数据列（true不提交此列数据）

交互API

Name	Type	Description
appendRow	function	bindWindow按钮弹出对话框里的页面可以调用此函数回写数据