支持后端排序,增加回调函数
This commit is contained in:
parent
2272b3865f
commit
262bcb7080
|
@ -0,0 +1,82 @@
|
|||
/**
|
||||
*
|
||||
* @title 列排序,后端排序
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
import Icon from "bee-icon";
|
||||
import sort from "../../src/lib/sort.js";
|
||||
let ComplexTable = sort(Table, Icon);
|
||||
const columns11 = [
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 200,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d"
|
||||
},
|
||||
{
|
||||
title: "分数",
|
||||
dataIndex: "e",
|
||||
key: "e",
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
];
|
||||
|
||||
const data11 = [
|
||||
{ a: "杨过", b: "男", c: 30,d:'内行', e:139,key: "2" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', e:109, key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', e:159, key: "3" }
|
||||
];
|
||||
|
||||
const defaultProps = {
|
||||
prefixCls: "bee-table"
|
||||
};
|
||||
class Demo28 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
sortOrder: "",
|
||||
data: data11
|
||||
};
|
||||
}
|
||||
/**
|
||||
* 后端获取数据
|
||||
*/
|
||||
sortFun = (sortParam)=>{
|
||||
console.info(sortParam);
|
||||
//将参数传递给后端排序
|
||||
}
|
||||
render() {
|
||||
let sortObj = {
|
||||
mode:'multiple',
|
||||
backSource:true,
|
||||
sortFun:this.sortFun
|
||||
}
|
||||
return <ComplexTable columns={columns11} data={this.state.data} sort={sortObj}/>;
|
||||
}
|
||||
}
|
||||
Demo28.defaultProps = defaultProps;
|
||||
|
||||
|
||||
export default Demo28;
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -73,7 +73,7 @@
|
|||
"babel-jest": "^22.0.4",
|
||||
"bee-animate": "latest",
|
||||
"bee-checkbox": "^1.1.1",
|
||||
"bee-form": "^1.0.8",
|
||||
"bee-form": "1.1.10",
|
||||
"bee-input-group": "latest",
|
||||
"bee-layout": "latest",
|
||||
"bee-pagination": "latest",
|
||||
|
|
|
@ -75,6 +75,21 @@ export default function sort(Table, Icon) {
|
|||
this.setState({columns});
|
||||
|
||||
}
|
||||
/**
|
||||
* 获取排序字段
|
||||
*/
|
||||
getOrderCols = (columns)=>{
|
||||
let orderCols = [];
|
||||
columns.forEach(item=>{
|
||||
if(item.order=='ascend'||item.order=='descend'){
|
||||
orderCols.push({order:item.order,
|
||||
field:item.dataIndex,
|
||||
orderNum:item.orderNum
|
||||
});
|
||||
}
|
||||
})
|
||||
return orderCols;
|
||||
}
|
||||
|
||||
/**
|
||||
* pre:前一条数据
|
||||
|
@ -137,8 +152,12 @@ export default function sort(Table, Icon) {
|
|||
})
|
||||
seleObj.order = order;
|
||||
//通过后端请求
|
||||
if(sort.backSource){
|
||||
if(sort.backSource && typeof sort.sortFun === "function"){
|
||||
//获取排序的字段和方式
|
||||
sort.sortFun([{
|
||||
order:order,
|
||||
field:seleObj.dataIndex
|
||||
}]);
|
||||
}else{
|
||||
if (order === "ascend") {
|
||||
data = data.sort(function(a, b) {
|
||||
|
@ -161,7 +180,12 @@ export default function sort(Table, Icon) {
|
|||
if(!seleObj.orderNum && (order=='ascend'||order=='descend')){
|
||||
seleObj.orderNum = this.getOrderNum();
|
||||
}
|
||||
data = this.multiSort(columns);
|
||||
if(sort.backSource && typeof sort.sortFun === "function"){
|
||||
sort.sortFun(this.getOrderCols(columns));
|
||||
}else{
|
||||
data = this.multiSort(columns);
|
||||
}
|
||||
|
||||
}
|
||||
this.setState({
|
||||
data,
|
||||
|
|
Loading…
Reference in New Issue