表格

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

属性

sg-autocheck

说明：开启自动选择，表格被点击，自动勾选第一个 checkbox 或 radio
类型：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

说明：表格中的 checkbox 自动开启，按住 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

说明：表格默认的 page_size
类型：number

示例

json

"sg-defpagesize":10

sg-drag

说明：开启表格拖拽排序
类型：number

示例

json

"sg-drag":1

sg-dragevent

说明：【方法】表格拖拽排序事件（sg-drag:1 有效），只填方法名，方法的入参有两个，例如：dragevent_function(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

说明：表格的 page_size 列表
类型：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

说明：开启表格行（tr）鼠标悬停样式 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

示例

方法