增加复杂场景下大数据渲染示例;左右固定宽度支持字符串
This commit is contained in:
parent
097537ef75
commit
b9c66aed7f
|
@ -14,9 +14,8 @@ import Table from "../../src";
|
||||||
import BigData from "../../src/lib/bigData";
|
import BigData from "../../src/lib/bigData";
|
||||||
import multiSelect from '../../src/lib/MultiSelect';
|
import multiSelect from '../../src/lib/MultiSelect';
|
||||||
import filterColumn from '../../src/lib/filterColumn';
|
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 = [
|
const columns = [
|
||||||
{
|
{
|
||||||
|
@ -88,6 +87,9 @@ class Demo32 extends Component {
|
||||||
selectedRowIndex: 0
|
selectedRowIndex: 0
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
getSelectedDataFunc = data => {
|
||||||
|
console.log(data);
|
||||||
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
|
@ -102,8 +104,7 @@ class Demo32 extends Component {
|
||||||
selectedRowIndex: index
|
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;
|
return res;
|
||||||
}
|
}
|
||||||
|
|
||||||
getLeftColumnsWidth() {
|
getLeftColumnsWidth(contentWidth=1) {
|
||||||
return this._cache('leftColumnsWidth', () => {
|
return this._cache('leftColumnsWidth', () => {
|
||||||
let leftColumnsWidth =0;
|
let leftColumnsWidth =0;
|
||||||
this.groupedColumns().forEach(column =>{
|
this.groupedColumns().forEach(column =>{
|
||||||
if (column.fixed === 'left' || column.fixed === true){
|
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;
|
return leftColumnsWidth;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
getRightColumnsWidth() {
|
getRightColumnsWidth(contentWidth=1) {
|
||||||
return this._cache('rightColumnsWidth', () => {
|
return this._cache('rightColumnsWidth', () => {
|
||||||
let rightColumnsWidth =0;
|
let rightColumnsWidth =0;
|
||||||
this.groupedColumns().forEach(column =>{
|
this.groupedColumns().forEach(column =>{
|
||||||
if (column.fixed === 'right'){
|
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;
|
return rightColumnsWidth;
|
||||||
|
|
|
@ -760,12 +760,12 @@ class Table extends Component {
|
||||||
if (scroll.x === true) {
|
if (scroll.x === true) {
|
||||||
tableStyle.tableLayout = 'fixed';
|
tableStyle.tableLayout = 'fixed';
|
||||||
} else {
|
} 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) {
|
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(
|
const tableBody = hasBody ? getBodyWrapper(
|
||||||
<tbody className={`${clsPrefix}-tbody`}>
|
<tbody className={`${clsPrefix}-tbody`}>
|
||||||
|
@ -840,8 +840,8 @@ class Table extends Component {
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
const leftFixedWidth = this.columnManager.getLeftColumnsWidth();
|
const leftFixedWidth = this.columnManager.getLeftColumnsWidth(this.contentWidth);
|
||||||
const rightFixedWidth = this.columnManager.getRightColumnsWidth();
|
const rightFixedWidth = this.columnManager.getRightColumnsWidth(this.contentWidth);
|
||||||
let parStyle = {}
|
let parStyle = {}
|
||||||
if(!fixed){
|
if(!fixed){
|
||||||
parStyle = {'marginLeft':leftFixedWidth,'marginRight':rightFixedWidth}
|
parStyle = {'marginLeft':leftFixedWidth,'marginRight':rightFixedWidth}
|
||||||
|
|
Loading…
Reference in New Issue