forgetest5
/
bee-table6
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

fix(列筛选后滚动条问题，针对列过滤新增checkMinSize属性): 列筛选后滚动条问题，针对列过滤新增checkMinSize属性 

列筛选后滚动条问题，针对列过滤新增checkMinSize属性
This commit is contained in:
jonyshi 2018-07-05 11:01:19 +08:00
parent cd5e64a630
commit 36b87b1c7b
14 changed files with 629 additions and 421 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
build/TableHeader.js
View File

@ -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);
};

48
build/lib/dragColumn.js
View File

@ -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) {
_this2.props.onDragStart(event, data);
if (_this2.props.onDragStart) {
_this2.props.onDragStart(event, data);
}
};
this.onDragOver = function (event, data) {
_this2.props.onDragOver(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
});
_this2.props.onDragEnter(event, data);
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))
});
_this2.props.onDrop(event, data);
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'];

80
build/lib/filterColumn.js
View File

@ -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,18 +182,20 @@ function filterColumn(Table, Popover) {
var columns = _this2.state.columns;
return columns.map(function (da, i) {
return _react2["default"].createElement(
"div",
{ key: da.key + "_" + i, className: prefixCls + "-pop-cont-item", onClick: function onClick() {
_this2.checkedColumItemClick(da);
} },
_react2["default"].createElement(_beeCheckbox2["default"], { id: da.key, checked: da.checked }),
_react2["default"].createElement(
"span",
null,
da.title
)
);
if (!da.fixed) {
return _react2["default"].createElement(
"div",
{ key: da.key + "_" + i, className: prefixCls + "-pop-cont-item", onClick: function onClick() {
_this2.checkedColumItemClick(da);
} },
_react2["default"].createElement(_beeCheckbox2["default"], { id: da.key, checked: da.checked }),
_react2["default"].createElement(
"span",
null,
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"];

16
build/lib/util.js
View File

@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
value: true
});
exports.sortBy = sortBy;
exports.compare = compare;
/*
* 快速排序，按某个属性，或按“获取排序依据的函数”，来排序.
* @method soryBy
@ -38,4 +39,17 @@ 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;
};
}

186
demo/demolist/Demo25.js
View File

@ -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: "凭证日期",
@ -146,7 +74,7 @@ function getCloumns(){
title: "确认状态",
dataIndex: "confirmState_name",
key: "confirmState_name",
width: 100
width: 100
},
{
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>
}
}

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

586
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

3
package.json
View File

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

6
src/TableHeader.js
View File

@ -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);
}

35
src/lib/dragColumn.js
View File

@ -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)=>{
this.props.onDragStart(event,data)
if(this.props.onDragStart){
this.props.onDragStart(event,data)
}
}
onDragOver=(event,data)=>{
this.props.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
});
this.props.onDragEnter(event,data);
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,11 +79,13 @@ 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)),
});
this.props.onDrop(event,data);
if(this.props.onDrop){
this.props.onDrop(event,data);
}
}
getTarget=(evt)=>{

63
src/lib/filterColumn.js
View File

@ -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)}}>
<Checkbox id={da.key} checked={da.checked}/>
<span>{da.title}</span>
</div>))
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>)
}
})
}
clear=()=>{
@ -71,16 +93,34 @@ 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`}>
<span className={`${prefixCls}-clear-setting`} onClick={this.clear}>清除设置</span>
@ -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"

15
src/lib/util.js
View File

@ -34,4 +34,17 @@ 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;
}
}