From 3d480468ba6d58c0a3b461f94eb022e4e14450b7 Mon Sep 17 00:00:00 2001
From: jonyshi <jonyshi@126.com>
Date: Sun, 24 Jun 2018 16:22:49 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=97=E8=BF=87=E6=BB=A4=E3=80=81=E6=8B=96?=
 =?UTF-8?q?=E6=8B=BD=E4=B8=80=E8=B5=B7=E4=BD=BF=E7=94=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/demolist/Demo25.js | 128 ++++++++++++++++++++++++++++++++++++++++
 src/Table.scss          |   3 +-
 src/lib/filterColumn.js |  32 +++++-----
 3 files changed, 147 insertions(+), 16 deletions(-)
 create mode 100644 demo/demolist/Demo25.js

diff --git a/demo/demolist/Demo25.js b/demo/demolist/Demo25.js
new file mode 100644
index 0000000..3031d6f
--- /dev/null
+++ b/demo/demolist/Demo25.js
@@ -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;
\ No newline at end of file
diff --git a/src/Table.scss b/src/Table.scss
index cea2e60..872c5cf 100644
--- a/src/Table.scss
+++ b/src/Table.scss
@@ -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;
diff --git a/src/lib/filterColumn.js b/src/lib/filterColumn.js
index 782b350..7c38ef4 100644
--- a/src/lib/filterColumn.js
+++ b/src/lib/filterColumn.js
@@ -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>;
     }
   };