修改readme

README.md

@@ -10,9 +10,20 @@
 
 react bee-table component for tinper-bee
 
-some description...
+该table组件除了基本表格功能集成之外，还提供了一下功能。
+  * 动态设置过滤列
+  * 排序合计
+  * 多选
+  * 主子表
+  * 固定表头
+  * 交互列
+  * 列拖拽
+  * 嵌套子表格
+  * 行、列合并
+  
+具体示例代码参考[!这里](http://bee.tinper.org/bee-table/)
 
-## install
+## 安装
 
 [![bee-table](https://nodei.co/npm/bee-table.png)](https://npmjs.org/package/bee-table)
 
@@ -112,26 +123,19 @@ class Demo extends Component {
 | order | 设置排序 | string（"descend"、"ascend"） | -|
 
 
-
-
-
-## mixin
-
-Table拓展功能方法。注：拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然在操作state会导致功能出现异常
-
 ## 如何引用
 需要单独的去引用相应的js文件，目录在lib文件夹，示例如下：
 
 * 在tinper-bee中引用
 
 ```js
-import multiSelect from "tinper-bee/lib/multiSelect.js"
+import {Table} from "tinper-bee"
 ```
 
 * 单独安装bee-table 方式
 
 ```js
-import multiSelect from "bee-table/build/lib/multiSelect.js"
+import Table from "bee-table"
 ```
 
 

demo/demolist/Demo23.js

@@ -58,6 +58,7 @@ class Demo23 extends Component {
   render() {
     return <DragColumnTable columns={columns23} data={data23} bordered
     dragborder={true}
+    draggable={true} 
     />;
   }
 }

dist/demo.css

@@ -8530,7 +8530,7 @@ ul {
   .u-table-thead th {
     background: #f7f7f7; }
   .u-table-thead .th-drag {
-    cursor: move; }
+    cursor: pointer; }
   .u-table-thead .th-drag-hover {
     background: #ccc; }
   .u-table-thead-th {

src/Table.scss

@@ -270,8 +270,12 @@ $table-move-in-color: $bg-color-base;
       background: $table-head-background-color;
     }
     .th-drag{
-      cursor: move;
+      cursor: pointer;
     }
+    //为了区分是拖拽宽度还是交换列，先注释上面了
+    // .th-drag:hover{
+    //   background:#ccc;
+    // }
     .th-drag-hover{ 
       background: #ccc;
     }
@@ -344,6 +348,7 @@ $table-move-in-color: $bg-color-base;
       background: #fff;
     }
   }
+  //拖拽宽度代码
 }
 
 .u-table.bordered {

src/lib/dragColumnWidth.js

@@ -0,0 +1,127 @@
+import React, { Component } from "react";
+import {compare} from './util';
+import {ObjectAssign} from '../utils';
+/**
+ * 参数: 列拖拽
+ * @param {*} Table
+ */
+ 
+export default function dragColumn(Table) {
+
+  return class DragColumn extends Component {
+
+    constructor(props) {
+      super(props);
+      this.state = {
+        columns:this.setColumOrderByIndex(props.columns)
+      };
+    }
+
+    componentWillReceiveProps(nextProps){
+      if(nextProps.columns != this.props.columns){
+        this.setState({
+          columns:this.setColumOrderByIndex(nextProps.columns)
+        })
+      }
+    }
+ 
+    setColumOrderByIndex = (_column)=>{
+      _column.forEach((da,i) => {
+          da.dragIndex = i;
+          da.drgHover = false;
+      });
+      return _column; 
+    }
+
+
+    onDragStart=(event,data)=>{
+      if(this.props.onDragStart){
+        this.props.onDragStart(event,data)
+      }
+    }
+
+    onDragOver=(event,data)=>{
+      if(this.props.onDragOver){
+       this.props.onDragOver(event,data)
+      }
+    }
+
+    onDragEnter=(event,data)=>{
+      if(data.key == "checkbox")return;
+      const {columns:_columns} = this.state;
+      let columns = [];
+      Object.assign(columns,_columns);
+      columns.forEach((da)=>da.drgHover = false)
+      let current = columns.find((da)=>da.key == data.key);
+      if(current.fixed)return;
+      current.drgHover = true;
+      this.setState({
+        columns
+      });
+      if(this.props.onDragEnter){
+        this.props.onDragEnter(event,data);
+      }
+    }
+
+    onDrop=(event,data)=>{
+      if(data.key == "checkbox")return;
+      let {columns} = this.state;
+      const id = event.dataTransfer.getData("Text");
+      let objIndex =  columns.findIndex((_da,i)=>_da.key == id);
+      let targetIndex = columns.findIndex((_da,i)=>_da.key == data.key);
+      if(columns[objIndex].fixed)return;//固定列不让拖拽
+      if(columns[targetIndex].fixed)return;//固定列不让拖拽
+      columns.forEach((da,i)=>{
+        da.drgHover = false;
+        if(da.key == id){//obj
+          da.dragIndex = targetIndex
+        }
+        if(da.key == data.key){//targetObj
+          da.dragIndex = objIndex;
+        }
+      });
+     let _columns =  columns.sort(compare('dragIndex'));
+      this.setState({
+        columns: JSON.parse(JSON.stringify(_columns)),
+      });
+      if(this.props.onDrop){
+        this.props.onDrop(event,data);
+      }
+    }
+ 
+    getTarget=(evt)=>{
+        return evt.target || evt.srcElement;
+    }
+
+    render() {
+      const {
+          data,
+          dragborder,
+          draggable,
+          className,
+          columns,
+          onDragStart,
+          onDragEnter,
+          onDragOver,
+          onDrop,
+          ...others
+      } = this.props;
+      let key = new Date().getTime();
+      return (
+          <Table
+              {...others}
+              columns={this.state.columns}
+              data={data}
+              className={`${className} u-table-drag-border`}
+              onDragStart={this.onDragStart}
+              onDragOver={this.onDragOver}
+              onDrop={this.onDrop}
+              onDragEnter={this.onDragEnter}
+              draggable={draggable}
+              // dragborder={dragborder}
+              dragborder={false}
+              dragborderKey={key}
+          />)
+    }
+  };
+}