表格

表格控件用于展示和操作列表数据，支持数据加载、搜索、增删改查等操作。

属性

sg-autocheck

说明：点击表格行时是否自动勾选第一个复选框或单选框
类型：boolean | string
默认值：false

可选值

值	说明
`true`	开启
`false`	关闭
`"shift"`	可以按住 shift 多行选择

示例

json

"sg-autocheck":false

sg-bottom

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

可选值

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

示例

json

"sg-bottom":"auto"

sg-cellCallback

说明：自定义单元格样式的回调方法
类型：string

返回值

类型	值	说明
Object	options	表格行/列数据
string	options.index	行索引
Object	options.rowData	行数据
string	options.colProp	列字段名
string	options.cellValue	列值

示例

json

"sg-cellCallback":"setTableStyle"

用法

function setTableStyle(options){
    var {index, rowData, colProp, cellValue} = options;
    var styleMap = {};

    if(index == 0){
        styleMap["background-color"] = "#f2f2f2";
    }

    if(colProp == "QC_GRADE"){
        styleMap["background-color"] = "#ffffffff";
    }

    if(colProp == "QC_GRADE" && cellValue == "不合格"){
        styleMap["background-color"] = "#ff0000ff";
    }

    if(rowData["FLAW_NUM"] == 1 && colProp == "QC_GRADE" && cellValue == "A品"){
        styleMap["background-color"] = "#16ff63ff";
    }

    return styleMap;
}

sg-checkboxshift

说明：是否启用表格复选框的 Shift 多行选择功能
类型：boolean | string
默认值："column"

可选值

值	说明
`true`	开启
`false`	禁用
`"column"`	根据列配置 sg-shiftenabled，开启

示例

json

"sg-checkboxshift":true

sg-cmdcode

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

示例

json

"sg-cmdcode":"getuser"

sg-customview

说明：是否启用自定义视图，允许操作者自定义列的显示/隐藏和顺序
类型：boolean
默认值：false

可选值

值	说明
`true`	开启
`false`	关闭

示例

json

"sg-customview":false

sg-defpagesize

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

示例

json

"sg-defpagesize":10

sg-drag

说明：是否启用表格行拖拽排序功能
类型：number

示例

json

"sg-drag":1

sg-dragevent

说明：拖拽排序完成后的回调方法（需配合 sg-drag:1 使用），方法入参为 (list, data)，其中 list 为完整表格数据，data 为拖拽的数据
类型：string

示例

json

"sg-dragevent":"dragevent_function"

sg-dynamic

说明：动态列的回调方法，返回动态列配置数据
类型：string

示例

json

"sg-dynamic":"dynamic_func"

sg-enter

说明：键盘事件回调方法，支持上下移动选中行、左右翻页、回车键执行函数
类型：string

示例

json

"sg-enter":"enter_function()"

sg-entermode

说明：表格内 input 控件的回车键行为
类型：string
默认值："tab"

可选值

值	说明
`"tab"`	向右
`"down"`	向下
`"none"`	关闭

示例

json

"sg-entermode":"tab"

sg-export

说明：是否启用 Excel 导出功能（右键表格显示导出选项），不配置默认开启自动模式
类型：number | boolean
默认值：1

可选值

值	说明
`0` 或 `false`	关闭
`1`	自动（有指令编码+分页：后端模式导出；无分页无指令：前端导出）
`2`	前端（只导出当前表格的内容）
`3`	后端（可以导出每一页的内容）

示例

json

"sg-export":"1"

sg-focusselect

说明：表格内 input 控件聚焦时是否自动选中内容
类型：boolean
默认值：true

可选值

值	说明
`true`	开启
`false`	关闭

示例

json

"sg-focusselect":false

sg-foot

说明：是否启用表格底部汇总行
类型：boolean | string
默认值：false

可选值

值	说明
`true` 或 `1`	开启
`"top"`	开启并且置顶
`false`	关闭表尾

示例

json

"sg-foot":false

sg-height

说明：表格固定高度，超出部分显示滚动条（表头固定）
类型：string

示例

json

"sg-height":"500px"

sg-loaddata

说明：表格渲染后是否自动加载数据
类型：boolean
默认值：true

可选值

值	说明
`true`	开启
`false`	关闭

示例

json

"sg-loaddata":true

