GridModel表格
对应控件:表格
获取表格模型
viewModel.getGridModel(); //方法一、适用于页面中只有一个表格
viewModel.get("childrenField") //方法二、适用于页面中存在多个表格获取指定表格;childrenField:页面设计器-》实体清单-》子表集合属性
方法
validate()
说明:校验函数合法性、必输项
参数:无
返回值:true or false
示例
viewModel.getGridModel().validate()
getDirtyData()
说明:适用于新增或更新时获取表格有调整的行数据
示例
viewModel.getGridModel().getDirtyData()
getData()
说明:获取表格所有数据
示例
viewModel.getGridModel().getData()
getColumns(fields)
说明:批量获取栏目信息
参数
参数 | 属性含义 | 值类型 | 说明 |
---|---|---|---|
fields | cItemName字段别名 | Array |
示例
viewModel.getGridModel().getColumns(["new1","new2"]) //获取指定列的属性
getColumns(field)
说明:获取单列栏目的信息
参数
参数 | 属性含义 | 值类型 | 说明 |
---|---|---|---|
fields | cItemName字段别名 | String |
示例
viewModel.getGridModel().getColumns("new1") //获取指定列的属性
hasColumn(field)
说明:判断函数,判断是否包含该栏目
参数
参数 | 属性含义 | 值类型 | 说明 |
---|---|---|---|
fields | cItemName字段别名 | String |
返回值:true or false
示例
viewModel.getGridModel().hasColumn("new1")
setDirty(dirty)
说明:设置脏数据取值范围 默认为false为收集数据时只收集脏数据。
参数
参数 | 属性含义 | 值类型 | 说明 |
---|---|---|---|
dirty | 是否只返回脏数据 | Boolean | 默认false,只返回修改的数据,设置为true返回所有数据 |
示例
viewModel.getGridModel().setDirty(true) //设置true情况下
viewModel.getGridModel().getDirtyData() //等同于viewModel.getGridModel().Data()
setReadOnly(value)
说明:设置grid属性为是否可编辑状态
参数
参数 | 属性含义 | 值类型 | 说明 |
---|---|---|---|
value | 是否只读 | Boolean | 设置为true则不可编辑,false可编辑 |
示例
viewModel.getGridModel().setReadOnly(true) //表格行不可编辑
viewModel.getGridModel().setReadOnly(false) //表格行可编辑
getCellValue(rowIndex,cellName)
说明:获取表格指定单元格的值
参数
参数 | 属性含义 | 值类型 | 说明 |
---|---|---|---|
rowIndex | 行号 | int | 从0开始计数 |
cellName | cItemName字段别名 | String |
示例
viewModel.getGridModel().getCellValue(0,"new1")
setCellValue(rowIndex, cellName, value, check, blur)
说明:设置单元格value值
参数
参数 | 属性含义 | 值类型 | 说明 |
---|---|---|---|
rowIndex | 行号 | int | 从0开始计数 |
cellName | cItemName字段别名 | String | |
value | 单元格的值 | Object | |
check | 内部调用参数不需传 | ||
blur | 不需传 |
示例
viewModel.getGridModel().setCellValue(1, "new1", "234")
getRowState(rowIndex,name)
说明:获取行状态
参数
参数 | 属性含义 | 值类型 | 说明 |
---|---|---|---|
rowIndex | 行号 | int | 从0开始计数 |
name | 状态名 | String | 常用'disabled','readOnly' |
示例
//获取行1的disabled状态(禁用)
viewModel.getGridModel().getRowState(1,'disabled')
setRowState(rowIndex, name, value)
说明:设置当前行的状态,例如禁用、只读、样式
参数
参数 | 属性含义 | 值类型 | 说明 |
---|---|---|---|
rowIndex | 行号 | int | 从0开始计数 |
name | 状态名 | String | 常用'disabled','readOnly' |
value | 状态值 | Object |
示例
//设置第一行为禁用状态
viewModel.getGridModel().setRowState(1,'disabled',true);
getColumnState(cellName, name)
说明:获取列状态
入参:cellName 列名(fieldname) name 状态名
参数
参数 | 属性含义 | 值类型 | 说明 |
---|---|---|---|
cellName | cItemName字段别名 | String | |
name | 状态名 | String | 查看下列示例获取属性清单 |
示例
viewModel.getGridModel().getColumns("new1"); //获取指定列的所有属性
viewModel.getGridModel().getColumnState('new1','bCanModify') //获取指定列的指定属性的值
setColumnState(cellName, name, value)
说明:设置列状态
参数
参数 | 属性含义 | 值类型 | 说明 |
---|---|---|---|
cellName | cItemName字段别名 | String | |
name | 状态名 | String | 查看下列示例获取属性清单 |
value | 属性值 | Object |
示例
viewModel.getGridModel().getColumns("new1"); //获取指定列的所有属性
viewModel.getGridModel().setColumnState('new1','bCanModify',false) //设置new1列设置为不允许编辑
setColumnValue(cellName, value, check)
说明:设置整列数据的值
参数
参数 | 属性含义 | 值类型 | 说明 |
---|---|---|---|
cellName | cItemName字段别名 | String | |
value | 默认值 | Object | 某列的值 |
check | 不需要传 |
示例
viewModel.getGridModel().setColumnValue('new1', '234'); //设置new1列的值为234
setCellState(rowIndex, cellName, name, value)
说明:设置单元格状态
参数
参数 | 属性含义 | 值类型 | 说明 |
---|---|---|---|
rowIndex | 行号 | int | |
cellName | cItemName字段别名 | String | |
name | 字段属性 | String | |
value | 字段属性值 | Object |
示例
//设置第1行new1的单元格只读
viewModel.getGridModel().setCellState(0,'new1','readOnly',true)
getCellState(rowIndex, cellName, name)
说明:获取指定单元格状态
参数
参数 | 属性含义 | 值类型 | 说明 |
---|---|---|---|
rowIndex | 行号 | int | |
cellName | cItemName字段别名 | String | |
name | 字段属性 | String |
示例
viewModel.getGridModel().setCellState(0,'new1','readOnly',true)
//获取第一行的new1单元个的只读属性的值
model.getCellState(0,'new1','readOnly')
clear()
说明:清除全部数据
示例
viewModel.getGridModel().clear()
setDataSource(proxyConfig, queryParams, callback)
说明:如果GridModel中dataSourceMode为local则proxyConfig参数传递为真实数据。否则proxyConfig参数传递服务请求地址,queryParams传递请求参数,callback传递回调函数。
//dataSourceMode为local
viewModel.getGridModel().setState('dataSourceMode','local');
viewModel.getGridModel().setDataSource(GridData) //重置表格数据, 参数为[{'new1':'11'},{'new1':'12'}],数组对象格式
//dataSourceMode不为local
viewModel.getGridModel().setDataSource(‘bill/list.do’,{‘id’:1},function(result){})
load (proxyConfig, params, callback)
说明:发起请求加在表格数据,proxyConfig参数传递服务请求地址,queryParams传递请求参数,callback传递回调函数。
示例
viewModel.getGridModel().load(‘bill/list.do’,{‘id’:1},function(result){})
setPageSize(pageSize)
说明:设置grid分页的页大小
参数
参数 | 属性含义 | 值类型 | 说明 |
---|---|---|---|
pageSize | 每页大小 | int |
示例
viewModel.getGridModel().setPageSize(10) //列表页面设置每页显示10条数据
setPageIndex(pageIndex)
说明:设置grid分页中的页码
参数
参数 | 属性含义 | 值类型 | 说明 |
---|---|---|---|
pageIndex | 显示第几页数据 | int |
示例
viewModel.getGridModel().setPageIndex(2) //列表页面设置显示第二页数据
getPageSize()
说明:获取当前grid分页的页大小
示例
viewModel.getGridModel().getPageSize() //列表页面获取每页显示条数
getPageIndex()
说明:获取grid分页中的当前页码
示例
viewModel.getGridModel().getPageIndex() //列表页面获取当前显示的是第几页
select(rowIndexes)
说明:设置grid选中行
参数
参数 | 属性含义 | 值类型 | 说明 |
---|---|---|---|
rowIndexes | 行号集合 | int[] |
示例:
viewModel.getGridModel().select([0,1,2]) //设置grid选中行号为0,1,2的数据,即1,2,3行数据
unselect(rowIndexes)
说明:设置grid取消选中的行
参数
参数 | 属性含义 | 值类型 | 说明 |
---|---|---|---|
rowIndexes | 行号集合 | int[] |
示例
viewModel.getGridModel().unselect([0,1,2]) ////设置grid取消选中行号为0,1,2的数据,即1,2,3行数据
selectAll()
说明:选中所有行
示例
viewModel.getGridModel().selectAll() //选中当前页所有数据
unselectAll()
说明:取消选中所有行
示例
viewModel.getGridModel().unselectAll() //取消当前页所有选中状态
getSelectedRows()
说明:获取grid中已选中行的数据
示例
viewModel.getGridModel().getSelectedRows() //获取当前页已选中行的数据
getSelectedRowIndexes()
说明:获取grid中已选中行的行号
示例
viewModel.getGridModel().getSelectedRowIndexes() //获取当前页已选中行的行号
getRows()
说明:获取grid中的所有行数据
示例
viewModel.getGridModel().getRows() //获取当前页表格的所有数据
updateRow(rowIndex, rowData)
说明:更新行数据
参数
参数 | 属性含义 | 值类型 | 说明 |
---|---|---|---|
rowIndex | 行号 | int | |
rowData | 要更新的数据 | Object |
示例
//更新第二行new1单元格的值为23,new2的单元格的值为1
viewModel.getGridModel().updateRow(1, {'new1':'23','new2':'1'})
insertRow(rowIndex, rowData)
说明:grid插行功能
参数
参数 | 属性含义 | 值类型 | 说明 |
---|---|---|---|
rowIndex | 行号 | int | 从1开始计数 |
rowData | 要插入的数据 | Object |
示例
//在第一行下插入行,行数据为rowData
viewModel.getGridModel().insertRow(1, {'new1':'23','new2':'1'})
insertRows(rowIndex, rowDatas)
说明:grid批量插行功能
参数
参数 | 属性含义 | 值类型 | 说明 |
---|---|---|---|
rowIndex | 行号 | int | 从1开始计数 |
rowDatas | 要插入的数据 | Array |
示例
//在第三行下插入rowDatas.length行,数据为rowDatas
viewModel.getGridModel().insertRow(3,[{'new1':'23','new2':'1'},{'new1':'24','new2':'2'}])
appendRow(rowData)
说明:grid增行功能
参数
参数 | 属性含义 | 值类型 | 说明 |
---|---|---|---|
rowData | 增行数据 | Object |
示例
//在当前页表格行最后增行
viewModel.getGridModel().appendRow({'new1':'23','new2':'1'})
deleteRows(rowIndexes)
说明:grid 删行功能
参数
参数 | 属性含义 | 值类型 | 说明 |
---|---|---|---|
rowIndexes | 行号集合 | int[] |
示例
//删除grid中第行号为1,2的行
viewModel.getGridModel().deleteRows([1,2])
getRowsByIndexes(rowIndexes)
说明:根据行号获取grid中数据
参数
参数 | 属性含义 | 值类型 | 说明 |
---|---|---|---|
rowIndexes | 行号集合 | int[] |
示例
viewModel.getGridModel().getRowsByIndexes([1,2]) //行号从0开始,所以1,2是获取第二行第三行数据
getRow(rowIndex)
说明:根据行号获取行数据
参数
参数 | 属性含义 | 值类型 | 说明 |
---|---|---|---|
rowIndex | 行号 | int |
示例
viewModel.getGridModel().getRow(1) //获取第二行数据
事件
beforeCellValueChange
说明:grid单元格数据改变前事件, 返回true继续单元格数据改变,返回false终止单元格数据改变。
viewModel.getGridModel().on("beforeCellValueChange", function (event) {
//rowIndex:'行号', cellName: '列名', value: '新值', oldValue: '旧值'
let { rowIndex, cellName, value, oldValue, childrenField } = event;
/*
to do someing...
*/
//返回true继续单元格数据改变,返回false终止单元格数据改变
return true;
});
afterCellValueChange
说明:grid单元格数据改变后事件
viewModel.getGridModel().on("afterCellValueChange", function (event) {
//rowIndex:'行号', cellName: '列名', value: '新值', oldValue: '旧值'
let { rowIndex, cellName, value, oldValue, childrenField } = event;
/*
to do someing...
*/
});
beforeSetDataSource
说明:设置grid数据前事件,返回true为允许设置grid数据,返回false为终止设置数据
//设置表格数据前事件 data为grid数据格式
viewModel.getGridModel().on("beforeSetDataSource", function (data) {
/*
to do someing...
*/
//返回true为允许设置grid数据,返回false为终止设置数据
return true;
});
afterSetDataSource
说明:设置grid数据后事件
//设置表格数据后事件 data为grid数据格式
viewModel.getGridModel().on("afterSetDataSource", function (data) {
/*
to do someing...
*/
});
beforeSelect
说明:选中select前事件,返回true为允许选中,返回false为终止选中
viewModel.getGridModel().on("beforeSelect", function (rowIndexs) {
/*
to do someing...
*/
//返回true为允许选中,返回false为终止选中
return true;
});
afterSelect
说明:选中select后事件
//选中select后事件 rowIndexs为行号,单行(整形)or多行(数组)
viewModel.getGridModel().on("afterSelect", function (rowIndexs) {
/*
to do someing...
*/
console.log(rowIndexs)
});
beforeUnSelect
说明:取消选中select前事件,返回true为允许取消选中,返回false为终止取消选中
//取消选中select前事件 rowIndexs为行号,单行(整形)or多行(数组)
viewModel.getGridModel().on("beforeUnselect", function (rowIndexs) {
/*
to do someing...
*/
//返回true为允许取消选中,返回false为终止取消选中
return true;
});
afterUnSelect
说明:选中select事件
//取消选中select后事件 rowIndexs为行号,单行(整形)or多行(数组)
viewModel.getGridModel().on("afterUnselect", function (rowIndexs) {
/*
to do someing...
*/
});
beforeSelectAll
说明:全选前事件,返回true为允许全选,返回false为终止全选
viewModel.getGridModel().on("beforeSelectAll", function () {
/*
to do someing...
*/
//返回true为允许全选,返回false为终止全选
return true;
});
afterSelectAll
说明:全选后事件
//表格全选后事件 data为选中行的数据
viewModel.getGridModel().on("afterSelectAll", function (data) {
/*
to do someing...
*/
});
beforeUnSelectAll
说明:全消前事件,返回true为允许全消,返回false为终止全消
//表格全选取消前的事件
viewModel.getGridModel().on("beforeUnselectAll", function (event) {
/*
to do someing...
*/
//返回true为允许取消全消,返回false为终止取消全消
return true;
});
afterUnSelectAll
说明:全消后事件
//表格全选取消后的事件
viewModel.getGridModel().on("afterUnselectAll", function () {
/*
to do someing...
*/
});
beforeInsertRow
说明:增行/插行前事件,返回true为允许增/插行,返回false为终止操作
//例:示例中data格式为{ index: ‘增/插行行号’, row: ‘行数据’}
viewModel.getGridModel().on('beforeInsertRow',function (data) {
return false;
});
afterInsertRow
说明:增行/插行后事件
//例:示例中data格式为{ index: ‘增/插行行号’, row: ‘行数据’}
viewModel.getGridModel().on('afterInsertRow',function (data) {});
beforeDeleteRows
说明:删行前事件,返回true为允许删行,返回false为终止操作
//例:示例中rows为要删除的行数据
viewModel.getGridModel().on('beforeDeleteRows',function (rows) {
return false;
});
afterDeleteRows
说明:删行后事件
//例:示例中rows为已删除的行数据
viewModel.getGridModel().on('afterDeleteRows',function (rows) {});