列表 DataGrid

1.说明

展示行列数据。

加载数据方式有两种一种是传url,另一种为手动传数据.

手动传数据,那么就要设置 pageIndex,pageSize,total,data这四个字段,以及绑定updateHandler这个事件来更新数据

何时使用

• 当有大量结构化的数据需要展现时；

• 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。

2.API

只读属性

2.代码演示

/**
 * Created by ZhiRongYuan 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 HeaderModel=wasabi.HeaderModel
var alogUtil = require("../libs/alogUtil.js");

class Demo extends React.Component {
    constructor(props) {
        super(props);

        this.setHeaderHandler = this.setHeaderHandler.bind(this);
        this.detailHandler = this.detailHandler.bind(this);
        this.onChecked = this.onChecked.bind(this);
    }
    setHeaderHandler(){
        this.refs.datagrid.setHeaderTable();
    }
    detailHandler(currentData){
        return (
            <div>
                展开详情...
            </div>
        )
    }
    headerModelInit(){
        return [
            new HeaderModel("orderCode","订单ID",(rowData,rowIndex)=>{
                return <div className="ellipsis">{rowData.orderCode}</div>
            }),
            new HeaderModel("sourceOrderCode","原订单号"),
            new HeaderModel("wayBillNo","快递单号"),
            new HeaderModel("orderSourceName","订单来源"),
            new HeaderModel("control","操作",(rowData,rowIndex)=>{
                return <a>编辑</a>
            },false,false,null,"fixedRight")
        ];
    }
    onChecked(data) {//监听表格中某一行被选中/取消

    }
    render(){
        var url = alogUtil.orderUrl() + "/sell-portal/saleorder/querySO.htm"+alogUtil.getOMSParams();
        var headerUrl=alogUtil.orderUrl()+"/boss/operator/queryCustomHeader.htm"+alogUtil.getOMSParams()+"&targetUrl=/sell-portal/saleorder/querySO.htm";
        var updateUrl=alogUtil.orderUrl()+"/boss/operator/updateCustomHeader.htm"+alogUtil.getOMSParams();
        var defaultHeaderUrl=alogUtil.orderUrl()+"/boss/operator/queryDefaultHeader.htm"+alogUtil.getOMSParams()+"&targetUrl=/sell-portal/saleorder/querySO.htm";

        return (
            <div>
                <Button name="set" title="设置表头"  theme="green" onClick={this.setHeaderHandler}/>
                <DataGrid ref="datagrid" selectAble={true} onChecked={this.onChecked} updateUrl={updateUrl}  headerUrl={headerUrl} defaultHeaderUrl={defaultHeaderUrl} headers={this.headerModelInit()} url={url} detailAble={true} detailHandler={this.detailHandler}/>
            </div>
        )
    }
}
ReactDOM.render(<Demo/>,document.getElementById("root"));