虚拟表格

虚拟表格控件用于处理大数据量的表格展示，支持虚拟滚动，提升渲染性能。

属性

sg-virtual

说明：是否启用虚拟表格模式
类型：boolean
默认值：true

示例

json

"sg-virtual":true

sg-cmdcode

说明：表格绑定的数据查询指令编码
类型：string

示例

json

"sg-cmdcode":"ListAllocationInstruction"

sg-pagesize

说明：表格分页大小选项列表
类型：Array

示例

json

"sg-pagesize": [1000, 2000, 3000, 5000, 10000]

sg-defpagesize

说明：默认每页显示的行数
类型：number

示例

json

"sg-defpagesize": 1000

sg-bottom

说明：表格底部保留高度，auto 根据底部控件高度自动调整，数字表示保留像素高度
类型：string | number
默认值："auto"

可选值

值	说明
`"auto"`	根据表格底部控件高度自动调整
数字	保留多少个像素的高度

示例

json

"sg-bottom":"auto"

列属性

sg-format-body

说明：表格数据列的格式化模板
类型：string

示例

json

"sg-format-body": "0.00"

格式示例

格式	说明	示例值
`"0"`	整数	`123`
`"0.0"`	1 位小数	`123.4`
`"0.00"`	2 位小数	`123.45`
`"0.000"`	3 位小数	`123.456`
`"0.0000"`	4 位小数	`123.4567`
`"#"`	整数（不补 0）	`123`
`"#.##"`	最多 2 位小数（不补 0）	`123.45`
`"#.####"`	最多 4 位小数	`123.4567`
`"0元"`	整数元	`123元`
`"0.00元"`	2 位小数元	`123.45元`
`"#.##元"`	最多 2 位小数元（不补 0）	`123.45元`
`"\"人民币\"0.00元"`	人民币 xx 元	`人民币123.45元`
`"¥0.00"`	人民币符号	`¥123.45`
`"$0.00"`	美元	`$123.45`
`"0%"`	整数百分比	`12%`
`"0.00%"`	2 位小数百分比	`12.34%`
`"#.##%"`	最多 2 位小数百分比	`12.34%`
`"#,##0"`	千分位整数	`1,234`
`"#,##0.00"`	千分位 2 位小数	`1,234.56`
`"#,##0元"`	千分位整数元	`1,234元`

说明：表格底部汇总行的格式化模板
类型：string

示例

json

"sg-format-footer": "0.00元"

格式示例

格式	说明	示例值
`"0"`	整数	`123`
`"0.0"`	1 位小数	`123.4`
`"0.00"`	2 位小数	`123.45`
`"0.000"`	3 位小数	`123.456`
`"0.0000"`	4 位小数	`123.4567`
`"#"`	整数（不补 0）	`123`
`"#.##"`	最多 2 位小数（不补 0）	`123.45`
`"#.####"`	最多 4 位小数	`123.4567`
`"0元"`	整数元	`123元`
`"0.00元"`	2 位小数元	`123.45元`
`"#.##元"`	最多 2 位小数元（不补 0）	`123.45元`
`"\"人民币\"0.00元"`	人民币 xx 元	`人民币123.45元`
`"¥0.00"`	人民币符号	`¥123.45`
`"$0.00"`	美元	`$123.45`
`"0%"`	整数百分比	`12%`
`"0.00%"`	2 位小数百分比	`12.34%`
`"#.##%"`	最多 2 位小数百分比	`12.34%`
`"#,##0"`	千分位整数	`1,234`
`"#,##0.00"`	千分位 2 位小数	`1,234.56`
`"#,##0元"`	千分位整数元	`1,234元`

方法

loadTableData

加载表格绑定的指令数据。

语法

loadTableData(table_id, params)

参数

参数名	类型	必填	说明
table_id	string	是	表格 id
params	Object	是	指令参数

示例

// 加载表格 ID 为 "userTable" 的表格
loadTableData("userTable", {
    orderCode: "OT20264513",
    createName: "张三"
});

replaceTableBody

替换表格主体数据。

语法

replaceTableBody(table_id, tableList, options)

参数

参数名	类型	必填	说明
table_id	string	是	表格 id
tableList	Array	是	表格主体数据
options	Object	否	表格选项

options 参数

参数名	类型	必填	说明
pager	Boolean	否	是否分页

示例

// 替换表格 ID 为 "userTable" 的表格主体数据，开启分页功能
var tableList = [
    { orderCode: "OT20264513", createName: "张三" },
    { orderCode: "OT20264514", createName: "李四" }
];
var options = { pager: true };
replaceTableBody("userTable", tableList, options);

tableSearch

执行表格查询。

语法

tableSearch(table_id, search_form_list)

参数

参数名	类型	必填	说明
table_id	string	是	表格 id
search_form_list	Array	是	查询控件 ID

示例

// 执行查询表格 ID 为 "userTable" 的表格控件数据
var userListTable = tableSearch('userTable', ['orderCode', 'createName']);

table_controls_val

获取表格内所有控件的值。

语法

table_controls_val(table_id)

参数

参数名	类型	必填	说明
table_id	string	是	表格 id

返回值

