this.contentTable = el}
- tabIndex={props.tabIndex?props.tabIndex:'0'} >
+ tabIndex={props.focusable && (props.tabIndex?props.tabIndex:'0')} >
{this.getTitle()}
diff --git a/src/Table.scss b/src/Table.scss
index 63d8a9f..1b1f008 100644
--- a/src/Table.scss
+++ b/src/Table.scss
@@ -485,6 +485,11 @@ $checkbox-height:16px;
display:none;
pointer-events: none;
}
+ //固定列含有checkbox 样式复写
+ .u-checkbox {
+ height: $checkbox-height;
+ line-height: $checkbox-height;
+ }
}
.u-table:focus{
outline: none;
@@ -730,10 +735,6 @@ $checkbox-height:16px;
}
}
-//固定列含有checkbox 样式复写
-.u-checkbox {
- height: $checkbox-height;
- line-height: $checkbox-height;
-}
+
diff --git a/src/TableHeader.js b/src/TableHeader.js
index e7d7797..210ad5e 100644
--- a/src/TableHeader.js
+++ b/src/TableHeader.js
@@ -556,9 +556,9 @@ class TableHeader extends Component {
}
const keyTemp = {};
//避免key为undefined
- if(da.dataindex && da.key ===undefined ){
- keyTemp.key = da.dataindex
- }
+ // if(da.dataindex && da.key ===undefined ){
+ keyTemp.key = da.key || da.dataindex || index+'-'+columIndex
+ // }
if (filterable && index == rows.length - 1) {
da.children = this.filterRenderType(
da["filtertype"],
@@ -566,11 +566,11 @@ class TableHeader extends Component {
columIndex
);
if(da.key ===undefined ){
- keyTemp.key = da.dataindex+'-filterable'
+ keyTemp.key = keyTemp.key + '-filterable'
}
-
delete da.filterdropdownfocus;
}
+
let thDefaultObj = {};
let thClassName = `${da.className}`?`${da.className}`:'';
if(draggable){
@@ -582,7 +582,7 @@ class TableHeader extends Component {
thClassName += ` ${fixedStyle}`;
if(!da.fixed){
-
+ // console.log(keyTemp.key);
return (
{da.children}
@@ -597,10 +597,9 @@ class TableHeader extends Component {
thDefaultObj = {
...da,
className:`${da.className} ${fixedStyle}`,
- key:columIndex
};
da.onClick ?thDefaultObj.onClick = (e)=>{da.onClick(da, e)}:"";
- return ( | | )
+ return (
| )
}
})}
diff --git a/src/TableRow.js b/src/TableRow.js
index ba09e52..6aad740 100644
--- a/src/TableRow.js
+++ b/src/TableRow.js
@@ -210,7 +210,7 @@ class TableRow extends Component{
indent={indent}
index={index}
column={columns[i]}
- key={columns[i].key}
+ key={columns[i].key || columns[i].dataIndex || i}
fixed= {fixed}
showSum={showSum}
expandIcon={(isColumnHaveExpandIcon) ? expandIcon : null}
diff --git a/src/lib/bigData.js b/src/lib/bigData.js
index 3ca36e4..a027f03 100644
--- a/src/lib/bigData.js
+++ b/src/lib/bigData.js
@@ -8,9 +8,9 @@ export default function bigData(Table) {
static defaultProps = {
data: [],
loadBuffer: 5,
- rowKey: 'key',
- onExpand() { },
- scroll:{}
+ rowKey: "key",
+ onExpand() {},
+ scroll: {}
};
static propTypes = {
loadBuffer: PropTypes.number
@@ -30,10 +30,10 @@ export default function bigData(Table) {
? this.rowsInView + props.loadBuffer * 2
: 26; //一次加载多少数据
this.cachedRowHeight = []; //缓存每行的高度
- this.cachedRowParentIndex=[];
- this.expandChildRowKeys=[];
- this.firstLevelKey=[];
- this.keys=[];
+ this.cachedRowParentIndex = [];
+ this.expandChildRowKeys = [];
+ this.firstLevelKey = [];
+ this.keys = [];
this.lastScrollTop = 0;
this.currentScrollTop = 0;
this.startIndex = this.currentIndex; //数据开始位置
@@ -41,75 +41,84 @@ export default function bigData(Table) {
this.setRowHeight = this.setRowHeight.bind(this);
this.setRowParentIndex = this.setRowParentIndex.bind(this);
}
- componentWillReceiveProps(nextProps){
- const props = this.props;
- if(nextProps.scroll.y !== props.scroll.y){
- const rowHeight = nextProps.height ? nextProps.height : defaultHeight;
- const scrollY = nextProps.scroll.y ? parseInt(nextProps.scroll.y) : 0;
- this.rowsInView = scrollY ? Math.ceil(scrollY / rowHeight) : 20;
- this.loadCount = props.loadBuffer
- ? this.rowsInView + props.loadBuffer * 2
- : 26; //一次加载多少数据
- this.currentIndex = 0;
- this.startIndex = this.currentIndex; //数据开始位置
- this.endIndex = this.currentIndex + this.loadCount; //数据结束位置
- }
+ componentWillReceiveProps(nextProps) {
+ const props = this.props;
+ if (nextProps.scroll.y !== props.scroll.y) {
+ const rowHeight = nextProps.height ? nextProps.height : defaultHeight;
+ const scrollY = nextProps.scroll.y ? parseInt(nextProps.scroll.y) : 0;
+ this.rowsInView = scrollY ? Math.ceil(scrollY / rowHeight) : 20;
+ this.loadCount = props.loadBuffer
+ ? this.rowsInView + props.loadBuffer * 2
+ : 26; //一次加载多少数据
+ this.currentIndex = 0;
+ this.startIndex = this.currentIndex; //数据开始位置
+ this.endIndex = this.currentIndex + this.loadCount; //数据结束位置
+ }
+ if (nextProps.data !== props.data) {
+ this.computeCachedRowParentIndex(nextProps.data);
+ }
}
- componentDidMount(){
+ componentDidMount() {
+ const { data } = this.props;
+ this.computeCachedRowParentIndex(data);
+ }
+
+ /**
+ *设置data中每个元素的parentIndex
+ *
+ */
+ computeCachedRowParentIndex = data => {
const isTreeType = this.checkIsTreeType();
- if(isTreeType){
- const {data} = this.props;
- data.forEach((item,index)=>{
- this.firstLevelKey[index] = this.getRowKey(item,index);
+ if (isTreeType) {
+ data.forEach((item, index) => {
+ this.firstLevelKey[index] = this.getRowKey(item, index);
this.cachedRowParentIndex[treeTypeIndex] = index;
//保存所有的keys跟小标对应起来
- this.keys[treeTypeIndex] = this.getRowKey(item,index);
+ this.keys[treeTypeIndex] = this.getRowKey(item, index);
treeTypeIndex++;
- if(item.children){
- this.getData(item.children,index);
+ if (item.children) {
+ this.getData(item.children, index);
}
});
}
-
- }
+ };
getRowKey(record, index) {
const rowKey = this.props.rowKey;
- const key = (typeof rowKey === 'function') ?
- rowKey(record, index) : record[rowKey];
-
+ const key =
+ typeof rowKey === "function" ? rowKey(record, index) : record[rowKey];
+
return key;
}
/**
*判断是否是树形结构
*
*/
- checkIsTreeType(){
- const {data} = this.props;
+ checkIsTreeType() {
+ const { data } = this.props;
let rs = false;
- const len = data.length>30?30: data.length;
+ const len = data.length > 30 ? 30 : data.length;
//取前三十个看看是否有children属性，有则为树形结构
- for(let i = 0 ;i
{
- this.cachedRowParentIndex[treeTypeIndex] = parentIndex;
- this.keys[treeTypeIndex] = this.getRowKey(subItem,subIndex);
- treeTypeIndex++;
- if(subItem.children){
- this.getData(subItem.children,parentIndex);
-
- }
- })
+ getData(data, parentIndex) {
+ data.forEach((subItem, subIndex) => {
+ this.cachedRowParentIndex[treeTypeIndex] = parentIndex;
+ this.keys[treeTypeIndex] = this.getRowKey(subItem, subIndex);
+ treeTypeIndex++;
+ if (subItem.children) {
+ this.getData(subItem.children, parentIndex);
+ }
+ });
}
- componentWillUnmount(){
+ componentWillUnmount() {
this.cachedRowHeight = [];
this.cachedRowParentIndex = [];
}
@@ -126,25 +135,30 @@ export default function bigData(Table) {
getSumHeight(start, end) {
const { height } = this.props;
let rowHeight = height ? height : defaultHeight;
- let sumHeight = 0,currentKey,currentRowHeight=rowHeight;
+ let sumHeight = 0,
+ currentKey,
+ currentRowHeight = rowHeight;
for (let i = start; i < end; i++) {
- if(this.cachedRowHeight[i] == undefined){
- if(this.treeType){
+ if (this.cachedRowHeight[i] == undefined) {
+ if (this.treeType) {
currentKey = this.keys[i];
currentRowHeight = 0;
- if(this.firstLevelKey.indexOf(currentKey)>=0 || this.expandChildRowKeys.indexOf(currentKey)>=0){
+ if (
+ this.firstLevelKey.indexOf(currentKey) >= 0 ||
+ this.expandChildRowKeys.indexOf(currentKey) >= 0
+ ) {
currentRowHeight = rowHeight;
}
}
sumHeight += currentRowHeight;
- }else{
- sumHeight += this.cachedRowHeight[i]
+ } else {
+ sumHeight += this.cachedRowHeight[i];
}
}
return sumHeight;
}
-
+
/**
*@description 根据返回的scrollTop计算当前的索引。此处做了两次缓存一个是根据上一次的currentIndex计算当前currentIndex。另一个是根据当前内容区的数据是否在缓存中如果在则不重新render页面
*@param 最新一次滚动的scrollTop
@@ -196,19 +210,21 @@ export default function bigData(Table) {
let index = 0;
let temp = nextScrollTop;
let currentKey;
- while (temp >0) {
+ while (temp > 0) {
let currentRowHeight = this.cachedRowHeight[index];
- if(currentRowHeight === undefined){
- if(this.treeType){
+ if (currentRowHeight === undefined) {
+ if (this.treeType) {
currentKey = this.keys[index];
currentRowHeight = 0;
- if(this.firstLevelKey.indexOf(currentKey)>=0 || this.expandChildRowKeys.indexOf(currentKey)>=0){
+ if (
+ this.firstLevelKey.indexOf(currentKey) >= 0 ||
+ this.expandChildRowKeys.indexOf(currentKey) >= 0
+ ) {
currentRowHeight = rowHeight;
}
- }else{
+ } else {
currentRowHeight = rowHeight;
}
-
}
temp -= currentRowHeight;
if (temp > 0) {
@@ -223,39 +239,42 @@ export default function bigData(Table) {
_this.currentIndex = index;
let rowsInView = 0; //可视区域显示多少行
let rowsHeight = 0; //可视区域内容高度
- let tempIndex = index;
+ let tempIndex = index;
//如果可视区域中需要展示的数据已经在缓存中则不重现render。
if (viewHeight) {
//有时滚动过快时this.cachedRowHeight[rowsInView + index]为undifined
-
- while (rowsHeight < viewHeight && tempIndex endIndex - rowDiff && isOrder) {
-
- startIndex = index - loadBuffer>0?index - loadBuffer:0;
- endIndex = startIndex + loadCount;
+ startIndex = index - loadBuffer > 0 ? index - loadBuffer : 0;
+ endIndex = startIndex + loadCount;
//树状结构则根据当前的节点重新计算startIndex和endIndex
// if(treeType){
// const currentParentIndex = _this.cachedRowParentIndex[index];
@@ -270,10 +289,10 @@ export default function bigData(Table) {
if (endIndex > data.length) {
endIndex = data.length;
}
- if(startIndex!==this.startIndex||endIndex!==this.endIndex){
- this.startIndex = startIndex;
- this.endIndex = endIndex;
- this.setState({ needRender: !needRender });
+ if (startIndex !== this.startIndex || endIndex !== this.endIndex) {
+ this.startIndex = startIndex;
+ this.endIndex = endIndex;
+ this.setState({ needRender: !needRender });
}
// console.log(
// "===================",
@@ -288,10 +307,10 @@ export default function bigData(Table) {
if (startIndex < 0) {
startIndex = 0;
}
- if(startIndex!==this.startIndex||endIndex!==this.endIndex){
- this.startIndex = startIndex;
- this.endIndex = this.startIndex + loadCount;
- this.setState({ needRender: !needRender });
+ if (startIndex !== this.startIndex || endIndex !== this.endIndex) {
+ this.startIndex = startIndex;
+ this.endIndex = this.startIndex + loadCount;
+ this.setState({ needRender: !needRender });
}
// console.log(
// "**index**" + index,
@@ -300,15 +319,14 @@ export default function bigData(Table) {
// );
}
}
-
}
};
setRowHeight(height, index) {
this.cachedRowHeight[index] = height;
}
- setRowParentIndex(parentIndex,index){
- // this.cachedRowParentIndex[index] = parentIndex;
+ setRowParentIndex(parentIndex, index) {
+ // this.cachedRowParentIndex[index] = parentIndex;
}
/**
*
@@ -316,70 +334,84 @@ export default function bigData(Table) {
* @param {*} currentIndex 当前行号
*/
getParentIndex(targetIndex) {
- const {data} = this.props;
- let parentIndex = -1;
- parentIndex = this.getIndex(data,-1,targetIndex);
- if(parentIndex<0){//小于0说明没有展开的子节点
- parentIndex = targetIndex;
- }
- return parentIndex;
-
+ const { data } = this.props;
+ let parentIndex = -1;
+ parentIndex = this.getIndex(data, -1, targetIndex);
+ if (parentIndex < 0) {
+ //小于0说明没有展开的子节点
+ parentIndex = targetIndex;
+ }
+ return parentIndex;
}
- getIndex(data,index,targetIndex){
- const parentIndex = index;
- for(let i=0;i{
+ onExpand = (expandState, record) => {
const _this = this;
// 展开
- if(expandState){
- record.children && record.children.forEach((item,index)=>{
- _this.expandChildRowKeys.push( _this.getRowKey(item,index));
- })
- }else{
- // 收起
- record.children && record.children.forEach((item,index)=>{
- _this.expandChildRowKeys.splice(_this.expandChildRowKeys.findIndex(fitem => fitem.key === item.key), 1)
- })
+ if (expandState) {
+ record.children &&
+ record.children.forEach((item, index) => {
+ _this.expandChildRowKeys.push(_this.getRowKey(item, index));
+ });
+ } else {
+ // 收起
+ record.children &&
+ record.children.forEach((item, index) => {
+ _this.expandChildRowKeys.splice(
+ _this.expandChildRowKeys.findIndex(
+ fitem => fitem.key === item.key
+ ),
+ 1
+ );
+ });
}
_this.props.onExpand(expandState, record);
- }
+ };
render() {
-
const { data } = this.props;
const { scrollTop } = this;
const { endIndex, startIndex } = this;
const lazyLoad = {
startIndex: startIndex,
- startParentIndex:startIndex,//为树状节点做准备
+ startParentIndex: startIndex //为树状节点做准备
};
- if(this.treeType){
- const preSubCounts = this.cachedRowParentIndex.findIndex(item=>{ return item==startIndex })
- const sufSubCounts = this.cachedRowParentIndex.findIndex(item=>{ return item==endIndex })
- lazyLoad.preHeight = this.getSumHeight(0,preSubCounts>-1?preSubCounts:0);
- lazyLoad.sufHeight = this.getSumHeight(sufSubCounts+1>0?sufSubCounts+1:this.cachedRowParentIndex.length,this.cachedRowParentIndex.length);
-
- if(preSubCounts>0){
+ if (this.treeType) {
+ const preSubCounts = this.cachedRowParentIndex.findIndex(item => {
+ return item == startIndex;
+ });
+ const sufSubCounts = this.cachedRowParentIndex.findIndex(item => {
+ return item == endIndex;
+ });
+ lazyLoad.preHeight = this.getSumHeight(
+ 0,
+ preSubCounts > -1 ? preSubCounts : 0
+ );
+ lazyLoad.sufHeight = this.getSumHeight(
+ sufSubCounts + 1 > 0
+ ? sufSubCounts + 1
+ : this.cachedRowParentIndex.length,
+ this.cachedRowParentIndex.length
+ );
+
+ if (preSubCounts > 0) {
lazyLoad.startIndex = preSubCounts;
}
-
- }else{
- lazyLoad.preHeight = this.getSumHeight(0, startIndex)
- lazyLoad.sufHeight = this.getSumHeight(endIndex, data.length)
-
+ } else {
+ lazyLoad.preHeight = this.getSumHeight(0, startIndex);
+ lazyLoad.sufHeight = this.getSumHeight(endIndex, data.length);
}
// console.log('*******ScrollTop*****'+scrollTop);
return (
@@ -390,9 +422,9 @@ export default function bigData(Table) {
handleScrollY={this.handleScrollY}
scrollTop={scrollTop}
setRowHeight={this.setRowHeight}
- setRowParentIndex = {this.setRowParentIndex}
- onExpand = {this.onExpand}
- onExpandedRowsChange = {this.onExpandedRowsChange}
+ setRowParentIndex={this.setRowParentIndex}
+ onExpand={this.onExpand}
+ onExpandedRowsChange={this.onExpandedRowsChange}
// className={'lazy-table'}
/>
);
diff --git a/src/lib/dragColumn.js b/src/lib/dragColumn.js
index 9566abc..d8f6e7b 100644
--- a/src/lib/dragColumn.js
+++ b/src/lib/dragColumn.js
@@ -55,17 +55,28 @@ export default function dragColumn(Table) {
onDrop=(event,data)=>{
let {dragSource,dragTarg} = data;
let {columns} = this.state;
- let dragSourceColum = columns.find((da,i)=>da.key == dragSource.key);
- let dragTargColum = columns.find((da,i)=>da.key == dragTarg.key);
- for (let index = 0; index < columns.length; index++) {
- const da = columns[index];
- if(da.key === dragSource.key){
- columns[index] = dragTargColum;
- }
- if(da.key === dragTarg.key){
- columns[index] = dragSourceColum;
- }
- }
+ let sourceIndex = -1,targetIndex = -1;
+
+ sourceIndex = columns.findIndex((da,i)=>da.key == dragSource.key);
+ targetIndex = columns.findIndex((da,i)=>da.key == dragTarg.key);
+ // for (let index = 0; index < columns.length; index++) {
+ // const da = columns[index];
+ // if(da.key === dragSource.key){
+ // columns[index] = dragTargColum;
+ // }
+ // if(da.key === dragTarg.key){
+ // columns[index] = dragSourceColum;
+ // }
+ // }
+ // 向前移动
+ if(targetIndex < sourceIndex){
+ targetIndex = targetIndex + 1;
+ }
+ columns.splice(
+ targetIndex,
+ 0,
+ columns.splice(sourceIndex, 1)[0]
+ );
this.setState({
columns:cloneDeep(columns)
});
diff --git a/src/lib/sort.js b/src/lib/sort.js
index b9baca5..9f32480 100644
--- a/src/lib/sort.js
+++ b/src/lib/sort.js
@@ -24,141 +24,158 @@ export default function sort(Table, Icon) {
return class SortTable extends Component {
constructor(props) {
super(props);
- this.state = {
- data: this.props.data,
- columns:props.columns,
- };
+ let flatColumns = [];
+ this._toFlatColumn(props.columns,-1,flatColumns);
+ this.state = { data: this.props.data, columns: props.columns,flatColumns:flatColumns };
+
}
- static defaultProps = {
- sort: {
- mode:'single',
- backSource:false //默认是前端排序，值为true为后端排序
- }
- };
- componentWillReceiveProps(nextProps){
- if(nextProps.data !== this.props.data){
- this.setState({
- data: nextProps.data,
- oldData: nextProps.data.concat(),
- });
- }
- if(nextProps.columns !== this.props.columns){
+ static defaultProps = { sort: { mode: "single", backSource: false } }; //默认是前端排序，值为true为后端排序
+ componentWillReceiveProps(nextProps) {
+
+ if (nextProps.data !== this.props.data) {
this.setState({
- columns: nextProps.columns,
+ data: nextProps.data,
+ oldData: nextProps.data.concat()
});
}
+ if (nextProps.columns !== this.props.columns) {
+ let flatColumns = [];
+ this._toFlatColumn(nextProps.columns,-1,flatColumns);
+ this.setState({ columns: nextProps.columns ,flatColumns});
+
+ }
}
- getOrderNum =()=>{
- let orderNum=0 ;
- this.state.columns.forEach((item,index)=>{
- if(item.order=='ascend' || item.order=='descend'){
+ /**
+ *column扁平化处理，适应多表头避免递归操作
+ *
+ */
+ _toFlatColumn(columns,parentIndex = -1,flatColumns=[]) {
+ const _this = this;
+ let children = [];
+ // const flatColumns = _this.state;
+ columns.forEach((item,index)=>{
+ item.parentIndex = parentIndex;
+ children = item.children;
+ flatColumns.push(item);
+ if(children){
+ item.children = [];
+ _this._toFlatColumn(children,flatColumns.length - 1,flatColumns);
+ }
+ });
+ }
+ getOrderNum = () => {
+ let orderNum = 0;
+ //todo 1
+ this.state.flatColumns.forEach((item, index) => {
+ if (item.order == "ascend" || item.order == "descend") {
orderNum++;
}
- })
- return orderNum?orderNum:1;
- }
-
+ });
+ return orderNum ? orderNum : 1;
+ };
+
/**
* column 当前的排序的列
* 当有的列不排序时，将该列的orderNum置为‘’，并动态的修改其他列的orderNum。
*/
- changeOrderNum = (column)=>{
- let {columns} = this.state;
- columns.forEach((col)=>{
- if(col.orderNum>column.orderNum){
+ changeOrderNum = column => {
+ let { flatColumns } = this.state;
+ //todo 2
+ flatColumns.forEach(col => {
+ if (col.orderNum > column.orderNum) {
col.orderNum--;
}
- if(column.key == col.key){
- col.orderNum = '';
+ if (column.key == col.key) {
+ col.orderNum = "";
}
- })
- this.setState({columns});
-
- }
+ });
+ this.setState({ flatColumns });
+ };
/**
* 获取排序字段
*/
- getOrderCols = (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
+ //todo 3
+ columns.forEach(item => {
+ if (item.order == "ascend" || item.order == "descend") {
+ orderCols.push({
+ order: item.order,
+ field: item.dataIndex,
+ orderNum: item.orderNum
});
}
- })
+ });
return orderCols;
- }
-
- /**
- * pre：前一条数据
- * after:后一条数据
- * orderType:升序、降序
- */
- _sortBy=(pre,after,orderCols,orderColslen,currentIndex)=>{
+ };
+
+ /**
+ * pre：前一条数据
+ * after:后一条数据
+ * orderType:升序、降序
+ */
+ _sortBy = (pre, after, orderCols, orderColslen, currentIndex) => {
const preKey = pre[orderCols[currentIndex].key];
const afterKey = after[orderCols[currentIndex].key];
- if(preKey == afterKey && currentIndex+1<=orderColslen){
- return this._sortBy(pre,after,orderCols,orderColslen,currentIndex+1);
+ if (preKey == afterKey && currentIndex + 1 <= orderColslen) {
+ return this._sortBy(pre, after, orderCols, orderColslen, currentIndex + 1);
}
- if(orderCols[currentIndex].order=='ascend'){
- return preKey - afterKey
- }else{
- return afterKey - preKey
+ if (orderCols[currentIndex].order == "ascend") {
+ return preKey - afterKey;
+ } else {
+ return afterKey - preKey;
}
- }
+ };
/**
* 多列排序 先排order为1的，其他的基于已排序的数据排
*/
- multiSort = (columns)=>{
- let {data, oldData} = this.state;
+ multiSort = columns => {
+ let { data, oldData } = this.state;
const self = this;
- let orderCols = {},orderColslen=0;
- columns.forEach(item=>{
- if(item.orderNum){
+ let orderCols = {},
+ orderColslen = 0;
+ //todo 4
+ columns.forEach(item => {
+ if (item.orderNum) {
orderColslen++;
orderCols[item.orderNum] = item;
}
- })
- if(orderColslen>0){
+ });
+ if (orderColslen > 0) {
data = data.sort(function(a, b) {
- return self._sortBy(a,b,orderCols,orderColslen,1);
+ return self._sortBy(a, b, orderCols, orderColslen, 1);
});
- }else{
+ } else {
data = oldData.concat();
}
return data;
-
- }
+ };
toggleSortOrder = (order, column) => {
- let { data, oldData ,columns} = this.state;
- let {sort} = this.props;
+ let { data, oldData, flatColumns } = this.state;
+ let { sort } = this.props;
let seleObj;
if (!oldData) {
oldData = data.concat();
}
//单列排序，清空其他列的排序
- if(sort.mode == 'single'){
- columns.forEach(da=>{
- if(da.key == column.key){
+ if (sort.mode == "single") {
+ //todo 5
+ flatColumns.forEach(da => {
+ if (da.key == column.key) {
seleObj = da;
- }else{
- if(da.order){
- da.order = 'flatscend';
+ } else {
+ if (da.order) {
+ da.order = "flatscend";
}
}
- })
+ });
seleObj.order = order;
//通过后端请求
- if(sort.backSource && typeof sort.sortFun === "function"){
+ if (sort.backSource && typeof sort.sortFun === "function") {
//获取排序的字段和方式
- sort.sortFun([{
- order:order,
- field:seleObj.dataIndex
- }]);
- }else{
+ sort.sortFun([{ order: order, field: seleObj.dataIndex }]);
+ } else {
if (order === "ascend") {
data = data.sort(function(a, b) {
return column.sorter(a, b);
@@ -171,83 +188,99 @@ export default function sort(Table, Icon) {
data = oldData.concat();
}
}
- }else{
- seleObj = columns.find(da=>da.key == column.key);
+ } else {
+ seleObj = flatColumns.find(da => da.key == column.key);
seleObj.order = order;
- if(order === "flatscend"){
+ if (order === "flatscend") {
this.changeOrderNum(column);
}
- if(!seleObj.orderNum && (order=='ascend'||order=='descend')){
+ if (!seleObj.orderNum && (order == "ascend" || order == "descend")) {
seleObj.orderNum = this.getOrderNum();
}
- if(sort.backSource && typeof sort.sortFun === "function"){
- sort.sortFun(this.getOrderCols(columns));
- }else{
- data = this.multiSort(columns);
+ if (sort.backSource && typeof sort.sortFun === "function") {
+ sort.sortFun(this.getOrderCols(flatColumns));
+ } else {
+ data = this.multiSort(flatColumns);
}
-
}
- this.setState({
- data,
- oldData,
- columns
- });
+ this.setState({ data, oldData, flatColumns });
};
//每个column上添加orderNum属性，不排序时为“”。
//点击时orderNum有值则不重新赋值，如果没有值，则取当前column下的有oderNum的length值。并排序
//点击置为“”时，动态的设置相关column的orderNum值。并排序
- renderColumnsDropdown=(columns)=>{
- const prefixCls = "bee-table";
- const {mode} = this.props.sort;
- return columns.map(originColumn => {
- let iconTypeIndex = 0;
+ renderColumnsDropdown = columns => {
+ let tempColumns = [],rsColumns = [];
+ tempColumns = columns.map(originColumn => {
let column = Object.assign({}, originColumn);
- let sorterClass = 'flat';
-
- if(column.order === "ascend"){
- iconTypeIndex = 1;
- sorterClass = 'up'
- }else if(column.order === "descend"){
- iconTypeIndex = 2;
- sorterClass = 'down'
- }
-
- let sortButton;
- if (column.sorter) {
- //大于0说明不是升序就是降序，判断orderNum有没有值，没有值赋值
- if(iconTypeIndex>0 && !column.orderNum && mode=='multiple'){
- column.orderNum = this.getOrderNum();
- }
- sortButton = (
-
- {
- this.toggleSortOrder(IconType[iconTypeIndex==2?0:iconTypeIndex+1].order, column);
-
- if(column.sorterClick){
- column.sorterClick(column,IconType[iconTypeIndex].type);
- }
- } }
- >
-
- {column.orderNum}
-
-
-
- );
- }
- column.title = (
-
- {column.title}
- {sortButton}
-
- );
- return column;
+ return this.sortColumn(column);
});
+ rsColumns = this._flatToColumn(tempColumns);
+ return rsColumns;
+ };
+
+ sortColumn = column => {
+ const { mode } = this.props.sort;
+ const prefixCls = "bee-table";
+ let iconTypeIndex = 0;
+ let sorterClass = "flat";
+
+ if (column.order === "ascend") {
+ iconTypeIndex = 1;
+ sorterClass = "up";
+ } else if (column.order === "descend") {
+ iconTypeIndex = 2;
+ sorterClass = "down";
+ }
+
+ let sortButton;
+ if (column.sorter) {
+ //大于0说明不是升序就是降序，判断orderNum有没有值，没有值赋值
+ if (iconTypeIndex > 0 && !column.orderNum && mode == "multiple") {
+ column.orderNum = this.getOrderNum();
+ }
+ sortButton =
+ {
+ this.toggleSortOrder(IconType[iconTypeIndex == 2 ? 0 : iconTypeIndex + 1].order, column);
+
+ if (column.sorterClick) {
+ column.sorterClick(column, IconType[iconTypeIndex].type);
+ }
+ }}>
+ {/* */}
+
+ {column.orderNum}
+
+
;
+ }
+ column.title =
+ {column.title}
+ {sortButton}
+ ;
+ return column;
+ };
+
+ _flatToColumn(flatColumns){
+ const colLen = flatColumns.length;
+ let parentIndex,rsColumns = [];
+ //每次渲染需要将父类的children置空，避免重复
+ flatColumns.forEach(item=>{
+ if(item.children){
+ item.children = [];
+ }
+ })
+ for(let i = colLen-1;i>=0;i--){
+ parentIndex = flatColumns[i].parentIndex;
+ if(parentIndex >= 0){
+ flatColumns[parentIndex].children.unshift(flatColumns[i]);
+ }
+ }
+ rsColumns = flatColumns.filter(item=>{
+ return item.parentIndex == -1
+ })
+ return rsColumns;
}
render() {
- let columns = this.renderColumnsDropdown(this.state.columns.concat());
+ let columns = this.renderColumnsDropdown(this.state.flatColumns.concat());
return ;
}
};