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

demo/demolist/Demo13.js

@@ -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) {

demo/demolist/Demo21.js

@@ -1,7 +1,7 @@
 /**
 *
 * @title 根据列进行过滤
-* @description 点击表格右侧按钮，进行表格列的数据过滤。
+* @description 点击表格右侧按钮，进行表格列的数据过滤。可以自定义设置显示某列，通过ifshow属性控制，默认为true都显示。afterFilter为过滤之后的回调函数
 *
 */
 
@@ -14,11 +14,27 @@ import Icon from "bee-icon";
 import Checkbox from 'bee-checkbox';
 import Popover from 'bee-popover';
 
-const columns21 = [
+const data21 = [
+  { a: "杨过", b: "男", c: 30,d:'内行',e: "操作", key: "2" },
+  { a: "令狐冲", b: "男", c: 41,d:'大侠',e: "操作", key: "1" },
+  { a: "郭靖", b: "男", c: 25,d:'大侠',e: "操作", key: "3" }
+];
+
+const FilterColumnTable = filterColumn(Table, Popover, Icon);
+
+const defaultProps21 = {
+  prefixCls: "bee-table"
+};
+
+class Demo21 extends Component {
+  constructor(props) {
+    super(props);
+    this.state ={
+              columns21: [
                 {
                   title: "名字",
                   dataIndex: "a",
-    key: "a",
+                  key: "a"
                   // width: 100
                 },
                 {
@@ -31,6 +47,7 @@ const columns21 = [
                   title: "年龄",
                   dataIndex: "c",
                   key: "c",
+                  ifshow:false,
                   // width: 200,
                   // sumCol: true,
                   sorter: (a, b) => a.c - b.c
@@ -64,28 +81,26 @@ const columns21 = [
                     );
                   }
                 }
-];
+              ]};
+  }
+  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
+        });
+    }
     
-const data21 = [
-  { a: "杨过", b: "男", c: 30,d:'内行',e: "操作", key: "2" },
-  { a: "令狐冲", b: "男", c: 41,d:'大侠',e: "操作", key: "1" },
-  { a: "郭靖", b: "男", c: 25,d:'大侠',e: "操作", key: "3" }
-];
-
-const FilterColumnTable = filterColumn(Table, Popover, Icon);
-
-const defaultProps21 = {
-  prefixCls: "bee-table"
-};
-
-class Demo21 extends Component {
-  constructor(props) {
-    super(props);
   }
  
   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;

dist/demo.css

@@ -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;

src/lib/filterColumn.js

@@ -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 => {
+        //默认所有的列都显示，如果传递ifshow属性，根据ifshow属性值来判断是否显示某列
+        if(da.hasOwnProperty('ifshow')){
+          da.checked = da.ifshow?true:false;
+          da.ifshow = da.checked;
+        }else{
           da.checked = true;
-        da.disable = 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>;
     }
   };
+
 }

src/lib/sort.js

@@ -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;