sg-loadevent

说明：表格手动加载方法名（当 sg-loaddata=false 时生效）
类型：string

示例

json

"sg-loadevent":false

sg-mplthead

说明：多行表头的回调方法，返回多行表头配置数据
类型：string

示例

json

"sg-mplthead":"mplthead_func"

sg-nowrap

说明：表格内容换行展开设置，1 或 true 表示表头展开；三位数字符串格式（第一位表头、第二位表体、第三位表尾），如 "100" 表示仅表头展开
类型：boolean | string
默认值：false

可选值

值	说明
`1` 或 `true`	表头展开
三位数字符串	第一位：表头，第二位：表体，第三位：表尾（例如："100"）

示例

json

"sg-nowrap":false

sg-ordercolumn

说明：表格默认排序字段
类型：string

示例

json

"sg-ordercolumn":"ID"

sg-ordertype

说明：表格默认排序方式
类型：string
默认值："ASC"

可选值

值	说明
`"ASC"`	升序
`"DESC"`	降序

示例

json

"sg-ordertype":"ASC"

说明：是否启用分页功能
类型：boolean
默认值：true

可选值

值	说明
`true`	开启
`false`	关闭

示例

json

"sg-pager":true

sg-pagesize

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

示例

json

"sg-pagesize":[10,20,30,50,100]

sg-savepagesize

说明：是否开启 page_size 记忆，不配置默认开启自动模式
类型：number | boolean
默认值：1

可选值

值	说明
`0` 或 `false`	关闭
`1`	开启

示例

json

"sg-savepagesize":1

sg-scroll

说明：是否启用表格横向滚动
类型：boolean
默认值：false

可选值

值	说明
`true`	开启
`false`	关闭

示例

json

"sg-scroll":false

sg-tbodysch

说明：是否开启表格筛选
类型：boolean | number | string
默认值：false

可选值

值	说明
`true` 或 `1`	开启前端条件筛选 + 智能筛选（后端模式）
`2`	只开启前端条件筛选
`3`	只开启智能筛选（后端模式）
`4`	前端条件筛选 + 智能筛选（前端模式）
`5`	只开启前端智能筛选（前端模式）
`false`	关闭
`"auto"`	自动（不开启分页器自动开启，前端条件筛选 + 智能筛选后端模式）

示例

json

"sg-tbodysch":false

备注

"auto" 自动模式表格在不开启分页器自动开启，前端条件筛选 + 智能筛选（后端模式），前端模式仅在表格的当前页筛选，后端模式是全表筛选，如果当前表的数据比较多，可能会比较消耗资源。

sg-trhover

说明：是否启用表格行鼠标悬停高亮样式
类型：number | boolean
默认值：1

可选值

值	说明
`1` 或 `true`	开启
`0`	关闭

示例

json

"sg-trhover":1

sg-viewtag

说明：自定义视图的区分标签，用于多个功能共用同一页面时区分不同视图配置
类型：string

示例

json

"sg-viewtag":"customview1"

方法

loadTableData

手动加载表格数据。

语法

loadTableData(table_id, param, sort_order)

参数

参数名	类型	必填	说明
table_id	string	是	表格 id
param	Object	是	参数
sort_order	string	是	排序

示例

loadTableData("userTable", {page: 1, size: 10}, "asc");

tableSearch

执行表格搜索。

语法

tableSearch(table_id, search_form_list)

参数

参数名	类型	必填	说明
table_id	string	是	表格 id
search_form_list	Array	是	要传参的表单选择器列表

示例

$("#sch_go").click(function(){
    console.log("点击表单搜索按钮");
    // 执行搜索
    var table_id = "aaa991844";
    var search_form_list = [
        "#sch_cmdtype", "input[name='cmd_name']"
    ];
    tableSearch(table_id, search_form_list);
});

resetSearch

清除表格搜索条件。

语法

resetSearch(table_id, search_form_list)

参数

参数名	类型	必填	说明
table_id	string	是	表格 id
search_form_list	Array	是	要重置的表单选择器列表

示例

// 假设重置按钮的 id = "sch_clr"
$("#sch_clr").click(function(){
    console.log("点击表单搜索重置按钮");
    // 执行重置搜索
    var table_id = "aaa991844";
    var search_form_list = [
        "#sch_cmdtype", "input[name='cmd_name']"
    ];
    resetSearch(table_id, search_form_list);
});

