merge
This commit is contained in:
wanghaoo
commit
e6e06fdbcc
27
CHANGELOG.md
27
CHANGELOG.md
|
|
@ -1,3 +1,28 @@
|
|||
<a name="1.6.15"></a>
|
||||
## [1.6.15](https://github.com/tinper-bee/bee-table/compare/v1.6.14...v1.6.15) (2018-12-15)
|
||||
|
||||
|
||||
|
||||
<a name="1.6.14"></a>
|
||||
## [1.6.14](https://github.com/tinper-bee/bee-table/compare/v1.6.13...v1.6.14) (2018-12-14)
|
||||
|
||||
|
||||
|
||||
<a name="1.6.13"></a>
|
||||
## [1.6.13](https://github.com/tinper-bee/bee-table/compare/v1.6.12...v1.6.13) (2018-12-14)
|
||||
|
||||
|
||||
|
||||
<a name="1.6.12"></a>
|
||||
## [1.6.12](https://github.com/tinper-bee/bee-table/compare/v1.6.11...v1.6.12) (2018-12-11)
|
||||
|
||||
|
||||
|
||||
<a name="1.6.11"></a>
|
||||
## [1.6.11](https://github.com/tinper-bee/bee-table/compare/v1.6.9...v1.6.11) (2018-12-06)
|
||||
|
||||
|
||||
|
||||
<a name="1.6.9"></a>
|
||||
## [1.6.9](https://github.com/tinper-bee/bee-table/compare/v1.6.8...v1.6.9) (2018-12-05)
|
||||
|
||||
|
|
@ -139,7 +164,7 @@
|
|||
|
||||
|
||||
<a name="1.5.1"></a>
|
||||
## [1.5.1](https://github.com/tinper-bee/bee-table/compare/v1.5.0...v1.5.1) (2018-11-19)
|
||||
## [1.5.1](https://github.com/tinper-bee/bee-table/compare/v1.5.0...v1.5.1) (2018-11-18)
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -106,6 +106,7 @@ class Demo extends Component {
|
|||
| onFilterChange | 触发过滤输入操作以及下拉条件的回调 | function | (field,value,condition) => ()
|
||||
| onFilterClear | 清除过滤条件的回调函数，回调参数为清空的字段 | function | (field) => ()
|
||||
| headerScroll | 表头下是否显示滚动条 | bool| false
|
||||
| syncHover | 是否同步Hover状态到左侧Checkbox，关闭此功能有助于提升性能 | bool| true
|
||||
|
||||
|
||||
*注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*
|
||||
|
|
@ -133,6 +134,8 @@ class Demo extends Component {
|
|||
| filterDropdownData | 下拉条件自定义数据，filterDropdownAuto=manual生效，传入格式：[{ key : "自定义", value : "自定义" }] | array | [] |
|
||||
| filterDropdownFocus | 触发点击下拉条件的回调，一般用于异步点击请求数据使用 | function | () => () |
|
||||
| filterDropdownType | 下拉条件类型，分为 string 和 number 条件类型 | string | string
|
||||
| filterDropdownIncludeKeys | 能够设置指定的下拉条件项，通过设置keys 其中string条件可设置:LIKE,ULIKE,EQ,UEQ,START,END.number条件可设置:GT,GTEQ,LT,LTEQ,EQ,UEQ | array | [] 不设置此属性为显示所有
|
||||
| filterInputNumberOptions | 数值框接收的props，具体属性参考bee-input-number | object | null
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -59,11 +59,9 @@ var FilterDropDown = function (_Component) {
|
|||
_this.onSelectDropdown = function (item) {
|
||||
var _this$props = _this.props,
|
||||
onSelectDropdown = _this$props.onSelectDropdown,
|
||||
dataText = _this$props.dataText,
|
||||
filterDropdownType = _this$props.filterDropdownType;
|
||||
|
||||
if (onSelectDropdown) {
|
||||
if (dataText != "") {
|
||||
if (filterDropdownType == 'string') {
|
||||
_this.setState({
|
||||
selectValue: [item.key]
|
||||
|
|
@ -79,7 +77,6 @@ var FilterDropDown = function (_Component) {
|
|||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
_this.onClickClear = function () {
|
||||
|
|
@ -87,8 +84,8 @@ var FilterDropDown = function (_Component) {
|
|||
|
||||
if (onClickClear) {
|
||||
_this.setState({
|
||||
selectValue: [],
|
||||
selectNumberValue: []
|
||||
// selectValue: [],
|
||||
// selectNumberValue: []
|
||||
}, function () {
|
||||
onClickClear();
|
||||
});
|
||||
|
|
@ -99,11 +96,65 @@ var FilterDropDown = function (_Component) {
|
|||
var _this$state = _this.state,
|
||||
selectValue = _this$state.selectValue,
|
||||
selectNumberValue = _this$state.selectNumberValue;
|
||||
var filterDropdownType = _this.props.filterDropdownType;
|
||||
var _this$props2 = _this.props,
|
||||
filterDropdownType = _this$props2.filterDropdownType,
|
||||
filterDropdownIncludeKeys = _this$props2.filterDropdownIncludeKeys;
|
||||
|
||||
var locale = (0, _tool.getComponentLocale)(_this.props, _this.context, 'Table', function () {
|
||||
return _i18n2["default"];
|
||||
});
|
||||
var stringEnum = {
|
||||
LIKE: 'include',
|
||||
ULIKE: 'exclusive',
|
||||
EQ: 'equal',
|
||||
UEQ: 'unequal',
|
||||
START: 'begin',
|
||||
END: 'end'
|
||||
};
|
||||
var numberEnum = {
|
||||
GT: 'greater_than',
|
||||
GTEQ: 'great_than_equal_to',
|
||||
LT: 'less_than',
|
||||
LTEQ: 'less_than_equal_to',
|
||||
EQ: 'be_equal_to',
|
||||
UEQ: 'not_equal_to'
|
||||
};
|
||||
if (filterDropdownIncludeKeys != undefined) {
|
||||
switch (filterDropdownType) {
|
||||
case 'string':
|
||||
return _react2["default"].createElement(
|
||||
_beeMenus2["default"],
|
||||
{
|
||||
onSelect: _this.onSelectDropdown,
|
||||
selectedKeys: selectValue
|
||||
},
|
||||
filterDropdownIncludeKeys.map(function (item) {
|
||||
return _react2["default"].createElement(
|
||||
Item,
|
||||
{ key: item },
|
||||
locale[stringEnum[item]]
|
||||
);
|
||||
})
|
||||
);
|
||||
case 'number':
|
||||
return _react2["default"].createElement(
|
||||
_beeMenus2["default"],
|
||||
{
|
||||
onSelect: _this.onSelectDropdown,
|
||||
selectedKeys: selectNumberValue
|
||||
},
|
||||
filterDropdownIncludeKeys.map(function (item) {
|
||||
return _react2["default"].createElement(
|
||||
Item,
|
||||
{ key: item },
|
||||
locale[numberEnum[item]]
|
||||
);
|
||||
})
|
||||
);
|
||||
default:
|
||||
return _react2["default"].createElement('div', null);
|
||||
}
|
||||
} else {
|
||||
switch (filterDropdownType) {
|
||||
case 'string':
|
||||
return _react2["default"].createElement(
|
||||
|
|
@ -134,12 +185,12 @@ var FilterDropDown = function (_Component) {
|
|||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'START' },
|
||||
{ key: 'RLIKE' },
|
||||
locale['begin']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'END' },
|
||||
{ key: 'LLIKE' },
|
||||
locale['end']
|
||||
)
|
||||
);
|
||||
|
|
@ -184,6 +235,7 @@ var FilterDropDown = function (_Component) {
|
|||
default:
|
||||
return _react2["default"].createElement('div', null);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
_this.state = {
|
||||
|
|
|
|||
|
|
@ -68,6 +68,7 @@ var FilterType = function (_Component) {
|
|||
onFilterClear = _this$props.onFilterClear,
|
||||
dataIndex = _this$props.dataIndex;
|
||||
|
||||
if (_this.state.value !== "") {
|
||||
_this.setState({
|
||||
value: "", //清空值
|
||||
condition: _this.props.filterDropdownType == 'string' ? 'LIKE' : 'EQ' //切回默认查询条件
|
||||
|
|
@ -75,6 +76,7 @@ var FilterType = function (_Component) {
|
|||
//调用清除方法参数为当前字段的field
|
||||
onFilterClear && onFilterClear(dataIndex);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
_this.changeText = function (val) {
|
||||
|
|
@ -89,7 +91,7 @@ var FilterType = function (_Component) {
|
|||
dataIndex = _this$props2.dataIndex;
|
||||
|
||||
if (e.keyCode == 13) {
|
||||
onFilterChange(dataIndex, e.target.value, _this.state.condition);
|
||||
e.target.value !== "" && onFilterChange(dataIndex, e.target.value, _this.state.condition);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -107,7 +109,7 @@ var FilterType = function (_Component) {
|
|||
_this.setState({
|
||||
condition: item.key
|
||||
}, function () {
|
||||
onFilterChange && onFilterChange(dataIndex, _this.state.value, _this.state.condition);
|
||||
_this.state.value !== "" && onFilterChange && onFilterChange(dataIndex, _this.state.value, _this.state.condition);
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -183,6 +185,8 @@ var FilterType = function (_Component) {
|
|||
|
||||
_this.renderControl = function (rendertype) {
|
||||
var _this$props7 = _this.props,
|
||||
filterInputNumberOptions = _this$props7.filterInputNumberOptions,
|
||||
filterDropdownIncludeKeys = _this$props7.filterDropdownIncludeKeys,
|
||||
dataIndex = _this$props7.dataIndex,
|
||||
filterDropdown = _this$props7.filterDropdown,
|
||||
filterDropdownType = _this$props7.filterDropdownType,
|
||||
|
|
@ -213,19 +217,20 @@ var FilterType = function (_Component) {
|
|||
onClickClear: _this.clearFilter,
|
||||
isShowClear: _this.state.value,
|
||||
isShowCondition: filterDropdown,
|
||||
filterDropdownType: filterDropdownType
|
||||
filterDropdownType: filterDropdownType,
|
||||
filterDropdownIncludeKeys: filterDropdownIncludeKeys
|
||||
})
|
||||
);
|
||||
case 'number':
|
||||
return _react2["default"].createElement(
|
||||
'div',
|
||||
{ className: clsPrefix + ' filter-wrap' },
|
||||
_react2["default"].createElement(_beeInputNumber2["default"], {
|
||||
_react2["default"].createElement(_beeInputNumber2["default"], _extends({}, filterInputNumberOptions, {
|
||||
className: className,
|
||||
value: _this.state.value,
|
||||
onChange: _this.changeNumber,
|
||||
iconStyle: 'one'
|
||||
}),
|
||||
})),
|
||||
_react2["default"].createElement(_FilterDropDown2["default"], {
|
||||
locale: locale,
|
||||
dataIndex: dataIndex,
|
||||
|
|
@ -234,7 +239,8 @@ var FilterType = function (_Component) {
|
|||
onClickClear: _this.clearFilter,
|
||||
isShowClear: _this.state.value != 0,
|
||||
isShowCondition: filterDropdown,
|
||||
filterDropdownType: filterDropdownType
|
||||
filterDropdownType: filterDropdownType,
|
||||
filterDropdownIncludeKeys: filterDropdownIncludeKeys
|
||||
})
|
||||
);
|
||||
case 'dropdown':
|
||||
|
|
@ -253,7 +259,8 @@ var FilterType = function (_Component) {
|
|||
onClickClear: _this.clearFilter,
|
||||
isShowCondition: filterDropdown,
|
||||
isShowClear: _this.state.value,
|
||||
filterDropdownType: filterDropdownType
|
||||
filterDropdownType: filterDropdownType,
|
||||
filterDropdownIncludeKeys: filterDropdownIncludeKeys
|
||||
})
|
||||
);
|
||||
case 'date':
|
||||
|
|
@ -275,7 +282,8 @@ var FilterType = function (_Component) {
|
|||
onClickClear: _this.clearFilter,
|
||||
isShowCondition: filterDropdown,
|
||||
isShowClear: _this.state.value,
|
||||
filterDropdownType: filterDropdownType
|
||||
filterDropdownType: filterDropdownType,
|
||||
filterDropdownIncludeKeys: filterDropdownIncludeKeys
|
||||
})
|
||||
);
|
||||
case 'daterange':
|
||||
|
|
@ -300,7 +308,8 @@ var FilterType = function (_Component) {
|
|||
onSelectDropdown: _this.onSelectDropdown,
|
||||
onClickClear: _this.clearFilter,
|
||||
isShowCondition: filterDropdown,
|
||||
isShowClear: _this.state.value
|
||||
isShowClear: _this.state.value,
|
||||
filterDropdownIncludeKeys: filterDropdownIncludeKeys
|
||||
})
|
||||
);
|
||||
case 'bool':
|
||||
|
|
@ -312,7 +321,8 @@ var FilterType = function (_Component) {
|
|||
onChange: onChange
|
||||
}),
|
||||
_react2["default"].createElement(_FilterDropDown2["default"], { locale: locale,
|
||||
onSelectDropdown: onSelectDropdown
|
||||
onSelectDropdown: onSelectDropdown,
|
||||
filterDropdownIncludeKeys: filterDropdownIncludeKeys
|
||||
})
|
||||
);
|
||||
default:
|
||||
|
|
|
|||
|
|
@ -610,6 +610,8 @@
|
|||
top: 0px;
|
||||
left: 3px; }
|
||||
|
||||
.u-filter-dropdown-menu-wrap {
|
||||
z-index: 1800; }
|
||||
.u-filter-dropdown-menu-wrap .u-dropdown-menu li.u-dropdown-menu-item {
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
|
|
|
|||
|
|
@ -92,7 +92,13 @@ var propTypes = {
|
|||
getBodyWrapper: _propTypes2["default"].func,
|
||||
children: _propTypes2["default"].node,
|
||||
draggable: _propTypes2["default"].bool,
|
||||
minColumnWidth: _propTypes2["default"].number
|
||||
minColumnWidth: _propTypes2["default"].number,
|
||||
filterable: _propTypes2["default"].bool,
|
||||
filterDelay: _propTypes2["default"].number,
|
||||
onFilterChange: _propTypes2["default"].func,
|
||||
onFilterClear: _propTypes2["default"].func,
|
||||
syncHover: _propTypes2["default"].bool
|
||||
|
||||
};
|
||||
|
||||
var defaultProps = {
|
||||
|
|
@ -132,7 +138,8 @@ var defaultProps = {
|
|||
},
|
||||
columns: [],
|
||||
minColumnWidth: 80,
|
||||
locale: {}
|
||||
locale: {},
|
||||
syncHover: true
|
||||
};
|
||||
|
||||
var Table = function (_Component) {
|
||||
|
|
@ -501,7 +508,9 @@ var Table = function (_Component) {
|
|||
filterdropdownauto: column.filterDropdownAuto, //是否自定义数据
|
||||
filterdropdowndata: column.filterDropdownData, //自定义数据格式
|
||||
filterdropdownfocus: column.filterDropdownFocus, //焦点触发函数回调
|
||||
filterdropdowntype: column.filterDropdownType //下拉的类型分为 String,Number 默认是String
|
||||
filterdropdowntype: column.filterDropdownType, //下拉的类型分为 String,Number 默认是String
|
||||
filterdropdownincludekeys: column.filterDropdownIncludeKeys, //下拉条件按照指定的keys去显示
|
||||
filterinputnumberoptions: column.filterInputNumberOptions //设置数值框内的详细属性
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -1091,9 +1100,14 @@ var Table = function (_Component) {
|
|||
};
|
||||
|
||||
Table.prototype.handleRowHover = function handleRowHover(isHover, key) {
|
||||
//增加新的API，设置是否同步Hover状态，提高性能，避免无关的渲染
|
||||
var syncHover = this.props.syncHover;
|
||||
|
||||
if (syncHover) {
|
||||
this.store.setState({
|
||||
currentHoverKey: isHover ? key : null
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
Table.prototype.render = function render() {
|
||||
|
|
|
|||
|
|
@ -229,6 +229,7 @@ var TableHeader = function (_Component) {
|
|||
, onFilterClear: _this.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"] //是否显示下拉条件
|
||||
, filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
});
|
||||
//数值输入
|
||||
case "number":
|
||||
|
|
@ -242,6 +243,8 @@ var TableHeader = function (_Component) {
|
|||
, onFilterClear: _this.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
, filterInputNumberOptions: rows[1][index]["filterinputnumberoptions"] //设置数值框内的详细属性
|
||||
});
|
||||
//下拉框选择
|
||||
case "dropdown":
|
||||
|
|
@ -269,12 +272,14 @@ var TableHeader = function (_Component) {
|
|||
rendertype: type,
|
||||
className: clsPrefix + " filter-dropdown",
|
||||
data: selectDataSource,
|
||||
dataIndex: dataIndex //字段
|
||||
notFoundContent: "Loading" //没有数据显示的默认字
|
||||
, dataIndex: dataIndex //字段
|
||||
, onFilterChange: _this.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
onFocus: rows[1][index]["filterdropdownfocus"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
});
|
||||
//日期
|
||||
case "date":
|
||||
|
|
@ -289,6 +294,7 @@ var TableHeader = function (_Component) {
|
|||
, onFilterClear: _this.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
});
|
||||
//日期范围
|
||||
case "daterange":
|
||||
|
|
@ -303,6 +309,7 @@ var TableHeader = function (_Component) {
|
|||
, onFilterClear: _this.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
, filterDropdownIncludeKeys: rows[1][index]["filterdropdownincludekeys"] //下拉条件按照指定的keys去显示
|
||||
});
|
||||
default:
|
||||
//不匹配类型默认文本输入
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
@import "../node_modules/bee-message/build/Message.css";
|
||||
@import "../node_modules/bee-dropdown/build/Dropdown.css";
|
||||
@import "../node_modules/bee-input-number/build/InputNumber.css";
|
||||
@import "../node_modules/bee-modal/build/Modal.css";
|
||||
@import "../src/Table.scss";
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,170 @@
|
|||
/**
|
||||
*
|
||||
* @title 从弹出框内显示过滤行并且设置可选下拉条件
|
||||
* @description 通过Modal组件来展示表格的过滤相关能力，并且通过filterDropdownIncludeKeys设置可选条件
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
import Modal from 'bee-modal';
|
||||
import Button from 'bee-button';
|
||||
|
||||
|
||||
const columns29 = [
|
||||
{
|
||||
title: "姓名",
|
||||
width: 180,
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
filterType: "text",
|
||||
filterDropdown: "show",
|
||||
filterDropdownIncludeKeys: ['LIKE', 'EQ']
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
width: 170,
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
filterType: "number",
|
||||
filterDropdown: "show",
|
||||
filterDropdownType: "number",
|
||||
filterDropdownIncludeKeys: ['EQ'],
|
||||
filterInputNumberOptions: {
|
||||
max: 200,
|
||||
min: 0,
|
||||
step: 1,
|
||||
precision: 0
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "日期",
|
||||
width: 200,
|
||||
dataIndex: "date",
|
||||
key: "date",
|
||||
filterType: "date",
|
||||
filterDropdown: "show",
|
||||
format: "YYYY-MM-DD"
|
||||
}
|
||||
];
|
||||
|
||||
const data29 = [
|
||||
{
|
||||
key: "1",
|
||||
name: "John Brown",
|
||||
age: 32,
|
||||
date: "2018-09-19",
|
||||
address: "朝阳区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
date: "2018-09-18",
|
||||
address: "朝阳区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
date: "2018-09-18",
|
||||
address: "东城区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "4",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
date: "2018-09-18",
|
||||
address: "东城区",
|
||||
mark: "无"
|
||||
}, {
|
||||
key: "5",
|
||||
name: "John Brown",
|
||||
age: 32,
|
||||
date: "2018-09-18",
|
||||
address: "海淀区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "6",
|
||||
name: "Jim Green",
|
||||
age: 48,
|
||||
date: "2018-09-18",
|
||||
address: "海淀区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "7",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
date: "2018-09-18",
|
||||
address: "海淀区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "8",
|
||||
name: "Jim Green",
|
||||
age: 38,
|
||||
date: "2018-09-18",
|
||||
address: "海淀区",
|
||||
mark: "无"
|
||||
}
|
||||
];
|
||||
|
||||
class Demo29 extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
this.state = {
|
||||
show: false
|
||||
}
|
||||
this.close = this.close.bind(this);
|
||||
this.open = this.open.bind(this);
|
||||
}
|
||||
handlerFilterChange = (key, val, condition) => {
|
||||
console.log('参数：key=', key, ' value=', val, 'condition=', condition);
|
||||
}
|
||||
|
||||
handlerFilterClear = (key) => {
|
||||
console.log('清除条件', key);
|
||||
}
|
||||
close() {
|
||||
this.setState({
|
||||
show: false
|
||||
});
|
||||
}
|
||||
open() {
|
||||
this.setState({
|
||||
show: true
|
||||
});
|
||||
}
|
||||
render() {
|
||||
return (<div><Modal
|
||||
show={this.state.show}
|
||||
onHide={this.close}
|
||||
autoFocus={false}
|
||||
enforceFocus={false}
|
||||
>
|
||||
<Modal.Header closeButton>
|
||||
<Modal.Title>过滤行</Modal.Title>
|
||||
</Modal.Header>
|
||||
<Modal.Body>
|
||||
<Table
|
||||
onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()
|
||||
onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()
|
||||
filterDelay={500}//输入文本多少ms触发回调函数，默认300ms
|
||||
filterable={true}//是否开启过滤数据功能
|
||||
bordered
|
||||
columns={columns29}
|
||||
data={data29} />
|
||||
</Modal.Body>
|
||||
</Modal>
|
||||
<Button colors="primary" onClick={this.open}>显示表格</Button>
|
||||
</div>)
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo29;
|
||||
|
|
@ -21,14 +21,14 @@ const columns5 = [
|
|||
fixed: "left"
|
||||
},
|
||||
{ title: "Age", width: 100, dataIndex: "age", key: "age", fixed: "left" },
|
||||
{ title: "Column 1", dataIndex: "address", key: "1" },
|
||||
{ title: "Column 2", dataIndex: "address", key: "2" },
|
||||
{ title: "Column 3", dataIndex: "address", key: "3" },
|
||||
{ title: "Column 4", dataIndex: "address", key: "4" },
|
||||
{ title: "Column 5", dataIndex: "address", key: "5" },
|
||||
{ title: "Column 6", dataIndex: "address", key: "6" },
|
||||
{ title: "Column 7", dataIndex: "address", key: "7" },
|
||||
{ title: "Column 8", dataIndex: "address", key: "8" }
|
||||
{ title: "Column 1", dataIndex: "c1", key: "1" },
|
||||
{ title: "Column 2", dataIndex: "c2", key: "2" },
|
||||
{ title: "Column 3", dataIndex: "c3", key: "3" },
|
||||
{ title: "Column 4", dataIndex: "c4", key: "4" },
|
||||
{ title: "Column 5", dataIndex: "c5", key: "5" },
|
||||
{ title: "Column 6", dataIndex: "c6", key: "6" },
|
||||
{ title: "Column 7", dataIndex: "c7", key: "7" },
|
||||
{ title: "Column 8", dataIndex: "c8", key: "8" }
|
||||
];
|
||||
|
||||
const data5 = [
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -6,6 +6,7 @@
|
|||
@import url(../node_modules/bee-message/build/Message.css);
|
||||
@import url(../node_modules/bee-dropdown/build/Dropdown.css);
|
||||
@import url(../node_modules/bee-input-number/build/InputNumber.css);
|
||||
@import url(../node_modules/bee-modal/build/Modal.css);
|
||||
.red {
|
||||
color: rgb(244,67,54) !important; }
|
||||
|
||||
|
|
@ -2421,9 +2422,6 @@ i.uf {
|
|||
/*
|
||||
* 选择时删除文本阴影，及设置默认选中颜色
|
||||
*/
|
||||
::-moz-selection {
|
||||
background: rgb(187,222,251);
|
||||
text-shadow: none; }
|
||||
::selection {
|
||||
background: rgb(187,222,251);
|
||||
text-shadow: none; }
|
||||
|
|
@ -5287,7 +5285,7 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
|
|||
.u-panel .u-panel-body {
|
||||
padding: 15px 15px;
|
||||
position: relative; }
|
||||
.u-panel .u-panel-body .uf {
|
||||
.u-panel .u-panel-body .u-panel-copy {
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
top: 30px;
|
||||
|
|
@ -5297,7 +5295,7 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
|
|||
margin: 8px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer; }
|
||||
.u-panel .u-panel-body .uf:hover {
|
||||
.u-panel .u-panel-body .u-panel-copy:hover {
|
||||
color: #a8a7a7; }
|
||||
|
||||
.u-panel-default {
|
||||
|
|
@ -6673,7 +6671,8 @@ input.u-button[type="submit"] {
|
|||
border-radius: 0 500px 500px 0; }
|
||||
|
||||
.u-pagination {
|
||||
font-size: 14px; }
|
||||
font-size: 14px;
|
||||
position: relative; }
|
||||
.u-pagination-list {
|
||||
float: left;
|
||||
margin: 5px; }
|
||||
|
|
@ -6681,6 +6680,10 @@ input.u-button[type="submit"] {
|
|||
clear: both;
|
||||
display: table;
|
||||
content: ''; }
|
||||
.u-pagination-list > li.iconBtn > a {
|
||||
padding: 0 11px;
|
||||
font-size: 22px;
|
||||
line-height: 1.57142857; }
|
||||
.u-pagination-list > li > a, .u-pagination-list > li > span {
|
||||
display: inline-block;
|
||||
text-decoration: none;
|
||||
|
|
@ -6768,9 +6771,15 @@ input.u-button[type="submit"] {
|
|||
margin: 5px;
|
||||
float: left;
|
||||
min-width: 120px; }
|
||||
.u-pagination .data_per_select > span {
|
||||
display: inline-block;
|
||||
line-height: 36px;
|
||||
float: left; }
|
||||
.u-pagination .data_per_select .u-select {
|
||||
width: 50px;
|
||||
margin: 0 6px; }
|
||||
margin: 0 6px;
|
||||
height: 36px;
|
||||
float: left; }
|
||||
.u-pagination .data_per_select .u-select .u-select-selection {
|
||||
height: 36px; }
|
||||
.u-pagination .data_per_select .u-select .u-select-selection .u-select-selection-rendered {
|
||||
|
|
@ -6790,20 +6799,26 @@ input.u-button[type="submit"] {
|
|||
.u-pagination .page_jump {
|
||||
float: left;
|
||||
margin: 5px; }
|
||||
.u-pagination .page_jump > span {
|
||||
display: inline-block;
|
||||
line-height: 36px;
|
||||
float: left; }
|
||||
.u-pagination .page_jump_value {
|
||||
outline: none;
|
||||
-webkit-appearance: none;
|
||||
background: #fff;
|
||||
border-radius: 4px;
|
||||
line-height: 32px;
|
||||
width: 50px;
|
||||
margin: 0 6px;
|
||||
text-align: center;
|
||||
border: 1px solid #d7d7d7; }
|
||||
.u-pagination .page_jump_btn {
|
||||
margin-top: -3px;
|
||||
margin-left: 10px;
|
||||
border-color: #d7d7d7; }
|
||||
.u-pagination .page_jump_btn,
|
||||
.u-pagination .page_jump_value {
|
||||
margin: 0 6px;
|
||||
padding: 0;
|
||||
height: 36px;
|
||||
line-height: 34px;
|
||||
box-sizing: border-box;
|
||||
float: left; }
|
||||
.u-pagination-total {
|
||||
float: left;
|
||||
height: 36px;
|
||||
|
|
@ -6811,6 +6826,15 @@ input.u-button[type="submit"] {
|
|||
margin: 5px; }
|
||||
.u-pagination-total span {
|
||||
padding: 0 5px; }
|
||||
.u-pagination.u-pagination-disabled .u-pagination-disabled-mask {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
z-index: 2;
|
||||
cursor: not-allowed; }
|
||||
|
||||
.pagination-state {
|
||||
float: left;
|
||||
|
|
@ -6917,15 +6941,29 @@ input.u-button[type="submit"] {
|
|||
margin: 0 5px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
font-size: 14px; }
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
vertical-align: middle; }
|
||||
.u-checkbox.disabled .u-checkbox-label {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5; }
|
||||
.u-checkbox input[type='checkbox'] {
|
||||
display: none;
|
||||
cursor: pointer; }
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
.u-checkbox input[disabled] {
|
||||
cursor: not-allowed; }
|
||||
.u-checkbox input[type='checkbox']:focus + .u-checkbox-label:before {
|
||||
border-color: #1e88e5; }
|
||||
.u-checkbox.is-checked .u-checkbox-label:before {
|
||||
box-shadow: inset 0 0 0 10px rgb(30,136,229);
|
||||
border-color: rgb(30,136,229); }
|
||||
|
|
@ -6977,22 +7015,37 @@ input.u-button[type="submit"] {
|
|||
box-shadow: inset 0 0 0 10px rgb(76,175,80);
|
||||
border-color: rgb(76,175,80); }
|
||||
|
||||
.u-checkbox.u-checkbox-success input[type='checkbox']:focus + .u-checkbox-label:before {
|
||||
border-color: rgb(76,175,80); }
|
||||
|
||||
.u-checkbox.u-checkbox-warning.is-checked .u-checkbox-label:before {
|
||||
box-shadow: inset 0 0 0 10px rgb(255,152,0);
|
||||
border-color: rgb(255,152,0); }
|
||||
|
||||
.u-checkbox.u-checkbox-warning input[type='checkbox']:focus + .u-checkbox-label:before {
|
||||
border-color: rgb(255,152,0); }
|
||||
|
||||
.u-checkbox.u-checkbox-danger.is-checked .u-checkbox-label:before {
|
||||
box-shadow: inset 0 0 0 10px rgb(244,67,54);
|
||||
border-color: rgb(244,67,54); }
|
||||
|
||||
.u-checkbox.u-checkbox-danger input[type='checkbox']:focus + .u-checkbox-label:before {
|
||||
border-color: rgb(244,67,54); }
|
||||
|
||||
.u-checkbox.u-checkbox-dark.is-checked .u-checkbox-label:before {
|
||||
box-shadow: inset 0 0 0 10px rgb(97,97,97);
|
||||
border-color: rgb(97,97,97); }
|
||||
|
||||
.u-checkbox.u-checkbox-dark input[type='checkbox']:focus + .u-checkbox-label:before {
|
||||
border-color: rgb(97,97,97); }
|
||||
|
||||
.u-checkbox.u-checkbox-info.is-checked .u-checkbox-label:before {
|
||||
box-shadow: inset 0 0 0 10px rgb(0,188,212);
|
||||
border-color: rgb(0,188,212); }
|
||||
|
||||
.u-checkbox.u-checkbox-info input[type='checkbox']:focus + .u-checkbox-label:before {
|
||||
border-color: rgb(0,188,212); }
|
||||
|
||||
/* FormGroup */
|
||||
/* Navlayout */
|
||||
/* keyframes 定义 */
|
||||
|
|
@ -7530,7 +7583,8 @@ ul {
|
|||
zoom: 1;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
padding: 0 0 0 8px; }
|
||||
padding: 0 0 0 8px;
|
||||
top: -3px; }
|
||||
.u-select-selection--multiple .u-select-selection-choice-remove:before {
|
||||
display: block;
|
||||
font-family: "uf"; }
|
||||
|
|
@ -8872,6 +8926,8 @@ ul {
|
|||
top: 0px;
|
||||
left: 3px; }
|
||||
|
||||
.u-filter-dropdown-menu-wrap {
|
||||
z-index: 1800; }
|
||||
.u-filter-dropdown-menu-wrap .u-dropdown-menu li.u-dropdown-menu-item {
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
|
|
|
|||
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
|
|
@ -54,6 +54,9 @@ import 'bee-table/build/Table.css';
|
|||
| onFilterClear | 清除过滤条件的回调函数，回调参数为清空的字段 | function | (field) => ()
|
||||
| headerScroll | 表头下是否显示滚动条 | bool| false
|
||||
| sort | 排序的属性 | object| { mode:'single'//单列排序, backSource:false //默认是前端排序，值为true为后端排序 } mode:multiple-多列排序
|
||||
| syncHover | 是否同步Hover状态到左侧Checkbox，关闭此功能有助于提升性能 | bool| true
|
||||
|
||||
|
||||
*注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*
|
||||
|
||||
|
||||
|
|
@ -80,6 +83,8 @@ import 'bee-table/build/Table.css';
|
|||
| filterDropdownData | 下拉条件自定义数据，filterDropdownAuto=manual生效，传入格式：[{ key : "自定义", value : "自定义" }] | array | [] |
|
||||
| filterDropdownFocus | 触发点击下拉条件的回调，一般用于异步点击请求数据使用 | function | () => () |
|
||||
| filterDropdownType | 下拉条件类型，分为 string 和 number 条件类型 | string | string
|
||||
| filterDropdownIncludeKeys | 能够设置指定的下拉条件项，通过设置keys 其中string条件可设置:LIKE,ULIKE,EQ,UEQ,START,END.number条件可设置:GT,GTEQ,LT,LTEQ,EQ,UEQ | array | [] 不设置此属性为显示所有
|
||||
| filterInputNumberOptions | 数值框接收的props，具体属性参考bee-input-number | object | null
|
||||
|
||||
{% include "mixin.md"%}
|
||||
|
||||
|
|
|
|||
11
package.json
11
package.json
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bee-table",
|
||||
"version": "1.6.10-beta.1",
|
||||
"version": "1.6.15",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
"Table"
|
||||
],
|
||||
"engines": {
|
||||
"node": ">=4.0.0"
|
||||
"node": ">=6.0.0"
|
||||
},
|
||||
"jest": {
|
||||
"moduleFileExtensions": [
|
||||
|
|
@ -56,15 +56,16 @@
|
|||
"bee-loading": "^1.0.3",
|
||||
"bee-locale": "0.0.11",
|
||||
"bee-menus": "^1.0.7",
|
||||
"bee-modal": "^1.0.9",
|
||||
"bee-popover": "^1.0.2",
|
||||
"bee-select": "^1.0.21",
|
||||
"classnames": "^2.2.5",
|
||||
"component-classes": "^1.2.6",
|
||||
"lodash.clonedeep": "^4.5.0",
|
||||
"object-path": "^0.11.3",
|
||||
"shallowequal": "^1.0.2",
|
||||
"throttle-debounce": "^2.0.1",
|
||||
"tinper-bee-core": "latest",
|
||||
"component-classes": "^1.2.6",
|
||||
"warning": "^3.0.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
|
@ -90,8 +91,8 @@
|
|||
"enzyme": "^2.9.1",
|
||||
"es5-shim": "~4.1.10",
|
||||
"jest": "^22.0.4",
|
||||
"react": "^15.5.0",
|
||||
"react": "^16.6.3",
|
||||
"react-addons-test-utils": "^15.5.0",
|
||||
"react-dom": "^15.5.0"
|
||||
"react-dom": "^16.6.3"
|
||||
}
|
||||
}
|
||||
|
|
@ -27,9 +27,8 @@ class FilterDropDown extends Component {
|
|||
* @param {*} s 选中的selectRecord
|
||||
*/
|
||||
onSelectDropdown = (item) => {
|
||||
let { onSelectDropdown, dataText, filterDropdownType } = this.props;
|
||||
let { onSelectDropdown, filterDropdownType } = this.props;
|
||||
if (onSelectDropdown) {
|
||||
if (dataText != "") {
|
||||
if (filterDropdownType == 'string') {
|
||||
this.setState({
|
||||
selectValue: [item.key]
|
||||
|
|
@ -44,8 +43,6 @@ class FilterDropDown extends Component {
|
|||
onSelectDropdown(item);
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -57,8 +54,8 @@ class FilterDropDown extends Component {
|
|||
let { onClickClear } = this.props;
|
||||
if (onClickClear) {
|
||||
this.setState({
|
||||
selectValue: [],
|
||||
selectNumberValue: []
|
||||
// selectValue: [],
|
||||
// selectNumberValue: []
|
||||
}, () => {
|
||||
onClickClear();
|
||||
});
|
||||
|
|
@ -72,8 +69,52 @@ class FilterDropDown extends Component {
|
|||
*/
|
||||
getMenu = () => {
|
||||
let { selectValue, selectNumberValue } = this.state;
|
||||
let { filterDropdownType } = this.props;
|
||||
let { filterDropdownType, filterDropdownIncludeKeys } = this.props;
|
||||
let locale = getComponentLocale(this.props, this.context, 'Table', () => i18n);
|
||||
let stringEnum = {
|
||||
LIKE: 'include',
|
||||
ULIKE: 'exclusive',
|
||||
EQ: 'equal',
|
||||
UEQ: 'unequal',
|
||||
START: 'begin',
|
||||
END: 'end'
|
||||
};
|
||||
let numberEnum = {
|
||||
GT: 'greater_than',
|
||||
GTEQ: 'great_than_equal_to',
|
||||
LT: 'less_than',
|
||||
LTEQ: 'less_than_equal_to',
|
||||
EQ: 'be_equal_to',
|
||||
UEQ: 'not_equal_to'
|
||||
};
|
||||
if (filterDropdownIncludeKeys != undefined) {
|
||||
switch (filterDropdownType) {
|
||||
case 'string':
|
||||
return <Menu
|
||||
onSelect={this.onSelectDropdown}
|
||||
selectedKeys={selectValue}
|
||||
>
|
||||
{
|
||||
filterDropdownIncludeKeys.map(item => {
|
||||
return <Item key={item}>{locale[stringEnum[item]]}</Item>
|
||||
})
|
||||
}
|
||||
</Menu>
|
||||
case 'number':
|
||||
return <Menu
|
||||
onSelect={this.onSelectDropdown}
|
||||
selectedKeys={selectNumberValue}
|
||||
>
|
||||
{
|
||||
filterDropdownIncludeKeys.map(item => {
|
||||
return <Item key={item}>{locale[numberEnum[item]]}</Item>
|
||||
})
|
||||
}
|
||||
</Menu>
|
||||
default:
|
||||
return <div></div>;
|
||||
}
|
||||
} else {
|
||||
switch (filterDropdownType) {
|
||||
case 'string':
|
||||
return <Menu
|
||||
|
|
@ -84,8 +125,8 @@ class FilterDropDown extends Component {
|
|||
<Item key="ULIKE">{locale['exclusive']}</Item>
|
||||
<Item key="EQ">{locale['equal']}</Item>
|
||||
<Item key="UEQ">{locale['unequal']}</Item>
|
||||
<Item key="START">{locale['begin']}</Item>
|
||||
<Item key="END">{locale['end']}</Item>
|
||||
<Item key="RLIKE">{locale['begin']}</Item>
|
||||
<Item key="LLIKE">{locale['end']}</Item>
|
||||
</Menu>
|
||||
case 'number':
|
||||
return <Menu
|
||||
|
|
@ -103,6 +144,7 @@ class FilterDropDown extends Component {
|
|||
return <div></div>;
|
||||
}
|
||||
}
|
||||
}
|
||||
render() {
|
||||
let { isShowCondition } = this.props;
|
||||
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@ class FilterType extends Component {
|
|||
*/
|
||||
clearFilter = () => {
|
||||
let { onFilterClear, dataIndex } = this.props;
|
||||
if (this.state.value !== "") {
|
||||
this.setState({
|
||||
value: "",//清空值
|
||||
condition: this.props.filterDropdownType == 'string' ? 'LIKE' : 'EQ'//切回默认查询条件
|
||||
|
|
@ -41,6 +42,7 @@ class FilterType extends Component {
|
|||
onFilterClear && onFilterClear(dataIndex);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置输入文本的值
|
||||
|
|
@ -59,7 +61,7 @@ class FilterType extends Component {
|
|||
changeTextCall = (e) => {
|
||||
let { onFilterChange, dataIndex } = this.props;
|
||||
if (e.keyCode == 13) {
|
||||
onFilterChange(dataIndex, e.target.value, this.state.condition);
|
||||
e.target.value !== "" && onFilterChange(dataIndex, e.target.value, this.state.condition);
|
||||
}
|
||||
}
|
||||
/**
|
||||
|
|
@ -82,7 +84,7 @@ class FilterType extends Component {
|
|||
this.setState({
|
||||
condition: item.key
|
||||
}, () => {
|
||||
onFilterChange && onFilterChange(dataIndex, this.state.value, this.state.condition);
|
||||
this.state.value !== "" && onFilterChange && onFilterChange(dataIndex, this.state.value, this.state.condition);
|
||||
});
|
||||
}
|
||||
|
||||
|
|
@ -157,7 +159,7 @@ class FilterType extends Component {
|
|||
* @returns
|
||||
*/
|
||||
renderControl = (rendertype) => {
|
||||
let { dataIndex, filterDropdown, filterDropdownType, format, className, onChange, onSelectDropdown, clsPrefix, locale } = this.props;
|
||||
let { filterInputNumberOptions, filterDropdownIncludeKeys, dataIndex, filterDropdown, filterDropdownType, format, className, onChange, onSelectDropdown, clsPrefix, locale } = this.props;
|
||||
switch (rendertype) {
|
||||
case 'text':
|
||||
return <div className={`${clsPrefix} filter-wrap`}>
|
||||
|
|
@ -177,12 +179,14 @@ class FilterType extends Component {
|
|||
isShowClear={this.state.value}
|
||||
isShowCondition={filterDropdown}
|
||||
filterDropdownType={filterDropdownType}
|
||||
filterDropdownIncludeKeys={filterDropdownIncludeKeys}
|
||||
>
|
||||
</FilterDropDown>
|
||||
</div>
|
||||
case 'number':
|
||||
return <div className={`${clsPrefix} filter-wrap`}>
|
||||
<InputNumber
|
||||
{...filterInputNumberOptions}
|
||||
className={className}
|
||||
value={this.state.value}
|
||||
onChange={this.changeNumber}
|
||||
|
|
@ -197,6 +201,7 @@ class FilterType extends Component {
|
|||
isShowClear={this.state.value != 0}
|
||||
isShowCondition={filterDropdown}
|
||||
filterDropdownType={filterDropdownType}
|
||||
filterDropdownIncludeKeys={filterDropdownIncludeKeys}
|
||||
>
|
||||
</FilterDropDown>
|
||||
</div>
|
||||
|
|
@ -215,6 +220,7 @@ class FilterType extends Component {
|
|||
isShowCondition={filterDropdown}
|
||||
isShowClear={this.state.value}
|
||||
filterDropdownType={filterDropdownType}
|
||||
filterDropdownIncludeKeys={filterDropdownIncludeKeys}
|
||||
>
|
||||
</FilterDropDown></div>
|
||||
case 'date':
|
||||
|
|
@ -235,6 +241,7 @@ class FilterType extends Component {
|
|||
isShowCondition={filterDropdown}
|
||||
isShowClear={this.state.value}
|
||||
filterDropdownType={filterDropdownType}
|
||||
filterDropdownIncludeKeys={filterDropdownIncludeKeys}
|
||||
>
|
||||
</FilterDropDown>
|
||||
</div>
|
||||
|
|
@ -259,6 +266,7 @@ class FilterType extends Component {
|
|||
onClickClear={this.clearFilter}
|
||||
isShowCondition={filterDropdown}
|
||||
isShowClear={this.state.value}
|
||||
filterDropdownIncludeKeys={filterDropdownIncludeKeys}
|
||||
>
|
||||
</FilterDropDown>
|
||||
</div>
|
||||
|
|
@ -270,6 +278,7 @@ class FilterType extends Component {
|
|||
/>
|
||||
<FilterDropDown locale={locale}
|
||||
onSelectDropdown={onSelectDropdown}
|
||||
filterDropdownIncludeKeys={filterDropdownIncludeKeys}
|
||||
>
|
||||
</FilterDropDown>
|
||||
</div>
|
||||
|
|
|
|||
20
src/Table.js
20
src/Table.js
|
|
@ -42,7 +42,13 @@ const propTypes = {
|
|||
getBodyWrapper: PropTypes.func,
|
||||
children: PropTypes.node,
|
||||
draggable: PropTypes.bool,
|
||||
minColumnWidth: PropTypes.number
|
||||
minColumnWidth: PropTypes.number,
|
||||
filterable: PropTypes.bool,
|
||||
filterDelay: PropTypes.number,
|
||||
onFilterChange: PropTypes.func,
|
||||
onFilterClear: PropTypes.func,
|
||||
syncHover: PropTypes.bool,
|
||||
|
||||
};
|
||||
|
||||
const defaultProps = {
|
||||
|
|
@ -71,7 +77,8 @@ const defaultProps = {
|
|||
emptyText: () => 'No Data',
|
||||
columns:[],
|
||||
minColumnWidth: 80,
|
||||
locale:{}
|
||||
locale:{},
|
||||
syncHover: true
|
||||
};
|
||||
|
||||
class Table extends Component {
|
||||
|
|
@ -401,7 +408,9 @@ class Table extends Component {
|
|||
filterdropdownauto: column.filterDropdownAuto,//是否自定义数据
|
||||
filterdropdowndata: column.filterDropdownData,//自定义数据格式
|
||||
filterdropdownfocus: column.filterDropdownFocus,//焦点触发函数回调
|
||||
filterdropdowntype: column.filterDropdownType//下拉的类型分为 String,Number 默认是String
|
||||
filterdropdowntype: column.filterDropdownType,//下拉的类型分为 String,Number 默认是String
|
||||
filterdropdownincludekeys: column.filterDropdownIncludeKeys,//下拉条件按照指定的keys去显示
|
||||
filterinputnumberoptions: column.filterInputNumberOptions//设置数值框内的详细属性
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
@ -961,11 +970,16 @@ class Table extends Component {
|
|||
}
|
||||
|
||||
handleRowHover(isHover, key) {
|
||||
//增加新的API，设置是否同步Hover状态，提高性能，避免无关的渲染
|
||||
let { syncHover } = this.props;
|
||||
if(syncHover){
|
||||
this.store.setState({
|
||||
currentHoverKey: isHover ? key : null,
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
const props = this.props;
|
||||
const clsPrefix = props.clsPrefix;
|
||||
|
|
|
|||
|
|
@ -687,6 +687,7 @@ $checkbox-height:16px;
|
|||
}
|
||||
|
||||
.u-filter-dropdown-menu-wrap {
|
||||
z-index: 1800;
|
||||
.u-dropdown-menu {
|
||||
li.u-dropdown-menu-item {
|
||||
line-height: 32px;
|
||||
|
|
|
|||
|
|
@ -400,6 +400,7 @@ class TableHeader extends Component {
|
|||
onFilterClear={this.handlerFilterClear}//清除回调
|
||||
filterDropdown={rows[1][index]["filterdropdown"]}//是否显示下拉条件
|
||||
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
||||
filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
|
||||
/>
|
||||
);
|
||||
//数值输入
|
||||
|
|
@ -415,6 +416,8 @@ class TableHeader extends Component {
|
|||
onFilterClear={this.handlerFilterClear}//清除回调
|
||||
filterDropdown={rows[1][index]["filterdropdown"]}
|
||||
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
||||
filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
|
||||
filterInputNumberOptions={rows[1][index]["filterinputnumberoptions"]}//设置数值框内的详细属性
|
||||
/>
|
||||
);
|
||||
//下拉框选择
|
||||
|
|
@ -442,12 +445,14 @@ class TableHeader extends Component {
|
|||
rendertype={type}
|
||||
className={`${clsPrefix} filter-dropdown`}
|
||||
data={selectDataSource}
|
||||
notFoundContent={"Loading"}//没有数据显示的默认字
|
||||
dataIndex={dataIndex}//字段
|
||||
onFilterChange={this.handlerFilterChange}//输入框回调
|
||||
onFilterClear={this.handlerFilterClear}//清除回调
|
||||
filterDropdown={rows[1][index]["filterdropdown"]}
|
||||
onFocus={rows[1][index]["filterdropdownfocus"]}
|
||||
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
||||
filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
|
||||
/>
|
||||
);
|
||||
//日期
|
||||
|
|
@ -464,6 +469,7 @@ class TableHeader extends Component {
|
|||
onFilterClear={this.handlerFilterClear}//清除回调
|
||||
filterDropdown={rows[1][index]["filterdropdown"]}
|
||||
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
||||
filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
|
||||
/>
|
||||
);
|
||||
//日期范围
|
||||
|
|
@ -480,6 +486,7 @@ class TableHeader extends Component {
|
|||
onFilterClear={this.handlerFilterClear}//清除回调
|
||||
filterDropdown={rows[1][index]["filterdropdown"]}
|
||||
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
||||
filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
|
||||
/>
|
||||
);
|
||||
default:
|
||||
|
|
|
|||
Loading…
Reference in New Issue