增加复杂场景下大数据渲染示例;左右固定宽度支持字符串
This commit is contained in:
parent
097537ef75
commit
b9c66aed7f
|
@ -14,9 +14,8 @@ import Table from "../../src";
|
|||
import BigData from "../../src/lib/bigData";
|
||||
import multiSelect from '../../src/lib/MultiSelect';
|
||||
import filterColumn from '../../src/lib/filterColumn';
|
||||
import sort from '../../src/lib/sort';
|
||||
|
||||
let ComplexTable = filterColumn(BigData(multiSelect(Table, Checkbox)), Popover, Icon);
|
||||
let ComplexTable = filterColumn(multiSelect(BigData(Table), Checkbox), Popover, Icon);
|
||||
|
||||
const columns = [
|
||||
{
|
||||
|
@ -88,6 +87,9 @@ class Demo32 extends Component {
|
|||
selectedRowIndex: 0
|
||||
}
|
||||
}
|
||||
getSelectedDataFunc = data => {
|
||||
console.log(data);
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
|
@ -102,8 +104,7 @@ class Demo32 extends Component {
|
|||
selectedRowIndex: index
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
getSelectedDataFunc={this.getSelectedDataFunc}/>
|
||||
|
||||
);
|
||||
}
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -177,24 +177,32 @@ export default class ColumnManager {
|
|||
return res;
|
||||
}
|
||||
|
||||
getLeftColumnsWidth() {
|
||||
getLeftColumnsWidth(contentWidth=1) {
|
||||
return this._cache('leftColumnsWidth', () => {
|
||||
let leftColumnsWidth =0;
|
||||
this.groupedColumns().forEach(column =>{
|
||||
if (column.fixed === 'left' || column.fixed === true){
|
||||
leftColumnsWidth += column.width;
|
||||
let width = column.width;
|
||||
if(typeof(width) == 'string' && width.includes('%') ){
|
||||
width = contentWidth * parseInt(col.width) /100;
|
||||
}
|
||||
leftColumnsWidth += parseInt(width)
|
||||
}
|
||||
});
|
||||
return leftColumnsWidth;
|
||||
});
|
||||
}
|
||||
|
||||
getRightColumnsWidth() {
|
||||
getRightColumnsWidth(contentWidth=1) {
|
||||
return this._cache('rightColumnsWidth', () => {
|
||||
let rightColumnsWidth =0;
|
||||
this.groupedColumns().forEach(column =>{
|
||||
if (column.fixed === 'right'){
|
||||
rightColumnsWidth += column.width;
|
||||
let width = column.width;
|
||||
if(typeof(width) == 'string' && width.includes('%') ){
|
||||
width = contentWidth * parseInt(col.width) /100;
|
||||
}
|
||||
rightColumnsWidth += parseInt(width)
|
||||
}
|
||||
});
|
||||
return rightColumnsWidth;
|
||||
|
|
|
@ -760,12 +760,12 @@ class Table extends Component {
|
|||
if (scroll.x === true) {
|
||||
tableStyle.tableLayout = 'fixed';
|
||||
} else {
|
||||
tableStyle.width = this.contentWidth - this.columnManager.getLeftColumnsWidth() - this.columnManager.getRightColumnsWidth();
|
||||
tableStyle.width = this.contentWidth - this.columnManager.getLeftColumnsWidth(this.contentWidth) - this.columnManager.getRightColumnsWidth(this.contentWidth);
|
||||
}
|
||||
}
|
||||
// 自动出现滚动条
|
||||
if ( !fixed && this.contentDomWidth < this.contentWidth) {
|
||||
tableStyle.width = this.contentWidth - this.columnManager.getLeftColumnsWidth() - this.columnManager.getRightColumnsWidth();
|
||||
tableStyle.width = this.contentWidth - this.columnManager.getLeftColumnsWidth(this.contentWidth) - this.columnManager.getRightColumnsWidth(this.contentWidth);
|
||||
}
|
||||
const tableBody = hasBody ? getBodyWrapper(
|
||||
<tbody className={`${clsPrefix}-tbody`}>
|
||||
|
@ -840,8 +840,8 @@ class Table extends Component {
|
|||
</div>
|
||||
);
|
||||
}
|
||||
const leftFixedWidth = this.columnManager.getLeftColumnsWidth();
|
||||
const rightFixedWidth = this.columnManager.getRightColumnsWidth();
|
||||
const leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
|
||||
const rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
|
||||
let parStyle = {}
|
||||
if(!fixed){
|
||||
parStyle = {'marginLeft':leftFixedWidth,'marginRight':rightFixedWidth}
|
||||
|
|
Loading…
Reference in New Issue