拖拽排序 DragSort

1.说明

拖拽排序

2.API

2.代码演示

/**
 * Created by ALOG on 17/6/5.
 */
let React =require( "react");
let ReactDOM=require("react-dom");
let wasabi=require("wasabiD");
let DataGrid=wasabi.DataGrid;
let Button=wasabi.Button;
let ToolTip=wasabi.ToolTip;
let DragSort=wasabi.DragSort;
var alogUtil = require("../libs/alogUtil.js");

class Demo extends React.Component {
    constructor(props) {
        super(props);
    }
    render(){
        return (
           <DragSort label="拖拽可排序" data={[{text:"test1",value:1},{text:"test2",value:2},{text:"test3",value:3}]}/>
        )
    }
}
ReactDOM.render(<Demo/>,document.getElementById("root"));

/**
 * @author zhirongyuan
 * @createTime 17/4/10
 * @description  该组件用于功能分组页面  支持拖拽排序
 */
require("../sass/components/listSort.css");

var React  =require('react');
let wasabi=require("wasabiD");
let DragSort=wasabi.DragSort;
let FetchModel=wasabi.FetchModel;
let Message=wasabi.Message;
let ClickAway=wasabi.ClickAway;
let alogUtil=require("../libs/alogUtil.js");
let unit=wasabi.unit;

var ListSort = React.createClass({
    PropTypes:{
        headerHide:React.PropTypes.bool, //头部是否隐藏
        draggable:React.PropTypes.bool,//是否允许排序
        operateClick:React.PropTypes.func,//操作栏的回调函数
        dropEnd:React.PropTypes.func,//拖拽结束的回调函数
        onClick:React.PropTypes.func,//列表点击事件
        data:React.PropTypes.array.isRequired,//列表数据
        url:React.PropTypes.string,//ajax的后台地址
        params:React.PropTypes.object,//查询参数
        dataSource:React.PropTypes.string,//ajax的返回的数据源中哪个属性作为数据源,为null时直接后台返回的数据作为数据源
        valueField: React.PropTypes.string,//数据字段值名称
        textField:React.PropTypes.string,//数据字段文本名称
        width:React.PropTypes.number,//宽度
        title:React.PropTypes.string,//组件title
    },
    getDefaultProps(){
        return{
            headerHide:false,
            draggable:true,
            data:[],
            dataSource:"data",
            valueField:"value",
            textField:"text",
            url:null,
            params:null,
            width:"22%",
            title:'title',
        }
    },
    getInitialState(){
        return{
            data:this.props.data,
            params:this.props.params,//参数
            url:this.props.url,
            headerHide:this.props.headerHide
        }
    },
    componentWillReceiveProps(nextProps){
        this.setState({
            data:nextProps.data,
            params:nextProps.params,
            url:nextProps.url,
            headerHide:nextProps.headerHide,
        })
    },
    operateHandler(name){
        this.props.operateClick&&this.props.operateClick(name);
    },
    dropEndHandler(data){//拖拽结束后的事件   回传当前排序后的列表数据
        this.props.dropEnd&& this.props.dropEnd(data);
    },
    clickHandler(data,index){
        this.props.onClick&&this.props.onClick(data[index]);
    },
    clearActiveIndex(){//清除当前点击的index  清除avtive样式
       this.refs.dragSort.clearActiveIndex();
    },
    reload(url){
        this.refs.dragSort.reload(url);
    },
    render(){
        return (
            <div className="listSortWrap" style={{paddingBottom:"100px",width:this.props.width,height: "100%"}}>
                <div className="listSortWrap-header">
                    <div className="title">{this.props.title}</div>
                    <div className="iconWrap" style={{display:this.state.headerHide?"none":"block"}}>
                        <span className="operate-btn icon-row-add" title="新增" onClick={this.operateHandler.bind(this,"add")}></span>
                        <span className="operate-btn icon-edit" title="编辑" onClick={this.operateHandler.bind(this,"edit")}></span>
                        <span className="operate-btn icon-trash" title="删除" onClick={this.operateHandler.bind(this,"del")}></span>
                    </div>
                </div>
                <div className="listSortWrap-body">
                    <DragSort
                        ref="dragSort"
                        url={this.state.url}
                        params={this.state.params}
                        dataSource={this.props.dataSource}
                        valueField={this.props.valueField}
                        textField={this.props.textField}
                        data={this.state.data}
                        draggable={this.props.draggable}
                        sortIcon={false}
                        itemClassName="listSort-listLi"
                        dropEnd={this.dropEndHandler}
                        onClick={this.clickHandler}></DragSort>
                </div>
            </div>
        )
    }
});
module.exports=ListSort;

/**
 * Created by ALOG on 17/6/5.
 */
let React =require( "react");
let ReactDOM=require("react-dom");
let wasabi=require("wasabiD");
let DataGrid=wasabi.DataGrid;
let Button=wasabi.Button;
let ToolTip=wasabi.ToolTip;
let ListSort=require("../components/ListSort.js")
var alogUtil = require("../libs/alogUtil.js");

class Demo extends React.Component {
    constructor(props) {
        super(props);
    }
    render(){
        return (
           <ListSort  data={[{text:"test1",value:1},{text:"test2",value:2},{text:"test3",value:3}]}/>
        )
    }
}
ReactDOM.render(<Demo/>,document.getElementById("root"));