动态过滤列

This commit is contained in:
jonyshi 2018-05-04 14:31:24 +08:00
commit 79a056c1c9
4 changed files with 120 additions and 41 deletions

View File

@ -9,6 +9,7 @@
import React, { Component } from 'react';
import Table from '../../src';
import filterColumn from '../../src/lib/filterColumn';
import sum from '../../src/lib/sum';
import Icon from "bee-icon";
const columns21 = [
@ -29,6 +30,7 @@ const columns21 = [
dataIndex: "c",
key: "c",
width: 200,
sumCol: true,
sorter: (a, b) => a.c - b.c
},
{
@ -44,7 +46,7 @@ const data21 = [
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
];
const FilterColumnTable = filterColumn(Table);
const FilterColumnTable = filterColumn(sum(Table));
const defaultProps21 = {
prefixCls: "bee-table"

View File

@ -47,9 +47,8 @@
},
"dependencies": {
"bee-loading": "^1.0.3",
"bee-popconfirm": "^1.0.2",
"bee-popover": "^1.0.2",
"bee-select": "file:///Users/jony/workspaces/yonyou/component/bee-select",
"bee-select": "^1.0.8",
"classnames": "^2.2.5",
"object-path": "^0.11.3",
"shallowequal": "^1.0.2",

View File

@ -469,4 +469,29 @@ $table-move-in-color: $bg-color-base;
right: 3px;
width: 30px;
height: 30px;
}
.pop .u-modal-dialog{
border: 1px solid #ccc;
background: #fff;
}
.clear-setting{
border-bottom: 1px solid #ccc;
cursor: pointer;
}
.pop-cont{
margin: 10px;
margin-top: 0px;
}
.item{
margin-top: 10px;
line-height: 30px;
cursor: pointer;
}
.item>span{
margin-left: 5px;
width: 100px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}

View File

@ -1,58 +1,111 @@
import React, { Component } from "react";
import Icon from "bee-icon";
import Popconfirm from "bee-popconfirm";
import Icon from "bee-icon";
import Checkbox from "bee-checkbox";
import ReactDOM from 'react-dom';
import Popover from 'bee-popover';
/**
* 参数: 过滤表头
* @param {*} Table
*/
export default function filterColumn(Table) {
return class filterColumn extends Component {
// static propTypes = {
// showFilterColumn:PropTypes.boolen,//是否需要过滤表头
// }
constructor(props) {
super(props);
// this.state = {
// sortOrder: "",
// data: this.props.data
// };
}
// componentWillReceiveProps(nextProps){
// if(nextProps.data !== this.props.data){
// this.setState({
// sortOrder: "",
// data: nextProps.data,
// oldData: nextProps.data.concat(),
// });
// }
// }
getColumItem=()=>{
const {columns,data} = this.props;
debugger;
columns.map((da,i)=>(<div>
<div><Checkbox /></div>
<div>111</div>
</div>));
const {columns} = props;
let _column = [];
Object.assign(_column,columns);
_column.forEach(da => {
da.checked = true;
da.disable = true;
});
this.state = {
columns:_column,
showModal:false,
width:props.width?props.width:150,
screenX:0,
screenY:0
};
}
getShowModal=(event)=>{
let {showModal} = this.state;
if(showModal){
this.setState({
showModal:false
})
}
}
checkedColumItemClick = (da)=>{
let {columns} = this.state;
da.checked = da.checked?false:true;
da.disable = da.checked?true:false;
this.setState({
...this.state
})
}
openCloumList = (ev)=>{
let oEvent=ev||event;
this.setState({
screenX:oEvent.clientX,
screenY:oEvent.clientY,
showModal:true
});
}
getCloumItem=()=>{
const {columns} = this.state;
return columns.map((da,i)=> (<div key={da.key+"_"+i} className="item" onClick={()=>{this.checkedColumItemClick(da)}}>
<Checkbox id={da.key} checked={da.checked}/>
<span>{da.title}</span>
</div>))
}
clear=()=>{
const {columns} = this.state;
// let _chek = columns[0].checked?false:true;
columns.forEach(da => {
da.checked = true;
da.disable = true;
});
this.setState({
...this.state
})
}
render() {
const {columns,data} = this.props;
return <div className="bee-table-column-filter-cont">
<Table {...this.props} columns={columns} data={data} />
<div className="bee-table-column-filter"><Icon type="uf-navmenu" /></div>
const {data} = this.props;
const {columns,showModal,width,screenX,screenY} = this.state;
let _columns = [];
columns.forEach((da)=>{
if(da.disable){
_columns.push(da);
}
});
<Popconfirm trigger="click" placement="right">
<span>清除设置</span>
<div>
ssss
</div>
</Popconfirm>
let content = (
<div className="pop-cont">
<span className="clear-setting" onClick={this.clear}>清除设置</span>
<div>
{
this.getCloumItem()
}
</div>
</div>);
return <div className="bee-table-column-filter-cont">
<Table {...this.props} columns={_columns} data={data} />
<Popover
placement="leftTop"
content={content} id="aa"
show={showModal} >
<div className="bee-table-column-filter"><Icon type="uf-navmenu" onClick={this.openCloumList}/></div>
</Popover>
</div>;
}
};