增加复杂场景下大数据渲染示例;左右固定宽度支持字符串

This commit is contained in:
wanghaoo 2018-12-24 11:24:51 +08:00
parent 097537ef75
commit b9c66aed7f
6 changed files with 49 additions and 28 deletions

View File

@ -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

40
dist/demo.js vendored

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -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;

View File

@ -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}