@beisen-platform/platform-datatable
1.3.51-rc.10 • Public • Published
DataTable使用方式如下
<DataTable
{...this.tableDefin} //table的元数据,平台配置生成
loading={this.state.isTableFetching} //table组件loading状态
singleChecked={this.props.singleChecked} //table是否是单选
onSelect={this.handleDataRowChecked.bind(this)} //table 行选中之后的回调
selectedData={this.props.resultsData} //当前table已经选中的数据
reloadData={this.reloadDataTable.bind(this)} //重新刷新当前table
onCrossPageSelectChanged={this.handleDataTableCrossPageSelect.bind(this)} //跨页全选状态选择后的回调实践
tableSize={this.props.stretch ? 'stretch' : 'Auto'} //table组件的渲染的模式,stretch: 自动充满父容器,滚动条在table内部。Auto: table根据自身高度渲染,滚动条出现在外部
tableContainer={this.props.tableContainer || dataGrid.parentElement}
containerHeight={this.props.containerHeight} //提供一个计算好的高度,table渲染到这个高度内
containerWidth={this.props.containerWidth} //提供一个计算好的宽度,table选择到这个宽度内
mainObjectContext={this.props.mainObjectContext || null} //上下文相关,用于当当前table数据属于子对象的时候,mainObjectContext传递是主对象相关的信息,包含PObjectDataID,parentDataId,parentMetaObjName,用于行操作的逻辑处理
ext_genColDef={this.genCustomColDef}
ext_getColumns={this.genCustomColumns}
/>
属性说明
属性 |
说明 |
类型 |
默认值 |
loading |
table组件loading状态 |
bool |
false |
singleChecked |
table是否是单选 |
bool |
false |
selectedData |
table默认选中数据的ids |
array |
[] |
onSelect |
table行选中之后的回调函数,selectedItems:table选中行的所有数据,与metadata中的biz_data中行记录结构一致,outsideSelectedIds是selectedData的子集,排除了table操作过程中取消选中的那部分selectedData的数据 |
function (selectedItems, outsideSelectedIds) {} |
- |
reloadData |
重新加载table列表数据 |
function (tableMetaData, reloadReson) {} |
[] |
onCrossPageSelectChanged |
table跨页全选点击回调 |
function (isActive) {} |
bool |
tableSize |
table组件的渲染的模式,stretch: 自动充满父容器,滚动条在table内部。Auto: table根据自身高度渲染,滚动条出现在外部 |
string |
Auto |
tableContainer |
配置tableSize为stretch的时候使用,父容器的DOM |
DOM |
table组件所在的parentElement |
containerHeight |
给table一个计算好的显式高度 |
int |
- |
containerWidth |
给table一个计算好的显式宽度 |
int |
- |
ext_genColDef |
重写某个列 |
function (colData, index, column) {} |
- |
ext_getColumns |
重写列(拿到所有的列) |
function (columns) {} |
- |
自定义列渲染
let column = {
key: string, //列唯一ID
name: string, //列名
title: string, //列表头显示
sortable: bool, //是否需要排序
visible: bool, //是否可见
fixed: bool, // 是否fixed
fixedWidth: colData.width ? +colData.width < 40 ? 40 : +colData.width : null // 后端接口给的宽度居然是 string 转换成数字再传递
};
column.render = (v, data, cellProps) => {
console.log(v,data,cellProps);
return (<div>自定义列渲染</div>);
}
Readme
Keywords
nonePackage Sidebar
Install
npm i @beisen-platform/platform-datatable
Weekly Downloads