动态过滤列
This commit is contained in:
jonyshi
commit
79a056c1c9
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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>;
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue