fix(列筛选后滚动条问题，针对列过滤新增checkMinSize属性): 列筛选后滚动条问题，针对列过滤新增checkMinSize属性
列筛选后滚动条问题，针对列过滤新增checkMinSize属性
This commit is contained in:
jonyshi
parent
cd5e64a630
commit
36b87b1c7b
|
|
@ -55,18 +55,18 @@ var TableHeader = function (_Component) {
|
|||
};
|
||||
|
||||
_this.onDragOver = function (event, data) {
|
||||
if (_this.currentObj.key == data.key) return;
|
||||
if (!_this.currentObj || _this.currentObj.key == data.key) return;
|
||||
event.preventDefault();
|
||||
_this.props.onDragOver(event, data);
|
||||
};
|
||||
|
||||
_this.onDragEnter = function (event, data) {
|
||||
if (_this.currentObj.key == data.key) return;
|
||||
if (!_this.currentObj || _this.currentObj.key == data.key) return;
|
||||
_this.props.onDragEnter(event, data);
|
||||
};
|
||||
|
||||
_this.onDrop = function (event, data) {
|
||||
if (_this.currentObj.key == data.key) return;
|
||||
if (!_this.currentObj || _this.currentObj.key == data.key) return;
|
||||
_this.props.onDrop(event, data);
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
"use strict";
|
||||
'use strict';
|
||||
|
||||
Object.defineProperty(exports, "__esModule", {
|
||||
value: true
|
||||
|
|
@ -8,11 +8,13 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
|
|||
|
||||
exports["default"] = dragColumn;
|
||||
|
||||
var _react = require("react");
|
||||
var _react = require('react');
|
||||
|
||||
var _react2 = _interopRequireDefault(_react);
|
||||
|
||||
var _util = require("./util");
|
||||
var _util = require('./util');
|
||||
|
||||
var _utils = require('../utils');
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
|
|
@ -52,7 +54,7 @@ function dragColumn(Table) {
|
|||
|
||||
DragColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
if (nextProps.columns != this.props.columns) {
|
||||
this.setColumOrderByIndex();
|
||||
this.setColumOrderByIndex(nextProps.columns);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -67,13 +69,13 @@ function dragColumn(Table) {
|
|||
onDragEnter = _props.onDragEnter,
|
||||
onDragOver = _props.onDragOver,
|
||||
onDrop = _props.onDrop,
|
||||
others = _objectWithoutProperties(_props, ["data", "dragborder", "draggable", "className", "columns", "onDragStart", "onDragEnter", "onDragOver", "onDrop"]);
|
||||
others = _objectWithoutProperties(_props, ['data', 'dragborder', 'draggable', 'className', 'columns', 'onDragStart', 'onDragEnter', 'onDragOver', 'onDrop']);
|
||||
|
||||
var key = new Date().getTime();
|
||||
return _react2["default"].createElement(Table, _extends({}, others, {
|
||||
columns: this.state.columns,
|
||||
data: data,
|
||||
className: className + " u-table-drag-border",
|
||||
className: className + ' u-table-drag-border',
|
||||
onDragStart: this.onDragStart,
|
||||
onDragOver: this.onDragOver,
|
||||
onDrop: this.onDrop,
|
||||
|
|
@ -89,9 +91,7 @@ function dragColumn(Table) {
|
|||
}(_react.Component), _initialiseProps = function _initialiseProps() {
|
||||
var _this2 = this;
|
||||
|
||||
this.setColumOrderByIndex = function (columns) {
|
||||
var _column = [];
|
||||
_extends(_column, columns);
|
||||
this.setColumOrderByIndex = function (_column) {
|
||||
_column.forEach(function (da, i) {
|
||||
da.dragIndex = i;
|
||||
da.drgHover = false;
|
||||
|
|
@ -102,14 +102,19 @@ function dragColumn(Table) {
|
|||
};
|
||||
|
||||
this.onDragStart = function (event, data) {
|
||||
if (_this2.props.onDragStart) {
|
||||
_this2.props.onDragStart(event, data);
|
||||
}
|
||||
};
|
||||
|
||||
this.onDragOver = function (event, data) {
|
||||
if (_this2.props.onDragOver) {
|
||||
_this2.props.onDragOver(event, data);
|
||||
}
|
||||
};
|
||||
|
||||
this.onDragEnter = function (event, data) {
|
||||
if (data.key == "checkbox") return;
|
||||
var _columns = _this2.state.columns;
|
||||
|
||||
var columns = [];
|
||||
|
|
@ -120,14 +125,18 @@ function dragColumn(Table) {
|
|||
var current = columns.find(function (da) {
|
||||
return da.key == data.key;
|
||||
});
|
||||
if (current.fixed) return;
|
||||
current.drgHover = true;
|
||||
_this2.setState({
|
||||
columns: columns
|
||||
});
|
||||
if (_this2.props.onDragEnter) {
|
||||
_this2.props.onDragEnter(event, data);
|
||||
}
|
||||
};
|
||||
|
||||
this.onDrop = function (event, data) {
|
||||
if (data.key == "checkbox") return;
|
||||
var columns = _this2.state.columns;
|
||||
|
||||
var id = event.dataTransfer.getData("Text");
|
||||
|
|
@ -137,7 +146,8 @@ function dragColumn(Table) {
|
|||
var targetIndex = columns.findIndex(function (_da, i) {
|
||||
return _da.key == data.key;
|
||||
});
|
||||
|
||||
if (columns[objIndex].fixed) return; //固定列不让拖拽
|
||||
if (columns[targetIndex].fixed) return; //固定列不让拖拽
|
||||
columns.forEach(function (da, i) {
|
||||
da.drgHover = false;
|
||||
if (da.key == id) {
|
||||
|
|
@ -149,13 +159,13 @@ function dragColumn(Table) {
|
|||
da.dragIndex = objIndex;
|
||||
}
|
||||
});
|
||||
var _columns = (0, _util.sortBy)(columns, function (da) {
|
||||
return da.dragIndex;
|
||||
});
|
||||
var _columns = columns.sort((0, _util.compare)('dragIndex'));
|
||||
_this2.setState({
|
||||
columns: _columns
|
||||
columns: JSON.parse(JSON.stringify(_columns))
|
||||
});
|
||||
if (_this2.props.onDrop) {
|
||||
_this2.props.onDrop(event, data);
|
||||
}
|
||||
};
|
||||
|
||||
this.getTarget = function (evt) {
|
||||
|
|
@ -163,4 +173,4 @@ function dragColumn(Table) {
|
|||
};
|
||||
}, _temp;
|
||||
}
|
||||
module.exports = exports["default"];
|
||||
module.exports = exports['default'];
|
||||
|
|
@ -20,6 +20,8 @@ var _beeIcon = require("bee-icon");
|
|||
|
||||
var _beeIcon2 = _interopRequireDefault(_beeIcon);
|
||||
|
||||
var _utils = require("../utils");
|
||||
|
||||
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
||||
|
||||
function _defaults(obj, defaults) { var keys = Object.getOwnPropertyNames(defaults); for (var i = 0; i < keys.length; i++) { var key = keys[i]; var value = Object.getOwnPropertyDescriptor(defaults, key); if (value && value.configurable && obj[key] === undefined) { Object.defineProperty(obj, key, value); } } return obj; }
|
||||
|
|
@ -52,8 +54,7 @@ function filterColumn(Table, Popover) {
|
|||
|
||||
var columns = props.columns;
|
||||
|
||||
var _column = [];
|
||||
_extends(_column, columns);
|
||||
var _column = (0, _utils.ObjectAssign)(columns);
|
||||
_column.forEach(function (da) {
|
||||
da.checked = true;
|
||||
da.disable = true;
|
||||
|
|
@ -67,6 +68,11 @@ function filterColumn(Table, Popover) {
|
|||
}
|
||||
|
||||
FilterColumn.prototype.componentWillReceiveProps = function componentWillReceiveProps(nextProps) {
|
||||
if (nextProps.columns != this.props.columns) {
|
||||
this.setState({
|
||||
columns: (0, _utils.ObjectAssign)(nextProps.columns)
|
||||
});
|
||||
}
|
||||
this.setState({
|
||||
showModal: false
|
||||
});
|
||||
|
|
@ -75,17 +81,27 @@ function filterColumn(Table, Popover) {
|
|||
FilterColumn.prototype.render = function render() {
|
||||
var _props = this.props,
|
||||
data = _props.data,
|
||||
prefixCls = _props.prefixCls;
|
||||
prefixCls = _props.prefixCls,
|
||||
scrollPro = _props.scroll;
|
||||
var _state = this.state,
|
||||
columns = _state.columns,
|
||||
showModal = _state.showModal;
|
||||
|
||||
var _columns = [];
|
||||
|
||||
var _columns = [],
|
||||
widthState = 0,
|
||||
scroll = scrollPro;
|
||||
columns.forEach(function (da) {
|
||||
if (da.disable) {
|
||||
_columns.push(da);
|
||||
}
|
||||
if (da.width) {
|
||||
widthState++;
|
||||
}
|
||||
});
|
||||
if (_columns.length == widthState) {
|
||||
scroll.x = this.getCloumnsScroll(columns);
|
||||
}
|
||||
|
||||
var content = _react2["default"].createElement(
|
||||
"div",
|
||||
|
|
@ -105,7 +121,10 @@ function filterColumn(Table, Popover) {
|
|||
return _react2["default"].createElement(
|
||||
"div",
|
||||
{ className: prefixCls + "-cont" },
|
||||
_react2["default"].createElement(Table, _extends({}, this.props, { columns: _columns, data: data })),
|
||||
_react2["default"].createElement(Table, _extends({}, this.props, { columns: _columns, data: data,
|
||||
scroll: scroll
|
||||
// scroll={{x:this.getCloumnsScroll(columns)}}
|
||||
})),
|
||||
_react2["default"].createElement(
|
||||
"div",
|
||||
{ className: prefixCls + "-filter-icon" },
|
||||
|
|
@ -133,7 +152,21 @@ function filterColumn(Table, Popover) {
|
|||
var _this2 = this;
|
||||
|
||||
this.checkedColumItemClick = function (da) {
|
||||
var checkMinSize = _this2.props.checkMinSize;
|
||||
|
||||
da.checked = da.checked ? false : true;
|
||||
// if(checkMinSize)
|
||||
var sum = 0,
|
||||
leng = 0;
|
||||
_this2.state.columns.forEach(function (da) {
|
||||
da.fixed ? "" : leng++;
|
||||
!da.fixed && da.checked ? sum++ : "";
|
||||
});
|
||||
if (sum < checkMinSize) {
|
||||
return;
|
||||
} else {
|
||||
if (sum <= 0) return;
|
||||
}
|
||||
da.disable = da.checked ? true : false;
|
||||
_this2.setState(_extends({}, _this2.state));
|
||||
};
|
||||
|
|
@ -149,6 +182,7 @@ function filterColumn(Table, Popover) {
|
|||
var columns = _this2.state.columns;
|
||||
|
||||
return columns.map(function (da, i) {
|
||||
if (!da.fixed) {
|
||||
return _react2["default"].createElement(
|
||||
"div",
|
||||
{ key: da.key + "_" + i, className: prefixCls + "-pop-cont-item", onClick: function onClick() {
|
||||
|
|
@ -161,6 +195,7 @@ function filterColumn(Table, Popover) {
|
|||
da.title
|
||||
)
|
||||
);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -173,6 +208,17 @@ function filterColumn(Table, Popover) {
|
|||
});
|
||||
_this2.setState(_extends({}, _this2.state));
|
||||
};
|
||||
|
||||
this.getCloumnsScroll = function (columns) {
|
||||
var sum = 0;
|
||||
columns.forEach(function (da) {
|
||||
if (da.checked) {
|
||||
sum += da.width;
|
||||
}
|
||||
});
|
||||
console.log("sum", sum);
|
||||
return sum;
|
||||
};
|
||||
}, _temp;
|
||||
}
|
||||
module.exports = exports["default"];
|
||||
|
|
@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
|
|||
value: true
|
||||
});
|
||||
exports.sortBy = sortBy;
|
||||
exports.compare = compare;
|
||||
/*
|
||||
* 快速排序，按某个属性，或按“获取排序依据的函数”，来排序.
|
||||
* @method soryBy
|
||||
|
|
@ -39,3 +40,16 @@ function sortBy(arr, prop, desc) {
|
|||
if (desc) ret.reverse();
|
||||
return ret;
|
||||
};
|
||||
|
||||
/**
|
||||
* 数组对象排序
|
||||
* console.log(arr.sort(compare('age')))
|
||||
* @param {} property
|
||||
*/
|
||||
function compare(property) {
|
||||
return function (a, b) {
|
||||
var value1 = a[property];
|
||||
var value2 = b[property];
|
||||
return value1 - value2;
|
||||
};
|
||||
}
|
||||
|
|
@ -1,10 +1,12 @@
|
|||
/**
|
||||
*
|
||||
* @title 根据列进行过滤、拖拽综合使用案例
|
||||
* @description 根据列进行过滤、拖拽综合使用案例
|
||||
*
|
||||
* @title 根据列进行过滤、拖拽交换列综合使用案例
|
||||
* @description 新增属性【checkMinSize 】 1. 当所有列都设置了width属性后，需要给table增加checkMinSize属性，[表格最小列数] 2. 所有列不设置width。
|
||||
*/
|
||||
|
||||
/**注：
|
||||
* 在使用过滤列的时候，如果每一列都设置了width属性，勾选的时候回出现重复列问题。当表格的宽度小于合计宽度的时候，就会出现此问题。
|
||||
* 必须有个别列不设置width属性，即可避免此问题。
|
||||
*/
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
import multiSelect from '../../src/lib/newMultiSelect';
|
||||
|
|
@ -16,81 +18,7 @@ import Icon from "bee-icon";
|
|||
import Checkbox from 'bee-checkbox';
|
||||
import Popover from 'bee-popover';
|
||||
|
||||
const columns25 = [
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: 100,
|
||||
fixed: "left"
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 100,
|
||||
sumCol: true,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
{
|
||||
title: "年龄1",
|
||||
dataIndex: "c1",
|
||||
key: "c1",
|
||||
width: 100,
|
||||
sumCol: true,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
{
|
||||
title: "年龄2",
|
||||
dataIndex: "c2",
|
||||
key: "c2",
|
||||
width: 100,
|
||||
sumCol: true,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
width: 100,
|
||||
key: "d",
|
||||
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "e",
|
||||
key: "e",
|
||||
width: 100,
|
||||
fixed: "right",
|
||||
render(text, record, index) {
|
||||
return (
|
||||
<div style={{position: 'relative'}} title={text} >
|
||||
<a
|
||||
href="#"
|
||||
tooltip={text}
|
||||
onClick={() => {
|
||||
alert('这是第'+index+'列，内容为:'+text);
|
||||
}}
|
||||
>
|
||||
操作
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const data25 = [
|
||||
{ a: "杨过rrrrr", b: "男", c: 30, c1: 30, c2: 30,d:'内行',e: "操作", key: "2" },
|
||||
{ a: "令狐冲", b: "男", c: 41, c1: 30, c2: 30,d:'大侠',e: "操作", key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25, c1: 30, c2: 30,d:'大侠',e: "操作", key: "3" }
|
||||
];
|
||||
|
||||
//Cloumns1
|
||||
function getCloumns(){
|
||||
const column = [
|
||||
{
|
||||
|
|
@ -103,13 +31,13 @@ function getCloumns(){
|
|||
title: "订单编号",
|
||||
dataIndex: "orderCode",
|
||||
key: "orderCode",
|
||||
width: 250,
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: "供应商名称",
|
||||
dataIndex: "supplierName",
|
||||
key: "supplierName",
|
||||
width: 300
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "类型",
|
||||
|
|
@ -127,7 +55,7 @@ function getCloumns(){
|
|||
title: "采购组",
|
||||
dataIndex: "purchasingGroup",
|
||||
key: "purchasingGroup",
|
||||
width: 100
|
||||
width: 300
|
||||
},
|
||||
{
|
||||
title: "凭证日期",
|
||||
|
|
@ -178,6 +106,84 @@ function getCloumns(){
|
|||
];
|
||||
return column;
|
||||
}
|
||||
//Cloumns2
|
||||
function getCloumns25(){
|
||||
const column = [
|
||||
{
|
||||
title: "序号",
|
||||
dataIndex: "index",
|
||||
key: "index",
|
||||
},
|
||||
{
|
||||
title: "订单编号",
|
||||
dataIndex: "orderCode",
|
||||
key: "orderCode",
|
||||
},
|
||||
{
|
||||
title: "供应商名称",
|
||||
dataIndex: "supplierName",
|
||||
key: "supplierName",
|
||||
},
|
||||
{
|
||||
title: "类型",
|
||||
dataIndex: "type_name",
|
||||
key: "type_name",
|
||||
},
|
||||
{
|
||||
title: "采购组织",
|
||||
dataIndex: "purchasing",
|
||||
key: "purchasing",
|
||||
},
|
||||
{
|
||||
title: "采购组",
|
||||
dataIndex: "purchasingGroup",
|
||||
key: "purchasingGroup",
|
||||
},
|
||||
{
|
||||
title: "凭证日期",
|
||||
dataIndex: "voucherDate",
|
||||
key: "voucherDate",
|
||||
|
||||
},
|
||||
{
|
||||
title: "审批状态",
|
||||
dataIndex: "approvalState_name",
|
||||
key: "approvalState_name",
|
||||
},
|
||||
{
|
||||
title: "确认状态",
|
||||
dataIndex: "confirmState_name",
|
||||
key: "confirmState_name",
|
||||
},
|
||||
{
|
||||
title: "关闭状态",
|
||||
dataIndex: "closeState_name",
|
||||
key: "closeState_name",
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width:100,
|
||||
fixed: "right",
|
||||
render(text, record, index) {
|
||||
return (
|
||||
<div className='operation-btn'>
|
||||
<a href="#"
|
||||
tooltip={text}
|
||||
onClick={() => {
|
||||
alert('这是第'+index+'列，内容为:'+text);
|
||||
}}
|
||||
>
|
||||
一些操作
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
];
|
||||
return column;
|
||||
}
|
||||
|
||||
const dataList = [
|
||||
{
|
||||
|
|
@ -210,13 +216,7 @@ const dataList = [
|
|||
},
|
||||
]
|
||||
|
||||
// const DragColumnTable = filterColumn(Table, Popover);
|
||||
// const DragColumnTable = multiSelect(Table, Checkbox);
|
||||
// let ComplexTable = multiSelect(Table, Checkbox);
|
||||
|
||||
// const DragColumnTable = multiSelect(Table, Checkbox);
|
||||
const DragColumnTable = filterColumn(multiSelect(Table, Checkbox), Popover);
|
||||
// const DragColumnTable = dragColumn(filterColumn(Table, Popover));
|
||||
const DragColumnTable = filterColumn(dragColumn(multiSelect(Table, Checkbox)),Popover);
|
||||
|
||||
const defaultProps25 = {
|
||||
prefixCls: "bee-table"
|
||||
|
|
@ -248,9 +248,11 @@ class Demo25 extends Component {
|
|||
data={dataList}
|
||||
getSelectedDataFunc={this.getSelectedDataFunc}
|
||||
bordered
|
||||
// dragborder={true}
|
||||
checkMinSize={6}
|
||||
draggable={true}
|
||||
multiSelect={{type: "checkbox"}}
|
||||
scroll={{x:this.getCloumnsScroll(columns), y: 150}}
|
||||
scroll={{x:"130%", y: 150}}
|
||||
// scroll={{x:this.getCloumnsScroll(columns), y: 150}}
|
||||
/></div>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
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
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bee-table",
|
||||
"version": "1.2.6",
|
||||
"version": "1.2.7",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
|
@ -51,6 +51,7 @@
|
|||
"bee-popover": "^1.0.2",
|
||||
"bee-select": "^1.0.8",
|
||||
"classnames": "^2.2.5",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"object-path": "^0.11.3",
|
||||
"shallowequal": "^1.0.2",
|
||||
"tinper-bee-core": "latest",
|
||||
|
|
|
|||
|
|
@ -56,18 +56,18 @@ class TableHeader extends Component{
|
|||
}
|
||||
|
||||
onDragOver=(event,data)=>{
|
||||
if(this.currentObj.key == data.key)return;
|
||||
if(!this.currentObj || this.currentObj.key == data.key)return;
|
||||
event.preventDefault();
|
||||
this.props.onDragOver(event,data);
|
||||
}
|
||||
|
||||
onDragEnter=(event,data)=>{
|
||||
if(this.currentObj.key == data.key)return;
|
||||
if(!this.currentObj || this.currentObj.key == data.key)return;
|
||||
this.props.onDragEnter(event,data);
|
||||
}
|
||||
|
||||
onDrop=(event,data)=>{
|
||||
if(this.currentObj.key == data.key)return;
|
||||
if(!this.currentObj ||this.currentObj.key == data.key)return;
|
||||
this.props.onDrop(event,data);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import React, { Component } from "react";
|
||||
import {sortBy} from './util';
|
||||
import {compare} from './util';
|
||||
import {ObjectAssign} from '../utils';
|
||||
/**
|
||||
* 参数: 列拖拽
|
||||
* @param {*} Table
|
||||
|
|
@ -17,13 +18,11 @@ export default function dragColumn(Table) {
|
|||
|
||||
componentWillReceiveProps(nextProps){
|
||||
if(nextProps.columns != this.props.columns){
|
||||
this.setColumOrderByIndex();
|
||||
this.setColumOrderByIndex(nextProps.columns);
|
||||
}
|
||||
}
|
||||
|
||||
setColumOrderByIndex = (columns)=>{
|
||||
let _column = [];
|
||||
Object.assign(_column,columns);
|
||||
setColumOrderByIndex = (_column)=>{
|
||||
_column.forEach((da,i) => {
|
||||
da.dragIndex = i;
|
||||
da.drgHover = false;
|
||||
|
|
@ -35,32 +34,42 @@ export default function dragColumn(Table) {
|
|||
|
||||
|
||||
onDragStart=(event,data)=>{
|
||||
if(this.props.onDragStart){
|
||||
this.props.onDragStart(event,data)
|
||||
}
|
||||
}
|
||||
|
||||
onDragOver=(event,data)=>{
|
||||
if(this.props.onDragOver){
|
||||
this.props.onDragOver(event,data)
|
||||
}
|
||||
}
|
||||
|
||||
onDragEnter=(event,data)=>{
|
||||
if(data.key == "checkbox")return;
|
||||
const {columns:_columns} = this.state;
|
||||
let columns = [];
|
||||
Object.assign(columns,_columns);
|
||||
columns.forEach((da)=>da.drgHover = false)
|
||||
let current = columns.find((da)=>da.key == data.key);
|
||||
if(current.fixed)return;
|
||||
current.drgHover = true;
|
||||
this.setState({
|
||||
columns
|
||||
});
|
||||
if(this.props.onDragEnter){
|
||||
this.props.onDragEnter(event,data);
|
||||
}
|
||||
}
|
||||
|
||||
onDrop=(event,data)=>{
|
||||
if(data.key == "checkbox")return;
|
||||
let {columns} = this.state;
|
||||
const id = event.dataTransfer.getData("Text");
|
||||
let objIndex = columns.findIndex((_da,i)=>_da.key == id);
|
||||
let targetIndex = columns.findIndex((_da,i)=>_da.key == data.key);
|
||||
|
||||
if(columns[objIndex].fixed)return;//固定列不让拖拽
|
||||
if(columns[targetIndex].fixed)return;//固定列不让拖拽
|
||||
columns.forEach((da,i)=>{
|
||||
da.drgHover = false;
|
||||
if(da.key == id){//obj
|
||||
|
|
@ -70,12 +79,14 @@ export default function dragColumn(Table) {
|
|||
da.dragIndex = objIndex;
|
||||
}
|
||||
});
|
||||
let _columns = sortBy(columns,(da)=>da.dragIndex);
|
||||
let _columns = columns.sort(compare('dragIndex'));
|
||||
this.setState({
|
||||
columns:_columns,
|
||||
columns: JSON.parse(JSON.stringify(_columns)),
|
||||
});
|
||||
if(this.props.onDrop){
|
||||
this.props.onDrop(event,data);
|
||||
}
|
||||
}
|
||||
|
||||
getTarget=(evt)=>{
|
||||
return evt.target || evt.srcElement;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
import React, { Component } from "react";
|
||||
import Checkbox from 'bee-checkbox';
|
||||
import Icon from "bee-icon";
|
||||
import {ObjectAssign} from '../utils';
|
||||
/**
|
||||
* 参数: 过滤表头
|
||||
* @param {*} Table
|
||||
|
|
@ -18,8 +19,7 @@ export default function filterColumn(Table,Popover) {
|
|||
constructor(props) {
|
||||
super(props);
|
||||
const {columns} = props;
|
||||
let _column = [];
|
||||
Object.assign(_column,columns);
|
||||
let _column = ObjectAssign(columns);
|
||||
_column.forEach(da => {
|
||||
da.checked = true;
|
||||
da.disable = true;
|
||||
|
|
@ -32,13 +32,30 @@ export default function filterColumn(Table,Popover) {
|
|||
}
|
||||
|
||||
componentWillReceiveProps(nextProps){
|
||||
if(nextProps.columns != this.props.columns){
|
||||
this.setState({
|
||||
columns:ObjectAssign(nextProps.columns)
|
||||
})
|
||||
}
|
||||
this.setState({
|
||||
showModal:false
|
||||
})
|
||||
}
|
||||
|
||||
checkedColumItemClick = (da)=>{
|
||||
let {checkMinSize} = this.props;
|
||||
da.checked = da.checked?false:true;
|
||||
// if(checkMinSize)
|
||||
let sum = 0,leng=0;
|
||||
this.state.columns.forEach(da => {
|
||||
da.fixed?"":leng++;
|
||||
!da.fixed && da.checked?sum++:"";
|
||||
});
|
||||
if(sum < checkMinSize){
|
||||
return;
|
||||
}else{
|
||||
if(sum<=0)return;
|
||||
}
|
||||
da.disable = da.checked?true:false;
|
||||
this.setState({
|
||||
...this.state
|
||||
|
|
@ -54,10 +71,15 @@ export default function filterColumn(Table,Popover) {
|
|||
getCloumItem=()=>{
|
||||
const {prefixCls} = this.props;
|
||||
const {columns} = this.state;
|
||||
return columns.map((da,i)=> (<div key={da.key+"_"+i} className={`${prefixCls}-pop-cont-item`} onClick={()=>{this.checkedColumItemClick(da)}}>
|
||||
return columns.map((da,i)=>
|
||||
{
|
||||
if(!da.fixed){
|
||||
return (<div key={da.key+"_"+i} className={`${prefixCls}-pop-cont-item`} onClick={()=>{this.checkedColumItemClick(da)}}>
|
||||
<Checkbox id={da.key} checked={da.checked}/>
|
||||
<span>{da.title}</span>
|
||||
</div>))
|
||||
</div>)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
clear=()=>{
|
||||
|
|
@ -71,15 +93,33 @@ export default function filterColumn(Table,Popover) {
|
|||
})
|
||||
}
|
||||
|
||||
getCloumnsScroll=(columns)=>{
|
||||
let sum = 0;
|
||||
columns.forEach((da)=>{
|
||||
if(da.checked){
|
||||
sum += da.width;
|
||||
}
|
||||
})
|
||||
console.log("sum",sum);
|
||||
return (sum);
|
||||
}
|
||||
|
||||
render() {
|
||||
const {data,prefixCls} = this.props;
|
||||
const {data,prefixCls,scroll:scrollPro} = this.props;
|
||||
const {columns,showModal} = this.state;
|
||||
let _columns = [];
|
||||
|
||||
let _columns = [],widthState=0,scroll=scrollPro;
|
||||
columns.forEach((da)=>{
|
||||
if(da.disable){
|
||||
_columns.push(da);
|
||||
}
|
||||
if(da.width){
|
||||
widthState++;
|
||||
}
|
||||
});
|
||||
if(_columns.length == widthState){
|
||||
scroll.x = this.getCloumnsScroll(columns);
|
||||
}
|
||||
|
||||
let content = (
|
||||
<div className={`${prefixCls}-pop-cont`}>
|
||||
|
|
@ -92,7 +132,10 @@ export default function filterColumn(Table,Popover) {
|
|||
</div>);
|
||||
|
||||
return <div className={`${prefixCls}-cont`}>
|
||||
<Table {...this.props} columns={_columns} data={data} />
|
||||
<Table {...this.props} columns={_columns} data={data}
|
||||
scroll={scroll}
|
||||
// scroll={{x:this.getCloumnsScroll(columns)}}
|
||||
/>
|
||||
<div className={`${prefixCls}-filter-icon`}>
|
||||
<Popover
|
||||
id="filter_column_popover"
|
||||
|
|
|
|||
|
|
@ -35,3 +35,16 @@ export function sortBy(arr, prop, desc) {
|
|||
if(desc) ret.reverse();
|
||||
return ret;
|
||||
};
|
||||
|
||||
/**
|
||||
* 数组对象排序
|
||||
* console.log(arr.sort(compare('age')))
|
||||
* @param {} property
|
||||
*/
|
||||
export function compare(property){
|
||||
return function(a,b){
|
||||
var value1 = a[property];
|
||||
var value2 = b[property];
|
||||
return value1 - value2;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue