innov
/
bee-table
1
0
Fork 0
Code Issues Pull Requests 3 Projects Releases Wiki Activity

动态设置过滤列，增加回调函数，过滤列和排序一起使用时样式问题

This commit is contained in:
wanghaoo 2018-09-03 16:55:17 +08:00
parent b09dbc0c20
commit ebe46b99e5
9 changed files with 2275 additions and 2209 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
demo/demolist/Demo13.js
View File

@ -11,8 +11,10 @@ import Checkbox from "bee-checkbox";
import Button from "bee-button";
import Icon from "bee-icon";
import multiSelect from "../../src/lib/multiSelect.js";
import filterColumn from '../../src/lib/filterColumn';
import sort from "../../src/lib/sort.js";
import sum from "../../src/lib/sum.js";
import Popover from 'bee-popover';
const columns13 = [
{
@ -68,7 +70,7 @@ const data13_1 = [
{ a: "郭靖", b: "男", c: 25, d: "大侠", key: "3" }
];
//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
let ComplexTable = multiSelect(sum(sort(Table, Icon)), Checkbox);
let ComplexTable = filterColumn(multiSelect(sum(sort(Table, Icon)), Checkbox),Popover,Icon) ;
class Demo13 extends Component {
constructor(props) {

123
demo/demolist/Demo21.js
View File

@ -1,7 +1,7 @@
/**
*
* @title 根据列进行过滤
* @description 点击表格右侧按钮，进行表格列的数据过滤。
* @description 点击表格右侧按钮，进行表格列的数据过滤。可以自定义设置显示某列，通过ifshow属性控制，默认为true都显示。afterFilter为过滤之后的回调函数
*
*/
@ -14,58 +14,6 @@ import Icon from "bee-icon";
import Checkbox from 'bee-checkbox';
import Popover from 'bee-popover';
const columns21 = [
{
title: "名字",
dataIndex: "a",
key: "a",
// width: 100
},
{
title: "性别",
dataIndex: "b",
key: "b",
// width: 100
},
{
title: "年龄",
dataIndex: "c",
key: "c",
// width: 200,
// sumCol: true,
sorter: (a, b) => a.c - b.c
},
{
title: "武功级别",
dataIndex: "d",
key: "d"
},
{
title: "操作",
dataIndex: "e",
key: "e",
render(text, record, index){
return (
<div title={text} >
<a href="#"
tooltip={text}
onClick={() => {
alert('这是第'+index+'列，内容为:'+text);
}}
// style={{
// position: 'absolute',
// top: 5,
// left: 0
// }}
>
一些操作
</a>
</div>
);
}
}
];
const data21 = [
{ a: "杨过", b: "男", c: 30,d:'内行',e: "操作", key: "2" },
{ a: "令狐冲", b: "男", c: 41,d:'大侠',e: "操作", key: "1" },
@ -81,11 +29,78 @@ const defaultProps21 = {
class Demo21 extends Component {
constructor(props) {
super(props);
this.state ={
columns21: [
{
title: "名字",
dataIndex: "a",
key: "a"
// width: 100
},
{
title: "性别",
dataIndex: "b",
key: "b",
// width: 100
},
{
title: "年龄",
dataIndex: "c",
key: "c",
ifshow:false,
// width: 200,
// sumCol: true,
sorter: (a, b) => a.c - b.c
},
{
title: "武功级别",
dataIndex: "d",
key: "d"
},
{
title: "操作",
dataIndex: "e",
key: "e",
render(text, record, index){
return (
<div title={text} >
<a href="#"
tooltip={text}
onClick={() => {
alert('这是第'+index+'列，内容为:'+text);
}}
// style={{
// position: 'absolute',
// top: 5,
// left: 0
// }}
>
一些操作
</a>
</div>
);
}
}
]};
}
afterFilter = (optData,columns)=>{
if(optData.key == 'b'){
if(optData.ifshow){
columns[2].ifshow = false;
}else{
columns[2].ifshow = true;
}
this.setState({
columns21 :columns,
showFilterPopover:true
});
}
}
render() {
return <FilterColumnTable columns={columns21} data={data21} />;
return <FilterColumnTable columns={this.state.columns21} data={data21} afterFilter={this.afterFilter} showFilterPopover={this.state.showFilterPopover}/>;
}
}
Demo21.defaultProps = defaultProps21;

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

2
dist/demo.css vendored
View File

@ -8292,7 +8292,7 @@ ul {
overflow-x: scroll;
padding-bottom: 20px;
margin-bottom: -20px;
overflow-y: auto;
overflow-y: scroll;
box-sizing: border-box; }
.u-table-title {
padding: 12px 8px;

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

4314
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

33
src/lib/filterColumn.js
View File

@ -2,6 +2,7 @@ import React, { Component } from "react";
import Checkbox from 'bee-checkbox';
import Icon from "bee-icon";
import {ObjectAssign} from '../utils';
function noop() {}
/**
* 参数: 过滤表头
* @param {*} Table
@ -13,7 +14,9 @@ export default function filterColumn(Table,Popover) {
return class FilterColumn extends Component {
static defaultProps = {
prefixCls: "u-table-filter-column"
prefixCls: "u-table-filter-column",
afterFilter: noop,
scroll:{}
}
constructor(props) {
@ -28,25 +31,30 @@ export default function filterColumn(Table,Popover) {
setColumOrderByIndex = (_column)=>{
_column.forEach(da => {
da.checked = true;
da.disable = true;
//默认所有的列都显示，如果传递ifshow属性，根据ifshow属性值来判断是否显示某列
if(da.hasOwnProperty('ifshow')){
da.checked = da.ifshow?true:false;
da.ifshow = da.checked;
}else{
da.checked = true;
da.ifshow = true;
}
});
return _column;
}
componentWillReceiveProps(nextProps){
if(nextProps.columns != this.props.columns){
this.setState({
columns:ObjectAssign(nextProps.columns)
columns:this.setColumOrderByIndex(ObjectAssign(nextProps.columns))
})
}
this.setState({
showModal:false
showModal:nextProps.showFilterPopover?true:false
})
}
checkedColumItemClick = (da)=>{
let {checkMinSize} = this.props;
let {checkMinSize,afterFilter} = this.props;
// if(checkMinSize)
let sum = 0,leng=0;
this.state.columns.forEach(da => {
@ -59,10 +67,12 @@ export default function filterColumn(Table,Popover) {
if(sum<=1 && da.checked)return;
}
da.checked = da.checked?false:true;
da.disable = da.checked?true:false;
da.ifshow = da.checked?true:false;
this.setState({
...this.state
})
afterFilter(da,this.state.columns);
}
openCloumList = ()=>{
@ -89,7 +99,7 @@ export default function filterColumn(Table,Popover) {
const {columns} = this.state;
columns.forEach(da => {
da.checked = true;
da.disable = true;
da.ifshow = true;
});
this.setState({
...this.state
@ -103,7 +113,7 @@ export default function filterColumn(Table,Popover) {
sum += da.width;
}
})
console.log("sum",sum);
// console.log("sum",sum);
return (sum);
}
@ -113,7 +123,7 @@ export default function filterColumn(Table,Popover) {
let _columns = [],widthState=0,scroll=scrollPro;
columns.forEach((da)=>{
if(da.disable){
if(da.ifshow){
_columns.push(da);
if(da.width){
widthState++;
@ -153,4 +163,5 @@ export default function filterColumn(Table,Popover) {
</div>;
}
};
}

2
src/lib/sort.js
View File

@ -66,7 +66,7 @@ export default function sort(Table, Icon) {
});
};
renderColumnsDropdown=(columns)=>{
const prefixCls = this.props.prefixCls || "bee-table";
const prefixCls = "bee-table";
return columns.map(originColumn => {
let column = Object.assign({}, originColumn);
let sortButton;