add:完善过滤列支持下拉条件自定义模式.
This commit is contained in:
parent
a750a2131d
commit
31e75d128f
|
@ -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
|
@ -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 {
|
||||
|
|
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
32
src/Table.js
32
src/Table.js
|
@ -178,29 +178,29 @@ class Table extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
computeTableWidth(){
|
||||
computeTableWidth() {
|
||||
//如果用户传了scroll.x按用户传的为主
|
||||
let setWidthParam = this.props.scroll.x
|
||||
if(typeof(setWidthParam) == 'number'){
|
||||
if (typeof (setWidthParam) == 'number') {
|
||||
let numSetWidthParam = parseInt(setWidthParam);
|
||||
this.contentWidth = numSetWidthParam;
|
||||
}else{
|
||||
} else {
|
||||
//计算总表格宽度、根据表格宽度和各列的宽度和比较,重置最后一列
|
||||
this.contentDomWidth = this.contentTable.getBoundingClientRect().width//表格容器宽度
|
||||
this.contentWidth = this.contentDomWidth;//默认与容器宽度一样
|
||||
if(typeof(setWidthParam)=='string' && setWidthParam.indexOf('%')){
|
||||
this.contentWidth = this.contentWidth * parseInt(setWidthParam) /100
|
||||
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){
|
||||
if (this.computeWidth < this.contentWidth) {
|
||||
let contentWidthDiff = this.contentWidth - this.computeWidth;
|
||||
this.setState({contentWidthDiff,lastShowIndex});
|
||||
}else{
|
||||
this.setState({ contentWidthDiff, lastShowIndex });
|
||||
} else {
|
||||
this.contentWidth = this.computeWidth;
|
||||
this.setState({contentWidthDiff:0,lastShowIndex});//重新渲染,为了显示滚动条
|
||||
this.setState({ contentWidthDiff: 0, lastShowIndex });//重新渲染,为了显示滚动条
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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) {
|
||||
|
@ -634,7 +636,7 @@ class Table extends Component {
|
|||
}
|
||||
}
|
||||
// 自动出现滚动条
|
||||
if(this.contentDomWidth > this.contentWidth){
|
||||
if (this.contentDomWidth > this.contentWidth) {
|
||||
tableStyle.width = this.contentDomWidth;
|
||||
}
|
||||
const tableBody = hasBody ? getBodyWrapper(
|
||||
|
|
|
@ -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}
|
||||
|
|
Loading…
Reference in New Issue