列表表头数据模型 HeaderModel
1.说明
用于DataGrid组件生成表头而设置的
2.参数顺序
constructor(name,label,content=null,hide=false,sortAble=false,width=null,fixed=null)
3.API
| 参数名 | 默认值 | 参数说明 |
|---|---|---|
| name | null | 对应数据字段名称 |
| label | null | 当前列表头的文字说明 |
| content | null | 自定义内容,回传(rowData,rowIndex)两个参数,为null直接显示对应数据字段的值 |
| hide | false | 当前列是否隐藏 |
| sortAble | false | 当前列是否排序 |
| width | null | 宽度 |
| fixed | null | 当前列是否固定(可选值:fixedLeft,fixedRight) |
| align | left | 文字位置(left,center,right) |
| rowspan | null | 占几行,暂未开放 |
| colspan | null | 占几列,暂未开放 |
| editor | null | 编辑时的编辑器设置EditorModel |
4.代码演示
/**
* 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 HeaderModel=wasabi.HeaderModel;
let ControlBar=wasabi.ControlBar;
var alogUtil = require("../libs/alogUtil.js");
var gridUrl=alogUtil.orderUrl() + "/sell-portal/saleorder/querySO.htm"+alogUtil.getOMSParams()
class Demo extends React.Component {
headerModel(){
return [
new HeaderModel("orderCode","订单ID",(rowData,rowIndex)=>{
return <div className="ellipsis">{rowData.orderCode}</div>
},false,false,null,"fixedLeft"),
new HeaderModel("sourceOrderCode","原订单号"),
new HeaderModel("wayBillNo","快递单号"),
new HeaderModel("sourceOrderCode","原订单号"),
new HeaderModel("wayBillNo","快递单号"),
new HeaderModel("sourceOrderCode","原订单号"),
new HeaderModel("wayBillNo","快递单号"),
new HeaderModel("sourceOrderCode","原订单号"),
new HeaderModel("wayBillNo","快递单号"),
new HeaderModel("sourceOrderCode","原订单号"),
new HeaderModel("wayBillNo","快递单号"),
new HeaderModel("orderSourceName","订单来源"),
new HeaderModel("control","操作",this.controlTpl,false,false,null,"fixedRight","right")
];
}
controlTpl(data,rowIndex){
var data=[{title:"新增",value:"add"},{title:"修改",value:"modify"},{title:"审核",value:"confirm"},{title:"查看",value:"see"}]
return (
<ControlBar data={data}/>
);
}
render(){
return (
<DataGrid ref="dataGrid" selectAble={false} headers={this.headerModel()} url={gridUrl} params={{}}/>
)
}
}
ReactDOM.render(<Demo/>,document.getElementById("root"));