Array - 表格列表数据，返回指令渲染或缓存渲染的全部列数据。

返回字段	类型	说明
_CHECKBOX_COLUMN	boolean	复选框，如果为 true 则勾选，如果不存在或者为 false 则不勾选

示例

/**
 * 获取表格 ID 为 "userTable" 的表格控件数据
 * @returns {Array} 表格列表数据 - 返回指令渲染或缓存渲染的全部列数据
 * @return {Object} 表格列表数据对象
 * @return {string} _CHECKBOX_COLUMN 复选框 如果为true则勾选，如果不存在或者为false则不勾选
 */
var userListTable = table_controls_val('userTable');

getTableHeaderConfig

获取表格列配置信息。

语法

getTableHeaderConfig(table_id, options)

参数

参数名	类型	必填	说明
table_id	string	是	表格 id
options	Object	是	选项

options 参数

参数名	类型	必填	说明
hidden	Boolean	否	是否显示隐藏列
fieldMap	Object	否	字段映射对象

fieldMap 参数

参数名	类型	必填	说明
field	string	否	字段名
headerName	string	否	标题名
controlName	string	否	控件名

示例

// 获取表格 ID 为 "table_list" 的表格头配置
var tableHeaderConfig = getTableHeaderConfig("table_list");

// 获取表格 ID 为 "table_list" 的表格头配置，并且获取隐藏列配置
// 将 field、headerName、controlName 映射成字段名、标题名、控件名
var tableHeaderConfig = getTableHeaderConfig("table_list",{
    hidden: true,
    fieldMap:{
        field:"字段名",
        headerName:"标题名",
        controlName:"控件名"
    }
});

setTableHeaderStatus

设置表格列的显示/隐藏状态。

语法

setTableHeaderStatus(table_id, controlList, status)

参数

参数名	类型	必填	说明
table_id	string	是	表格 id
controlList	Array	否	列 controlName 列表
status	Boolean	否	显示状态 true：显示 false：隐藏

示例

var controlList = ["TRANSACTION_CODE", "TRANSACTION_TYPE", "ORDER_CODE"];

// 设置表格 ID 为 "table_list" 的表格，TRANSACTION_CODE\TRANSACTION_TYPE\ORDER_CODE 列 显示
setTableHeaderStatus("table_list", controlList, true);

// 设置表格 ID 为 "table_list" 的表格，TRANSACTION_CODE\TRANSACTION_TYPE\ORDER_CODE 列 隐藏
setTableHeaderStatus("table_list", controlList, false);

addPropById

添加或更新表格行属性。

语法

addPropById(table_id, key, value)

参数

参数名	类型	必填	说明
table_id	string	是	表格 id
key	string	是	属性名
value	any	是	属性值

示例

// 修改表格 ID 为 "userTable" 的 sg-cmdcode 属性值
addPropById("userTable", "sg-cmdcode", "ListByBox");

formatTable

表格数据格式化回调（表格渲染时自动调用，需自定义实现）。

语法

formatTable(table_id, data_list)

参数

参数名	类型	必填	说明
table_id	string	是	表格 id
data_list	Array	是	表格主体数据

示例

function formatTable(tableId, data_list){
    // 处理 id 为 "userTable" 的表格
    if(tableId == "userTable"){
        // 表格 userTable 数据格式化处理方法...
        return data_list;
    }

    // 处理 id 为 "表格2ID" 的表格
    if(tableId == "表格2ID"){
        // 表格2数据格式化处理方法...
        return data_list;
    }
}

虚拟表格 ​

属性 ​

sg-virtual ​

示例 ​

sg-cmdcode ​

示例 ​

sg-pagesize ​

示例 ​

sg-defpagesize ​

示例 ​

sg-bottom ​

可选值 ​

示例 ​

列属性 ​

sg-format-body ​

示例 ​

格式示例 ​

sg-format-footer ​

示例 ​

格式示例 ​

方法 ​

loadTableData ​

语法 ​

参数 ​

示例 ​

replaceTableBody ​

语法 ​

参数 ​

options 参数 ​

示例 ​

tableSearch ​

语法 ​

参数 ​

示例 ​

table_controls_val ​

语法 ​

参数 ​

返回值 ​

示例 ​

getTableHeaderConfig ​

语法 ​

参数 ​

options 参数 ​

fieldMap 参数 ​

示例 ​

setTableHeaderStatus ​

语法 ​

参数 ​

示例 ​

addPropById ​

语法 ​

参数 ​

示例 ​

formatTable ​

语法 ​

参数 ​

示例 ​

虚拟表格

属性

sg-virtual

示例

sg-cmdcode

示例

sg-pagesize

示例

sg-defpagesize

示例

sg-bottom

可选值

示例

列属性

sg-format-body

示例

格式示例

sg-format-footer

示例

格式示例

方法

loadTableData

语法

参数

示例

replaceTableBody

语法

参数

options 参数

示例

tableSearch

语法

参数

示例

table_controls_val

语法

参数

返回值

示例

getTableHeaderConfig

语法

参数

options 参数

fieldMap 参数

示例

setTableHeaderStatus

语法

参数

示例

addPropById

语法

参数

示例

formatTable

语法

参数

示例