增加是否可过滤API
This commit is contained in:
wanghaoo
parent
9ed6fd4cad
commit
3c91162336
|
|
@ -1,9 +1,9 @@
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import Checkbox from 'bee-checkbox';
|
import Checkbox from "bee-checkbox";
|
||||||
import Icon from "bee-icon";
|
import Icon from "bee-icon";
|
||||||
import {ObjectAssign} from './util';
|
import { ObjectAssign } from "./util";
|
||||||
import i18n from '../i18n'
|
import i18n from "../i18n";
|
||||||
import { getComponentLocale } from 'bee-locale/build/tool';
|
import { getComponentLocale } from "bee-locale/build/tool";
|
||||||
|
|
||||||
function noop() {}
|
function noop() {}
|
||||||
/**
|
/**
|
||||||
|
|
@ -13,125 +13,143 @@ function noop() {}
|
||||||
* @param {*} Icon
|
* @param {*} Icon
|
||||||
*/
|
*/
|
||||||
|
|
||||||
export default function filterColumn(Table,Popover) {
|
export default function filterColumn(Table, Popover) {
|
||||||
|
|
||||||
return class FilterColumn extends Component {
|
return class FilterColumn extends Component {
|
||||||
static defaultProps = {
|
static defaultProps = {
|
||||||
prefixCls: "u-table-filter-column",
|
prefixCls: "u-table-filter-column",
|
||||||
afterFilter: noop,
|
afterFilter: noop,
|
||||||
scroll:{}
|
columnFilterAble: true,
|
||||||
}
|
scroll: {}
|
||||||
|
};
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
const {columns} = props;
|
const { columns } = props;
|
||||||
this.state = {
|
this.state = {
|
||||||
columns:this.setColumOrderByIndex(ObjectAssign(columns)),
|
columns: this.setColumOrderByIndex(ObjectAssign(columns)),
|
||||||
showModal:false,
|
showModal: false,
|
||||||
screenY:0
|
screenY: 0
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
setColumOrderByIndex = (_column)=>{
|
setColumOrderByIndex = _column => {
|
||||||
_column.forEach(da => {
|
_column.forEach(da => {
|
||||||
//默认所有的列都显示，如果传递ifshow属性，根据ifshow属性值来判断是否显示某列
|
//默认所有的列都显示，如果传递ifshow属性，根据ifshow属性值来判断是否显示某列
|
||||||
if(da.hasOwnProperty('ifshow')){
|
if (da.hasOwnProperty("ifshow")) {
|
||||||
da.checked = da.ifshow?true:false;
|
da.checked = da.ifshow ? true : false;
|
||||||
da.ifshow = da.checked;
|
da.ifshow = da.checked;
|
||||||
}else{
|
} else {
|
||||||
da.checked = true;
|
da.checked = true;
|
||||||
da.ifshow = true;
|
da.ifshow = true;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
return _column;
|
return _column;
|
||||||
}
|
};
|
||||||
componentWillReceiveProps(nextProps){
|
componentWillReceiveProps(nextProps) {
|
||||||
if(nextProps.columns != this.props.columns){
|
if (nextProps.columns != this.props.columns) {
|
||||||
this.setState({
|
this.setState({
|
||||||
columns:this.setColumOrderByIndex(ObjectAssign(nextProps.columns))
|
columns: this.setColumOrderByIndex(ObjectAssign(nextProps.columns))
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
this.setState({
|
this.setState({
|
||||||
showModal:nextProps.showFilterPopover?true:false
|
showModal: nextProps.showFilterPopover ? true : false
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
checkedColumItemClick = (da)=>{
|
checkedColumItemClick = da => {
|
||||||
let {checkMinSize,afterFilter} = this.props;
|
let { checkMinSize, afterFilter } = this.props;
|
||||||
// if(checkMinSize)
|
// if(checkMinSize)
|
||||||
let sum = 0,leng=0;
|
let sum = 0,
|
||||||
|
leng = 0;
|
||||||
this.state.columns.forEach(da => {
|
this.state.columns.forEach(da => {
|
||||||
da.fixed?"":leng++;
|
da.fixed ? "" : leng++;
|
||||||
!da.fixed && da.checked?sum++:"";
|
!da.fixed && da.checked ? sum++ : "";
|
||||||
});
|
});
|
||||||
if(sum < checkMinSize && da.checked){
|
if (sum < checkMinSize && da.checked) {
|
||||||
return;
|
return;
|
||||||
}else{
|
} else {
|
||||||
if(sum<=1 && da.checked)return;
|
if (sum <= 1 && da.checked) return;
|
||||||
}
|
}
|
||||||
da.checked = da.checked?false:true;
|
da.checked = da.checked ? false : true;
|
||||||
da.ifshow = da.checked?true:false;
|
da.ifshow = da.checked ? true : false;
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
...this.state
|
...this.state
|
||||||
})
|
|
||||||
afterFilter(da,this.state.columns);
|
|
||||||
}
|
|
||||||
|
|
||||||
openCloumList = ()=>{
|
|
||||||
this.setState({
|
|
||||||
showModal:true
|
|
||||||
});
|
});
|
||||||
}
|
afterFilter(da, this.state.columns);
|
||||||
|
};
|
||||||
|
|
||||||
getCloumItem=()=>{
|
openCloumList = () => {
|
||||||
const {prefixCls} = this.props;
|
this.setState({
|
||||||
const {columns} = this.state;
|
showModal: true
|
||||||
return columns.map((da,i)=>
|
});
|
||||||
{
|
};
|
||||||
if(!da.fixed){
|
|
||||||
return (<div key={da.key+"_"+i} className={`${prefixCls}-pop-cont-item`} >
|
getCloumItem = () => {
|
||||||
<Checkbox id={da.key} checked={da.checked} onClick={()=>{this.checkedColumItemClick(da)}}/>
|
const { prefixCls } = this.props;
|
||||||
<span>{da.title}</span>
|
const { columns } = this.state;
|
||||||
</div>)
|
return columns.map((da, i) => {
|
||||||
|
if (!da.fixed) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
key={da.key + "_" + i}
|
||||||
|
className={`${prefixCls}-pop-cont-item`}
|
||||||
|
>
|
||||||
|
<Checkbox
|
||||||
|
id={da.key}
|
||||||
|
checked={da.checked}
|
||||||
|
onClick={() => {
|
||||||
|
this.checkedColumItemClick(da);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<span>{da.title}</span>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
clear=()=>{
|
clear = () => {
|
||||||
const {columns} = this.state;
|
const { columns } = this.state;
|
||||||
columns.forEach(da => {
|
columns.forEach(da => {
|
||||||
da.checked = true;
|
da.checked = true;
|
||||||
da.ifshow = true;
|
da.ifshow = true;
|
||||||
});
|
});
|
||||||
this.setState({
|
this.setState({
|
||||||
columns
|
columns
|
||||||
})
|
});
|
||||||
this.props.afterFilter(this.state.columns,this.state.columns);
|
this.props.afterFilter(this.state.columns, this.state.columns);
|
||||||
}
|
};
|
||||||
|
|
||||||
getCloumnsScroll=(columns)=>{
|
getCloumnsScroll = columns => {
|
||||||
let sum = 0;
|
let sum = 0;
|
||||||
columns.forEach((da)=>{
|
columns.forEach(da => {
|
||||||
if(da.checked){
|
if (da.checked) {
|
||||||
sum += da.width;
|
sum += da.width;
|
||||||
}
|
}
|
||||||
})
|
});
|
||||||
// console.log("sum",sum);
|
// console.log("sum",sum);
|
||||||
return (sum);
|
return sum;
|
||||||
}
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {data,prefixCls,scroll:scrollPro} = this.props;
|
const { data, prefixCls, scroll: scrollPro } = this.props;
|
||||||
const {columns,showModal} = this.state;
|
const { columns, showModal } = this.state;
|
||||||
|
|
||||||
let locale = getComponentLocale(this.props, this.context, 'Table', () => i18n);
|
let locale = getComponentLocale(
|
||||||
|
this.props,
|
||||||
|
this.context,
|
||||||
|
"Table",
|
||||||
|
() => i18n
|
||||||
|
);
|
||||||
|
|
||||||
let _columns = [],widthState=0,scroll=scrollPro;
|
let _columns = [],
|
||||||
columns.forEach((da)=>{
|
widthState = 0,
|
||||||
if(da.ifshow){
|
scroll = scrollPro;
|
||||||
|
columns.forEach(da => {
|
||||||
|
if (da.ifshow) {
|
||||||
_columns.push(da);
|
_columns.push(da);
|
||||||
if(da.width){
|
if (da.width) {
|
||||||
widthState++;
|
widthState++;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -139,35 +157,43 @@ export default function filterColumn(Table,Popover) {
|
||||||
// if(_columns.length == widthState){
|
// if(_columns.length == widthState){
|
||||||
// scroll.x = this.getCloumnsScroll(columns);
|
// scroll.x = this.getCloumnsScroll(columns);
|
||||||
// }
|
// }
|
||||||
|
|
||||||
let content = (
|
|
||||||
<div className={`${prefixCls}-pop-cont`}>
|
|
||||||
<span className={`${prefixCls}-clear-setting`} onClick={this.clear}>{locale['resetSettings']}</span>
|
|
||||||
<div>
|
|
||||||
{
|
|
||||||
this.getCloumItem()
|
|
||||||
}
|
|
||||||
</div>
|
|
||||||
</div>);
|
|
||||||
|
|
||||||
return <div className={`${prefixCls}-cont`}>
|
let content = (
|
||||||
<Table {...this.props} columns={_columns} data={data}
|
<div className={`${prefixCls}-pop-cont`}>
|
||||||
// scroll={scroll}
|
<span className={`${prefixCls}-clear-setting`} onClick={this.clear}>
|
||||||
// scroll={{x:this.getCloumnsScroll(columns)}}
|
{locale["resetSettings"]}
|
||||||
/>
|
</span>
|
||||||
<div className={`${prefixCls}-filter-icon`}>
|
<div>{this.getCloumItem()}</div>
|
||||||
<Popover
|
</div>
|
||||||
id="filter_column_popover"
|
);
|
||||||
placement="left"
|
|
||||||
content={content}
|
return (
|
||||||
show={showModal} >
|
<div className={`${prefixCls}-cont`}>
|
||||||
|
<Table
|
||||||
|
{...this.props}
|
||||||
|
columns={_columns}
|
||||||
|
data={data}
|
||||||
|
// scroll={scroll}
|
||||||
|
// scroll={{x:this.getCloumnsScroll(columns)}}
|
||||||
|
/>
|
||||||
|
{this.props.columnFilterAble == false ? (
|
||||||
|
""
|
||||||
|
) : (
|
||||||
|
<div className={`${prefixCls}-filter-icon`}>
|
||||||
|
<Popover
|
||||||
|
id="filter_column_popover"
|
||||||
|
placement="left"
|
||||||
|
content={content}
|
||||||
|
show={showModal}
|
||||||
|
>
|
||||||
<div className={`${prefixCls}-pop-column-filter-cont`}>
|
<div className={`${prefixCls}-pop-column-filter-cont`}>
|
||||||
<Icon type="uf-grid" onClick={this.openCloumList}/>
|
<Icon type="uf-grid" onClick={this.openCloumList} />
|
||||||
</div>
|
</div>
|
||||||
</Popover>
|
</Popover>
|
||||||
</div>
|
</div>
|
||||||
</div>;
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue