add:完善过滤列支持下拉条件自定义模式.

This commit is contained in:
kvkens 2018-10-11 20:15:00 +08:00
parent a750a2131d
commit 31e75d128f
8 changed files with 1018 additions and 1458 deletions

View File

@ -144,8 +144,21 @@ class Demo27 extends Component {
}
},
{ title: "姓名", width: 180, dataIndex: "name", key: "name", filterType: "text", filterDropdown: "show" },
{ title: "年龄", width: 150, sorter: (a, b) => a.age - b.age, dataIndex: "age", key: "age", filterType: "dropdown", filterDropdown: "show" },
{ title: "居住地址", width: 150, dataIndex: "address", key: "address", filterType: "dropdown", filterDropdown: "show" },
{
title: "年龄",
width: 150,
sorter: (a, b) => a.age - b.age,
dataIndex: "age",
key: "age",
filterType: "dropdown",
filterDropdown: "hide",
filterDropdownAuto: "manual",//切换手动传入模式
filterDropdownData: [{
key: '数据',
value: '数据'
}]
},
{ title: "居住地址", width: 150, dataIndex: "address", key: "address", filterType: "dropdown", filterDropdown: "hide" },
];
return <ComplexTable
onFilterRowsDropChange={this.handlerFilterRowsDropChange}//下拉条件的回调(key,val)=>()

File diff suppressed because one or more lines are too long

4
dist/demo.css vendored
View File

@ -2553,9 +2553,9 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
@font-face {
font-family: "uf";
src: url("../style/utils/iconfont.eot");
src: url("../node_modules/tinper-bee-core/scss/iconfont.eot?t=1483429573920");
/* IE9*/
src: url("../style/utils/iconfont.eot") format("embedded-opentype"), url("../style/utils/iconfont.woff") format("woff"), url("../style/utils/iconfont.ttf") format("truetype"), url("../style/utils/iconfont.svg") format("svg");
src: url("../node_modules/tinper-bee-core/scss/iconfont.eot?t=1483429573920#iefix") format("embedded-opentype"), url("../node_modules/tinper-bee-core/scss/iconfont.woff?t=1483429573920") format("woff"), url("../node_modules/tinper-bee-core/scss/iconfont.ttf?t=1483429573920") format("truetype"), url("../node_modules/tinper-bee-core/scss/iconfont.svg?t=1483429573920#uf") format("svg");
/* iOS 4.1- */ }
.uf {

2
dist/demo.css.map vendored

File diff suppressed because one or more lines are too long

2383
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

@ -178,30 +178,30 @@ class Table extends Component {
}
}
computeTableWidth(){
//如果用户传了scroll.x按用户传的为主
let setWidthParam = this.props.scroll.x
if(typeof(setWidthParam) == 'number'){
let numSetWidthParam = parseInt(setWidthParam);
this.contentWidth = numSetWidthParam;
}else{
//计算总表格宽度、根据表格宽度和各列的宽度和比较,重置最后一列
this.contentDomWidth = this.contentTable.getBoundingClientRect().width//表格容器宽度
this.contentWidth = this.contentDomWidth;//默认与容器宽度一样
if(typeof(setWidthParam)=='string' && setWidthParam.indexOf('%')){
this.contentWidth = this.contentWidth * parseInt(setWidthParam) /100
}
}
const computeObj = this.columnManager.getColumnWidth(this.contentWidth);
let lastShowIndex = computeObj.lastShowIndex;
this.computeWidth = computeObj.computeWidth;
if(this.computeWidth < this.contentWidth){
let contentWidthDiff = this.contentWidth - this.computeWidth;
this.setState({contentWidthDiff,lastShowIndex});
}else{
this.contentWidth = this.computeWidth;
this.setState({contentWidthDiff:0,lastShowIndex});//重新渲染,为了显示滚动条
computeTableWidth() {
//如果用户传了scroll.x按用户传的为主
let setWidthParam = this.props.scroll.x
if (typeof (setWidthParam) == 'number') {
let numSetWidthParam = parseInt(setWidthParam);
this.contentWidth = numSetWidthParam;
} else {
//计算总表格宽度、根据表格宽度和各列的宽度和比较,重置最后一列
this.contentDomWidth = this.contentTable.getBoundingClientRect().width//表格容器宽度
this.contentWidth = this.contentDomWidth;//默认与容器宽度一样
if (typeof (setWidthParam) == 'string' && setWidthParam.indexOf('%')) {
this.contentWidth = this.contentWidth * parseInt(setWidthParam) / 100
}
}
const computeObj = this.columnManager.getColumnWidth(this.contentWidth);
let lastShowIndex = computeObj.lastShowIndex;
this.computeWidth = computeObj.computeWidth;
if (this.computeWidth < this.contentWidth) {
let contentWidthDiff = this.contentWidth - this.computeWidth;
this.setState({ contentWidthDiff, lastShowIndex });
} else {
this.contentWidth = this.computeWidth;
this.setState({ contentWidthDiff: 0, lastShowIndex });//重新渲染,为了显示滚动条
}
}
onExpandedRowsChange(expandedRowKeys) {
@ -344,7 +344,9 @@ class Table extends Component {
dataindex: column.dataIndex,
datasource: this.props.data,
format: column.format,
filterdropdown: column.filterDropdown
filterdropdown: column.filterDropdown,
filterdropdownauto: column.filterDropdownAuto,//是否自定义数据
filterdropdowndata: column.filterDropdownData//自定义数据格式
});
}
});
@ -524,7 +526,7 @@ class Table extends Component {
getColGroup(columns, fixed) {
let cols = [];
let self= this;
let self = this;
let { contentWidthDiff = 0, lastShowIndex = 0 } = this.state;
if (this.props.expandIconAsCell && fixed !== 'right') {
cols.push(
@ -546,9 +548,9 @@ class Table extends Component {
}
cols = cols.concat(leafColumns.map((c, i, arr) => {
let width = c.width;
if(typeof(width)=='string' && width.indexOf('%')>-1 && self.contentWidth){
width = parseInt(self.contentWidth * parseInt(width) /100);
}else if(width){
if (typeof (width) == 'string' && width.indexOf('%') > -1 && self.contentWidth) {
width = parseInt(self.contentWidth * parseInt(width) / 100);
} else if (width) {
width = parseInt(width);
}
if (lastShowIndex == i) {
@ -633,8 +635,8 @@ class Table extends Component {
tableStyle.width = this.contentWidth;
}
}
// 自动出现滚动条
if(this.contentDomWidth > this.contentWidth){
// 自动出现滚动条
if (this.contentDomWidth > this.contentWidth) {
tableStyle.width = this.contentDomWidth;
}
const tableBody = hasBody ? getBodyWrapper(

View File

@ -247,7 +247,7 @@ class TableHeader extends Component {
//下拉框选择
case 'dropdown':
let selectDataSource = [];
if (rows.length > 0) {
if (rows.length > 0 && (rows[1][index]['filterdropdownauto'] || 'auto') == 'auto') {
let hash = {};
//处理下拉重复对象组装dropdown
selectDataSource = Array.from(rows[1][0].datasource, x => ({ key: x[dataIndex], value: x[dataIndex] }));
@ -255,6 +255,8 @@ class TableHeader extends Component {
hash[next.key] ? '' : hash[next.key] = true && item.push(next);
return item
}, []);
} else {
selectDataSource = rows[1][index]['filterdropdowndata']
}
return <FilterType
rendertype={type}