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) {});
Copyright © 用友 -【生态技术部】 2022-2023 all right reserved,powered by Gitbook修订时间: 2024-02-02 12:53:38

results matching ""

    No results matching ""