动态过滤列

demo/demolist/Demo21.js

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

package.json

@@ -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",

src/Table.scss

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

src/lib/filterColumn.js

@@ -1,58 +1,111 @@
 import React, { Component } from "react";
-import Icon from "bee-icon";
+import Icon from "bee-icon"; 
-import Popconfirm from "bee-popconfirm";
 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 = {
+      const {columns} = props;
-      //   sortOrder: "",
+      let _column = [];
-      //   data: this.props.data
+      Object.assign(_column,columns);
-      // };
+      _column.forEach(da => {
-    }
+        da.checked = true;
-    // componentWillReceiveProps(nextProps){
+        da.disable = true;
-    //   if(nextProps.data !== this.props.data){
+      });
-    //     this.setState({
+      this.state = { 
-    //       sortOrder: "",
+        columns:_column,
-    //       data: nextProps.data,
+        showModal:false,
-    //       oldData: nextProps.data.concat(),
+        width:props.width?props.width:150,
-    //     });
+        screenX:0,
-    //   }
+        screenY:0
-    // }
+      };
-
-    getColumItem=()=>{
-      const {columns,data} = this.props;
-      debugger;
-      columns.map((da,i)=>(<div>
-        <div><Checkbox /></div>
-        <div>111</div>
-      </div>));
     }
 
+    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;
+      const {data} = this.props;
-      return <div className="bee-table-column-filter-cont">
+      const {columns,showModal,width,screenX,screenY} = this.state;
-          <Table {...this.props} columns={columns} data={data} />
+      let _columns = [];
-          <div className="bee-table-column-filter"><Icon type="uf-navmenu" /></div>
+      columns.forEach((da)=>{
+        if(da.disable){
+          _columns.push(da);
+        }
+      });
 
-          <Popconfirm trigger="click" placement="right">
+      let content = (
-              <span>清除设置</span>
+        <div className="pop-cont"> 
-              <div>
+        <span className="clear-setting" onClick={this.clear}>清除设置</span>
-                  ssss
+        <div>
-              </div>
+           {
-          </Popconfirm>
+            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>;
     }
   };