列过滤、拖拽一起使用
This commit is contained in:
jonyshi
parent
d10da2494d
commit
3d480468ba
|
|
@ -0,0 +1,128 @@
|
|||
/**
|
||||
*
|
||||
* @title 根据列进行过滤----edit
|
||||
* @description 点击表格右侧按钮，进行表格列的数据过滤。
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
import multiSelect from '../../src/lib/multiSelect';
|
||||
import filterColumn from '../../src/lib/filterColumn';
|
||||
import dragColumn from "../../src/lib/dragColumn";
|
||||
|
||||
import sum from '../../src/lib/sum';
|
||||
import Icon from "bee-icon";
|
||||
import Checkbox from 'bee-checkbox';
|
||||
import Popover from 'bee-popover';
|
||||
|
||||
const columns25 = [
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: 100,
|
||||
fixed: "left"
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 100,
|
||||
sumCol: true,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
{
|
||||
title: "年龄1",
|
||||
dataIndex: "c1",
|
||||
key: "c1",
|
||||
width: 100,
|
||||
sumCol: true,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
{
|
||||
title: "年龄2",
|
||||
dataIndex: "c2",
|
||||
key: "c2",
|
||||
width: 100,
|
||||
sumCol: true,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
width: 100,
|
||||
key: "d",
|
||||
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "e",
|
||||
key: "e",
|
||||
fixed: "right",
|
||||
width: 100,
|
||||
render(text, record, index) {
|
||||
return (
|
||||
<div style={{position: 'relative'}} title={text} >
|
||||
<a
|
||||
href="#"
|
||||
tooltip={text}
|
||||
onClick={() => {
|
||||
alert('这是第'+index+'列，内容为:'+text);
|
||||
}}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 5,
|
||||
left: 0
|
||||
}}
|
||||
>
|
||||
操作
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const data25 = [
|
||||
{ a: "杨过rrrrr", b: "男", c: 30, c1: 30, c2: 30,d:'内行',e: "操作", key: "2" },
|
||||
{ a: "令狐冲", b: "男", c: 41, c1: 30, c2: 30,d:'大侠',e: "操作", key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25, c1: 30, c2: 30,d:'大侠',e: "操作", key: "3" }
|
||||
];
|
||||
|
||||
// const FilterColumnTable = filterColumn(Table, Popover);
|
||||
// const MultiSelectTable = multiSelect(Table, Checkbox);
|
||||
// let ComplexTable = multiSelect(Table, Checkbox);
|
||||
|
||||
const DragColumnTable = dragColumn(filterColumn(Table, Popover));
|
||||
|
||||
const defaultProps25 = {
|
||||
prefixCls: "bee-table"
|
||||
};
|
||||
|
||||
class Demo25 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
return <DragColumnTable columns={columns25} data={data25}
|
||||
bordered
|
||||
dragborder={true}
|
||||
scroll={{x:700}}
|
||||
|
||||
// multiSelect={{type: "checkbox"}}
|
||||
/>;
|
||||
}
|
||||
}
|
||||
Demo25.defaultProps = defaultProps25;
|
||||
|
||||
|
||||
export default Demo25;
|
||||
|
|
@ -316,12 +316,13 @@ $table-move-in-color: $bg-color-base;
|
|||
&-cont{
|
||||
position: relative;
|
||||
}
|
||||
&-pop-column-filter{
|
||||
&-filter-icon{
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 3px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
z-index: 2;
|
||||
}
|
||||
&-pop-cont-item{
|
||||
margin-top: 10px;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,6 @@
|
|||
import React, { Component } from "react";
|
||||
import Checkbox from 'bee-checkbox';
|
||||
import Icon from "bee-icon";
|
||||
/**
|
||||
* 参数: 过滤表头
|
||||
* @param {*} Table
|
||||
|
|
@ -7,7 +9,7 @@ import React, { Component } from "react";
|
|||
* @param {*} Icon
|
||||
*/
|
||||
|
||||
export default function filterColumn(Table, Checkbox, Popover, Icon) {
|
||||
export default function filterColumn(Table,Popover) {
|
||||
|
||||
return class FilterColumn extends Component {
|
||||
static defaultProps = {
|
||||
|
|
@ -26,8 +28,6 @@ export default function filterColumn(Table, Checkbox, Popover, Icon) {
|
|||
this.state = {
|
||||
columns:_column,
|
||||
showModal:false,
|
||||
width:props.width?props.width:150,
|
||||
screenX:0,
|
||||
screenY:0
|
||||
};
|
||||
}
|
||||
|
|
@ -57,9 +57,7 @@ export default function filterColumn(Table, Checkbox, Popover, Icon) {
|
|||
|
||||
openCloumList = (ev)=>{
|
||||
let oEvent=ev||event;
|
||||
this.setState({
|
||||
screenX:oEvent.clientX,
|
||||
screenY:oEvent.clientY,
|
||||
this.setState({
|
||||
showModal:true
|
||||
});
|
||||
}
|
||||
|
|
@ -74,8 +72,7 @@ export default function filterColumn(Table, Checkbox, Popover, Icon) {
|
|||
}
|
||||
|
||||
clear=()=>{
|
||||
const {columns} = this.state;
|
||||
// let _chek = columns[0].checked?false:true;
|
||||
const {columns} = this.state;
|
||||
columns.forEach(da => {
|
||||
da.checked = true;
|
||||
da.disable = true;
|
||||
|
|
@ -87,7 +84,7 @@ export default function filterColumn(Table, Checkbox, Popover, Icon) {
|
|||
|
||||
render() {
|
||||
const {data,prefixCls} = this.props;
|
||||
const {columns,showModal,width,screenX,screenY} = this.state;
|
||||
const {columns,showModal} = this.state;
|
||||
let _columns = [];
|
||||
columns.forEach((da)=>{
|
||||
if(da.disable){
|
||||
|
|
@ -107,12 +104,17 @@ export default function filterColumn(Table, Checkbox, Popover, Icon) {
|
|||
|
||||
return <div className={`${prefixCls}-cont`}>
|
||||
<Table {...this.props} columns={_columns} data={data} />
|
||||
<Popover
|
||||
placement="leftTop"
|
||||
content={content}
|
||||
show={showModal} >
|
||||
<div className={`${prefixCls}-pop-column-filter`}><Icon type="uf-navmenu" onClick={this.openCloumList}/></div>
|
||||
</Popover>
|
||||
<div className={`${prefixCls}-filter-icon`}>
|
||||
<Popover
|
||||
id="filter_column_popover"
|
||||
placement="leftTop"
|
||||
content={content}
|
||||
show={showModal} >
|
||||
<div className={`${prefixCls}-pop-column-filter`}>
|
||||
<Icon type="uf-navmenu" onClick={this.openCloumList}/>
|
||||
</div>
|
||||
</Popover>
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue