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

feat:过滤行的输入触发条件支持回车、失去焦点触发

This commit is contained in:
kvkens 2018-10-17 11:20:29 +08:00
parent af91721d34
commit 8a3c03e310
11 changed files with 1098 additions and 1598 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
README.md
View File

@ -103,7 +103,7 @@ class Demo extends Component {
| haveExpandIcon | 控制是否显示行展开icon.**注：该参数只有在和expandedRowRender同时使用才生效** | Function(record, index):bool | () =>false |
| filterable | 是否开启根据条件来过滤数据 | bool | false
| filterDelay | 触发过滤输入的时候的ms延迟时间 | number | 300
| onFilterRowsChange | 触发过滤输入操作以及其他的回调 | (key,val) => () | ()=>()
| onFilterRowsChange | 触发过滤输入操作以及其他的回调，回车执行函数或者失去焦点触发回调 | (key,val) => () | () => ()
| onFilterRowsDropChange | 过滤下拉条件的回调 | (key,val)=>() | () => ()

35
build/FilterType.js
View File

@ -55,22 +55,32 @@ var FilterType = function (_Component) {
_this.clearText = function () {
_this.setState({
text: ""
}, function () {
_this.changeText("");
});
var onChange = _this.props.onChange;
onChange && onChange("");
};
_this.changeText = function (eve) {
_this.setState({
text: eve
});
};
_this.changeText = function (val) {
_this.changeTextCall = function (eve) {
var onChange = _this.props.onChange;
if (onChange) {
onChange(val);
_this.setState({
text: val
});
if (eve.keyCode == 13) {
onChange(eve.target.value);
}
};
_this.changeTextCallBlur = function (val) {
var onChange = _this.props.onChange;
onChange && onChange(val);
};
_this.changeSelect = function (val) {
var onChange = _this.props.onChange;
@ -129,7 +139,9 @@ var FilterType = function (_Component) {
},
value: _this.state.text,
className: className,
onChange: _this.changeText
onChange: _this.changeText,
onKeyDown: _this.changeTextCall,
onBlur: _this.changeTextCallBlur
}),
_react2["default"].createElement(_FilterDropDown2["default"], {
onSelectDropdown: onSelectDropdown,
@ -196,8 +208,13 @@ var FilterType = function (_Component) {
}
//清除文本
//设置文本
//回车执行函数
//失去焦点后执行函数
//设置下拉值
//清除下拉值

5
build/TableHeader.js
View File

@ -250,8 +250,9 @@ var TableHeader = function (_Component) {
rendertype: type,
clsPrefix: clsPrefix,
className: clsPrefix + ' filter-text',
onChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this.handlerFilterTextChange.bind(_this, dataIndex)),
onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex),
onChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this.handlerFilterTextChange.bind(_this, dataIndex))
// onChange={this.handlerFilterTextChange.bind(this, dataIndex)}
, onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex),
filterDropdown: rows[1][index]['filterdropdown']
});
//下拉框选择

17
dist/demo.css vendored
View File

@ -7579,7 +7579,8 @@ ul {
position: absolute;
outline: none;
overflow: hidden;
font-size: 12px; }
font-size: 12px;
animation: uSlideUpIn 300ms ease; }
.u-select-dropdown.slide-up-enter.slide-up-enter-active.u-select-dropdown-placement-bottomLeft, .u-select-dropdown.slide-up-appear.slide-up-appear-active.u-select-dropdown-placement-bottomLeft {
animation-name: uSlideUpIn; }
.u-select-dropdown.slide-up-enter.slide-up-enter-active.u-select-dropdown-placement-topLeft, .u-select-dropdown.slide-up-appear.slide-up-appear-active.u-select-dropdown-placement-topLeft {
@ -9334,8 +9335,7 @@ ul {
border-collapse: collapse;
max-width: 100%;
background-color: transparent;
width: 100%;
height: 100%; }
width: 100%; }
.rc-calendar table,
.rc-calendar td,
@ -9538,7 +9538,7 @@ ul {
.rc-calendar-time-panel-table {
table-layout: fixed;
width: 100%;
height: 100%;
height: 255px;
border-collapse: separate; }
.rc-calendar-time-panel-cell {
@ -9632,16 +9632,13 @@ ul {
user-select: none;
right: 0; }
.rc-calendar-month-panel-body, .rc-calendar-year-panel-body, .rc-calendar-decade-panel-body {
padding: 9px 10px 10px;
height: calc(100% - 30px); }
.rc-calendar-month-panel > div, .rc-calendar-year-panel > div {
height: 100%; }
.rc-calendar-month-panel-body {
padding: 9px 10px 10px; }
.rc-calendar-month-panel-table {
table-layout: fixed;
width: 100%;
height: 255px;
border-collapse: separate; }
.rc-calendar-month-panel-cell {

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

2597
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

2
docs/api.md
View File

@ -50,7 +50,7 @@ import 'bee-table/build/Table.css';
| haveExpandIcon | 控制是否显示行展开icon.**注：该参数只有在和expandedRowRender同时使用才生效** | Function(record, index):bool | () =>false |
| filterable | 是否开启根据条件来过滤数据 | bool | false
| filterDelay | 触发过滤输入的时候的ms延迟时间 | number | 300
| onFilterRowsChange | 触发过滤输入操作以及其他的回调 | (key,val) => () | ()=>()
| onFilterRowsChange | 触发过滤输入操作以及其他的回调，回车执行函数或者失去焦点触发回调 | (key,val) => () | () => ()
| onFilterRowsDropChange | 过滤下拉条件的回调 | (key,val)=>() | () => ()

2
package.json
View File

@ -55,7 +55,7 @@
"bee-loading": "^1.0.3",
"bee-menus": "^1.0.7",
"bee-popover": "^1.0.2",
"bee-select": "^1.0.8",
"bee-select": "^1.0.21",
"classnames": "^2.2.5",
"lodash.clonedeep": "^4.5.0",
"object-path": "^0.11.3",

29
src/FilterType.js
View File

@ -23,20 +23,29 @@ class FilterType extends Component {
clearText = () => {
this.setState({
text: ""
}, () => {
this.changeText("");
});
let { onChange } = this.props;
onChange && onChange("");
}
//设置文本
changeText = (eve) => {
this.setState({
text: eve
});
}
//设置文本
changeText = (val) => {
//回车执行函数
changeTextCall = (eve) => {
let { onChange } = this.props;
if (onChange) {
onChange(val);
this.setState({
text: val
});
if (eve.keyCode == 13) {
onChange(eve.target.value);
}
}
//失去焦点后执行函数
changeTextCallBlur = (val) => {
let { onChange } = this.props;
onChange && onChange(val);
}
//设置下拉值
changeSelect = (val) => {
let { onChange } = this.props;
@ -84,6 +93,8 @@ class FilterType extends Component {
value={this.state.text}
className={className}
onChange={this.changeText}
onKeyDown={this.changeTextCall}
onBlur={this.changeTextCallBlur}
/>
<FilterDropDown
onSelectDropdown={onSelectDropdown}

1
src/TableHeader.js
View File

@ -241,6 +241,7 @@ class TableHeader extends Component {
clsPrefix={clsPrefix}
className={`${clsPrefix} filter-text`}
onChange={debounce(filterDelay || 300, this.handlerFilterTextChange.bind(this, dataIndex))}
// onChange={this.handlerFilterTextChange.bind(this, dataIndex)}
onSelectDropdown={this.handlerFilterDropChange.bind(this, dataIndex)}
filterDropdown={rows[1][index]['filterdropdown']}
/>