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

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

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 => {
-        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>;
     }
   };
+
 }

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;