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