支持后端排序,增加回调函数

This commit is contained in:
wanghaoo 2018-10-10 23:31:09 +08:00
parent 2272b3865f
commit 262bcb7080
6 changed files with 272 additions and 26 deletions

82
demo/demolist/Demo28.js Normal file
View File

@ -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

182
dist/demo.js vendored

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -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",

View File

@ -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,