appendTableBody

追加表格行数据（保留原有内容）。

语法

appendTableBody(table_id, list)

参数

参数名	类型	必填	说明
table_id	string	是	表格 id
list	Array	是	表格的 list 数据

示例

var list = [
    {"MOBILE":"110", "USERNAME":"aaa"},
    {"MOBILE":"119", "USERNAME":"aaa1"},
    {"MOBILE":"120", "USERNAME":"aaa2"}
];
appendTableBody('user_list', list);

table_remove_tr

移除表格行。

语法

table_remove_tr(table_id, index, bnt_ts, remove_all)

参数

参数名	类型	必填	说明
table_id	string	是	表格 id
index	number	是	行号（第一行：0，第二行：1）
bnt_ts	Object	是	表格里面按钮对象的 this
remove_all	boolean	是	true 整张表格全部清除

示例

// 移除第一行
table_remove_tr('user_list', 0, this, false);

// 移除所有行
table_remove_tr('user_list', 0, this, true);

replaceTableBody

替换表格行数据（覆盖原有内容）。

语法

replaceTableBody(table_id, list)

参数

参数名	类型	必填	说明
table_id	string	是	表格 id
list	Array	是	表格的 list 数据

示例

var list = [
    {"MOBILE":"110", "USERNAME":"aaa"},
    {"MOBILE":"119", "USERNAME":"aaa1"},
    {"MOBILE":"120", "USERNAME":"aaa2"}
];
replaceTableBody('user_list', list);

table_controls_val

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

语法

table_controls_val(table_id)

参数

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

示例

var values = table_controls_val('user_list');

formatTable

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

语法

formatTable(table_id, data_list)

参数

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

示例

// 表格数据格式化
function formatTable(table_id, data_list){
    if(table_id == "表格1ID"){
        for (var i = 0; i < data_list.length; i++) {
            var one = data_list[i];
            if(one.SEX == 1){data_list[i].SEX = "男"};
            if(one.SEX == 2){data_list[i].SEX = "女"};
        }
        return data_list;
    }
    if(table_id == "表格2ID"){
        // 表格2数据格式化处理方法...
        return data_list;
    }
}

备注

这个方法不是系统方法，需要格式化数据可以写，参考上面，数据处理完后，return 回去。

formatTfoot

表格底部汇总行格式化回调（需自定义实现）。

语法

formatTfoot(table_id, footer_obj)

参数

参数名	类型	必填	说明
table_id	string	是	表格 id
footer_obj	Object	是	表尾对象

示例

// 格式化表尾（可选）
function formatTfoot(table_id, footer_obj){
    // 处理 id 为 "user_list" 的表格
    if(table_id == "user_list"){
        footer_obj.MAX_JIFEN = "最高分：" + footer_obj.MAX_JIFEN;
        footer_obj.MAX_DLCS = "最多：" + footer_obj.MAX_DLCS;
        // 一定要 return 回去（否则表尾不会显示）
        return footer_obj;
    }
    if(table_id == "表格2ID"){
        // 表格2数据格式化处理方法...
        return footer_obj;
    }
    // 一定要 return 回去（否则表尾不会显示）
    return footer_obj;
}

备注

这个方法不是系统方法，需要格式化数据可以写，参考上面，数据处理完后，return 回去。

tableIsEdit

判断表格数据是否被编辑过。

语法

tableIsEdit(table_id)

参数

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

返回值

boolean - true 表示被编辑过，false 表示未编辑。

示例

var isEdit = tableIsEdit("user_list");
// isEdit 返回 true 或 false

table_controls_edit

修改表格指定行的控件值。

语法

table_controls_edit(table_id, index, edit_data)

参数

参数名	类型	必填	说明
table_id	string	是	表格控件 id
index	number	是	第几行
edit_data	Object	是	修改的 data（对象或 json 格式，例如 {"name":"张三"}，对象的键就是表格里面控件的 name）

示例

var data = {"PROCESS_NAME": 885, "NAME": "hohohh"};
table_controls_edit("user_list", 0, data);

getTableSelectedIndex

获取表格选中行的行号。

语法

getTableSelectedIndex(table_id)

参数

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

示例

var selectedIndexes = getTableSelectedIndex("user_list");

