普通表格拖拽

demo/demolist/Demo22.js

@@ -6,7 +6,6 @@
 import React, { Component } from 'react';
 import Table from '../../src'; 
 import dragColumn from '../../src/lib/dragColumn';
-import sum from '../../src/lib/sum';
 import Icon from "bee-icon";
 
 const columns22 = [
@@ -43,7 +42,7 @@ const data22 = [
   { a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
 ];
 
-const DragColumnTable = dragColumn(sum(Table));
+const DragColumnTable = dragColumn(Table);
 
 const defaultProps22 = {
   prefixCls: "bee-table"
@@ -55,7 +54,6 @@ class Demo22 extends Component {
   }
  
   render() {
-    
     return <DragColumnTable columns={columns22} data={data22} />;
   }
 }

src/Table.js

@@ -40,6 +40,8 @@ const propTypes = {
     rowRef: PropTypes.func,
     getBodyWrapper: PropTypes.func,
     children: PropTypes.node,
+
+    draggable: PropTypes.bool,
 };
 
 const defaultProps = {
@@ -218,7 +220,7 @@ class Table extends Component{
   }
 
   getHeader(columns, fixed) {
-    const { showHeader, expandIconAsCell, clsPrefix } = this.props;
+    const { showHeader, expandIconAsCell, clsPrefix ,onDragStart,onDragOver,onDrop,draggable} = this.props;
     const rows = this.getHeaderRows(columns);
 
     if (expandIconAsCell && fixed !== 'right') {
@@ -231,9 +233,10 @@ class Table extends Component{
     }
 
     const trStyle = fixed ? this.getHeaderRowStyle(columns, rows) : null;
-
+    let drop = draggable?{onDragStart,onDragOver,onDrop,draggable}:{};
     return showHeader ? (
       <TableHeader
+        {...drop}
         clsPrefix={clsPrefix}
         rows={rows}
         rowStyle={trStyle}

src/TableHeader.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import shallowequal from 'shallowequal';
-import { DragSource } from 'react-dnd';
 
 const propTypes = {
     clsPrefix: PropTypes.string,
@@ -10,39 +9,27 @@ const propTypes = {
 }
 
 class TableHeader extends Component{
+
   constructor(props){
     super(props);
-
-    this.drag = {};
-    drag.ondragstart = this.ondragstart;
-    drag.ondragenter = this.ondragenter;
-    drag.ondragover = this.ondragover;
   }
+
   shouldComponentUpdate(nextProps) {
     return !shallowequal(nextProps, this.props);
   }
  
-  ondragstart=()=>{
-    console.log();
-  }
-
-  ondragenter=()=>{
-
-  }
-
-  ondragover=()=>{
-
-  }
-
-  
   render() {
-    const { clsPrefix, rowStyle, rows } = this.props;
+    const { clsPrefix, rowStyle ,onDragStart,onDragOver,onDrop,draggable,rows} = this.props;
     return (
       <thead className={`${clsPrefix}-thead`}>
         {
           rows.map((row, index) => (
             <tr key={index} style={rowStyle}>
-              {row.map((cellProps, i) => (<th {...this.drag} draggable="true" {...cellProps} key={i} />))}
+              {row.map((da, i) => {
+                return draggable?(<th 
+                  onDragStart={(event)=>{this.props.onDragStart(event,da)}} onDragOver={this.props.onDragOver} onDrop={(event)=>{this.props.onDrop(event,da)}} draggable={draggable}
+                {...da} key={i} />):(<th {...da} key={i} />);
+            })}
             </tr>
           ))
         }

src/lib/dragColumn.js

@@ -3,111 +3,77 @@ import Icon from "bee-icon";
 import Checkbox from "bee-checkbox";
 import ReactDOM from 'react-dom';
 import Popover from 'bee-popover';
-import Dnd from 'bee-dnd';
+import {sortBy} from './util';
+
 /**
- * 参数: 过滤表头
+ * 参数: 列拖拽
  * @param {*} Table
  */
  
+export default function dragColumn(Table) {
 
-export default function filterColumn(Table) {
+  return class dragColumn extends Component {
-
-  return class filterColumn extends Component {
 
     constructor(props) {
       super(props);
       const {columns} = props;
+      this.setColumOrderByIndex(columns);
+    }
+
+    componentWillReceiveProps(nextProps){
+      if(nextProps.columns != this.props.columns){
+        this.setColumOrderByIndex();
+      }
+    }
+
+    setColumOrderByIndex = (columns)=>{
       let _column = [];
       Object.assign(_column,columns); 
-      _column.forEach(da => {
+      _column.forEach((da,i) => {
-        da.checked = true;
+          da.dragIndex = i;
-        da.disable = true;
       });
       this.state = {
-        columns:_column,
+        columns:_column
-        showModal:false,
-        width:props.width?props.width:150,
-        screenX:0,
-        screenY:0
       };
     }
 
-    getShowModal=(event)=>{
+
-      let {showModal} = this.state;
+    onDragStart=(event,data)=>{
-      if(showModal){
+      event.dataTransfer.setData("Text",data.key);
-        this.setState({
-          showModal:false
-        })
-      }
     }
 
-    checkedColumItemClick = (da)=>{
+    onDragOver=(event)=>{
+      event.preventDefault();
+    }
+
+    onDrop=(event,data)=>{
       let {columns} = this.state;
-      da.checked = da.checked?false:true;
+      const id = event.dataTransfer.getData("Text");
-      da.disable  = da.checked?true:false;
+      let objIndex =  columns.findIndex((_da,i)=>_da.key == id);
-      this.setState({
+      let targetIndex = columns.findIndex((_da,i)=>_da.key == data.key);
-        ...this.state
-      })
-    }
 
-    openCloumList = (ev)=>{
+      columns.forEach((da,i)=>{
-      let oEvent=ev||event; 
+        if(da.key == id){//obj
-      this.setState({
+          da.dragIndex = targetIndex
-        screenX:oEvent.clientX,
+        }
-        screenY:oEvent.clientY,
+        if(da.key == data.key){//targetObj
-        showModal:true
+          da.dragIndex = objIndex
-      });
+        }
-    }
-
-    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;
       });
+     let _columns = sortBy(columns,(da)=>da.dragIndex);
+      console.log("_columns--",_columns);
       this.setState({
-        ...this.state
+        columns:_columns
       })
     }
 
     render() {
       const {data} = this.props;
-      const {columns,showModal,width,screenX,screenY} = this.state;
+      const {columns} = this.state;
-      let _columns = [];
-      columns.forEach((da)=>{
-        if(da.disable){
-          _columns.push(da);
-        }
-      });
 
-      let content = (
+      return (<Table {...this.props} columns={columns} data={data} 
-        <div className="pop-cont"> 
+          onDragStart={this.onDragStart} onDragOver={this.onDragOver} onDrop={this.onDrop} draggable={true} 
-        <span className="clear-setting" onClick={this.clear}>清除设置</span>
+      />)
-        <div>
-           {
-            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>;
     }
   };
 }

src/lib/util.js

@@ -0,0 +1,37 @@
+/*
+* 快速排序，按某个属性，或按“获取排序依据的函数”，来排序.
+* @method soryBy
+* @static
+* @param {array} arr 待处理数组
+* @param {string|function} prop 排序依据属性，获取
+* @param {boolean} desc 降序
+* @return {array} 返回排序后的新数组
+*/
+
+export function sortBy(arr, prop, desc) {  
+  let props=[],
+  ret=[],
+  i=0,
+  len=arr.length;
+  if(typeof prop=='string') {
+      for(; i<len; i++){
+        let oI = arr[i];
+          (props[i] = new String(oI && oI[prop] || ''))._obj = oI;
+      }
+  }
+  else if(typeof prop=='function') {
+      for(; i<len; i++){
+        let oI = arr[i];
+          (props[i] = new String(oI && prop(oI) || ''))._obj = oI;
+      }
+  }
+  else {
+      throw '参数类型错误';
+  }
+  props.sort();
+  for(i=0; i<len; i++) {
+      ret[i] = props[i]._obj;
+  }
+  if(desc) ret.reverse();
+  return ret;
+};