列过滤、拖拽一起使用

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;

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;

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
       };
     }
@@ -58,8 +58,6 @@ export default function filterColumn(Table, Checkbox, Popover, Icon) {
     openCloumList = (ev)=>{
       let oEvent=ev||event; 
       this.setState({ 
-        screenX:oEvent.clientX,
-        screenY:oEvent.clientY,
         showModal:true
       });
     }
@@ -75,7 +73,6 @@ export default function filterColumn(Table, Checkbox, Popover, Icon) {
 
     clear=()=>{
       const {columns} = this.state; 
-      // let _chek = columns[0].checked?false:true;
       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} />
+          <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>
+                <div className={`${prefixCls}-pop-column-filter`}>
+                  <Icon type="uf-navmenu" onClick={this.openCloumList}/>
+                </div>
             </Popover>
+          </div>
         </div>;
     }
   };