add_original_params

为表格查询添加强制筛选条件（不受分页、重置影响）。

语法

add_original_params(table_id, params)

参数

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

示例

add_original_params("attribute_detail_list", {super_attribute_name: "纹路"});

备注

表格查询强制卡上 {super_attribute_name: "纹路"} 查询条件，不受分页、重置搜索等影响。

remove_original_params

解除表格查询的强制筛选条件。

语法

remove_original_params(table_id)

参数

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

示例

remove_original_params("attribute_detail_list");

get_table_data

获取表格绑定的指令数据。

语法

get_table_data(table_id)

参数

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

示例

get_table_data("user_list");

table_one_data

获取表格指定行的指令数据（从前端缓存读取）。

语法

table_one_data(table_id, index)

参数

参数名	类型	必填	说明
table_id	string	是	表格的控件 id
index	number	是	第几行（第一行为 0）

示例

table_one_data("user_list", 0);

set_table_callback

设置表格数据加载完成后的回调函数。

语法

set_table_callback(table_id, callback)

参数

参数名	类型	必填	说明
table_id	string	是	表格的控件 id
callback	Function	是	回调方法

callback 参数说明

参数名	类型	必填	说明
getData	Function	否	获取数据的回调方法
error	Function	否	失败的回调方法

示例

set_table_callback("user_list", {
    getData: function(data) {
        console.log("获取到数据:", data);
    },
    error: function(error) {
        console.log("加载失败:", error);
    }
});

get_table_callback

获取表格已设置的回调函数。

语法

get_table_callback(table_id)

参数

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

示例

var callback = get_table_callback("user_list");

remove_table_callback

清除表格已设置的回调函数。

语法

remove_table_callback(table_id)

参数

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

示例

remove_table_callback("user_list");

表格 ​

属性 ​

sg-autocheck ​

可选值 ​

示例 ​

sg-bottom ​

可选值 ​

示例 ​

sg-cellCallback ​

返回值 ​

示例 ​

用法 ​

sg-checkboxshift ​

可选值 ​

示例 ​

sg-cmdcode ​

示例 ​

sg-customview ​

可选值 ​

示例 ​

sg-defpagesize ​

示例 ​

sg-drag ​

示例 ​

sg-dragevent ​

示例 ​

sg-dynamic ​

示例 ​

sg-enter ​

示例 ​

sg-entermode ​

可选值 ​

示例 ​

sg-export ​

可选值 ​

示例 ​

sg-focusselect ​

可选值 ​

示例 ​

sg-foot ​

可选值 ​

示例 ​

sg-height ​

示例 ​

sg-loaddata ​

可选值 ​

示例 ​

sg-loadevent ​

示例 ​

sg-mplthead ​

示例 ​

sg-nowrap ​

可选值 ​

示例 ​

sg-ordercolumn ​

示例 ​

sg-ordertype ​

可选值 ​

示例 ​

sg-pager ​

可选值 ​

示例 ​

sg-pagesize ​

示例 ​

sg-savepagesize ​

可选值 ​

示例 ​

sg-scroll ​

可选值 ​

示例 ​

sg-tbodysch ​

可选值 ​

示例 ​

备注 ​

sg-trhover ​

可选值 ​

示例 ​

sg-viewtag ​

示例 ​

方法 ​

表格

属性

sg-autocheck

可选值

示例

sg-bottom

可选值

示例

sg-cellCallback

返回值

示例

用法

sg-checkboxshift

可选值

示例

sg-cmdcode

示例

sg-customview

可选值

示例

sg-defpagesize

示例

sg-drag

示例

sg-dragevent

示例

sg-dynamic

示例

sg-enter

示例

sg-entermode

可选值

示例

sg-export

可选值

示例

sg-focusselect

可选值

示例

sg-foot

可选值

示例

sg-height

示例

sg-loaddata

可选值

示例

sg-loadevent

示例

sg-mplthead

示例

sg-nowrap

可选值

示例

sg-ordercolumn

示例

sg-ordertype

可选值

示例

sg-pager

可选值

示例

sg-pagesize

示例

sg-savepagesize

可选值

示例

sg-scroll

可选值

示例

sg-tbodysch

可选值

示例

备注

sg-trhover

可选值

示例

sg-viewtag

示例

方法