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,25 +59,22 @@ 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]
|
||||
}, function () {
|
||||
onSelectDropdown(item);
|
||||
});
|
||||
}
|
||||
if (filterDropdownType == 'number') {
|
||||
_this.setState({
|
||||
selectNumberValue: [item.key]
|
||||
}, function () {
|
||||
onSelectDropdown(item);
|
||||
});
|
||||
}
|
||||
if (filterDropdownType == 'string') {
|
||||
_this.setState({
|
||||
selectValue: [item.key]
|
||||
}, function () {
|
||||
onSelectDropdown(item);
|
||||
});
|
||||
}
|
||||
if (filterDropdownType == 'number') {
|
||||
_this.setState({
|
||||
selectNumberValue: [item.key]
|
||||
}, function () {
|
||||
onSelectDropdown(item);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -87,8 +84,8 @@ var FilterDropDown = function (_Component) {
|
|||
|
||||
if (onClickClear) {
|
||||
_this.setState({
|
||||
selectValue: [],
|
||||
selectNumberValue: []
|
||||
// selectValue: [],
|
||||
// selectNumberValue: []
|
||||
}, function () {
|
||||
onClickClear();
|
||||
});
|
||||
|
|
@ -99,90 +96,145 @@ 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"];
|
||||
});
|
||||
switch (filterDropdownType) {
|
||||
case 'string':
|
||||
return _react2["default"].createElement(
|
||||
_beeMenus2["default"],
|
||||
{
|
||||
onSelect: _this.onSelectDropdown,
|
||||
selectedKeys: selectValue
|
||||
},
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'LIKE' },
|
||||
locale['include']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'ULIKE' },
|
||||
locale['exclusive']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'EQ' },
|
||||
locale['equal']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'UEQ' },
|
||||
locale['unequal']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'START' },
|
||||
locale['begin']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'END' },
|
||||
locale['end']
|
||||
)
|
||||
);
|
||||
case 'number':
|
||||
return _react2["default"].createElement(
|
||||
_beeMenus2["default"],
|
||||
{
|
||||
onSelect: _this.onSelectDropdown,
|
||||
selectedKeys: selectNumberValue
|
||||
},
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'GT' },
|
||||
locale['greater_than']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'GTEQ' },
|
||||
locale['great_than_equal_to']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'LT' },
|
||||
locale['less_than']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'LTEQ' },
|
||||
locale['less_than_equal_to']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'EQ' },
|
||||
locale['be_equal_to']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'UEQ' },
|
||||
locale['not_equal_to']
|
||||
)
|
||||
);
|
||||
default:
|
||||
return _react2["default"].createElement('div', null);
|
||||
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(
|
||||
_beeMenus2["default"],
|
||||
{
|
||||
onSelect: _this.onSelectDropdown,
|
||||
selectedKeys: selectValue
|
||||
},
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'LIKE' },
|
||||
locale['include']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'ULIKE' },
|
||||
locale['exclusive']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'EQ' },
|
||||
locale['equal']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'UEQ' },
|
||||
locale['unequal']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'RLIKE' },
|
||||
locale['begin']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'LLIKE' },
|
||||
locale['end']
|
||||
)
|
||||
);
|
||||
case 'number':
|
||||
return _react2["default"].createElement(
|
||||
_beeMenus2["default"],
|
||||
{
|
||||
onSelect: _this.onSelectDropdown,
|
||||
selectedKeys: selectNumberValue
|
||||
},
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'GT' },
|
||||
locale['greater_than']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'GTEQ' },
|
||||
locale['great_than_equal_to']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'LT' },
|
||||
locale['less_than']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'LTEQ' },
|
||||
locale['less_than_equal_to']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'EQ' },
|
||||
locale['be_equal_to']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: 'UEQ' },
|
||||
locale['not_equal_to']
|
||||
)
|
||||
);
|
||||
default:
|
||||
return _react2["default"].createElement('div', null);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -68,13 +68,15 @@ var FilterType = function (_Component) {
|
|||
onFilterClear = _this$props.onFilterClear,
|
||||
dataIndex = _this$props.dataIndex;
|
||||
|
||||
_this.setState({
|
||||
value: "", //清空值
|
||||
condition: _this.props.filterDropdownType == 'string' ? 'LIKE' : 'EQ' //切回默认查询条件
|
||||
}, function () {
|
||||
//调用清除方法参数为当前字段的field
|
||||
onFilterClear && onFilterClear(dataIndex);
|
||||
});
|
||||
if (_this.state.value !== "") {
|
||||
_this.setState({
|
||||
value: "", //清空值
|
||||
condition: _this.props.filterDropdownType == 'string' ? 'LIKE' : 'EQ' //切回默认查询条件
|
||||
}, function () {
|
||||
//调用清除方法参数为当前字段的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,11 +610,13 @@
|
|||
top: 0px;
|
||||
left: 3px; }
|
||||
|
||||
.u-filter-dropdown-menu-wrap .u-dropdown-menu li.u-dropdown-menu-item {
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
padding: 0px 16px 0 16px;
|
||||
cursor: pointer; }
|
||||
.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;
|
||||
padding: 0px 16px 0 16px;
|
||||
cursor: pointer; }
|
||||
|
||||
.u-checkbox {
|
||||
height: 16px;
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
this.store.setState({
|
||||
currentHoverKey: isHover ? key : null
|
||||
});
|
||||
//增加新的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,11 +8926,13 @@ ul {
|
|||
top: 0px;
|
||||
left: 3px; }
|
||||
|
||||
.u-filter-dropdown-menu-wrap .u-dropdown-menu li.u-dropdown-menu-item {
|
||||
line-height: 32px;
|
||||
height: 32px;
|
||||
padding: 0px 16px 0 16px;
|
||||
cursor: pointer; }
|
||||
.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;
|
||||
padding: 0px 16px 0 16px;
|
||||
cursor: pointer; }
|
||||
|
||||
.u-checkbox {
|
||||
height: 16px;
|
||||
|
|
|
|||
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,24 +27,21 @@ 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]
|
||||
}, () => {
|
||||
onSelectDropdown(item);
|
||||
});
|
||||
}
|
||||
if (filterDropdownType == 'number') {
|
||||
this.setState({
|
||||
selectNumberValue: [item.key]
|
||||
}, () => {
|
||||
onSelectDropdown(item);
|
||||
});
|
||||
}
|
||||
|
||||
if (filterDropdownType == 'string') {
|
||||
this.setState({
|
||||
selectValue: [item.key]
|
||||
}, () => {
|
||||
onSelectDropdown(item);
|
||||
});
|
||||
}
|
||||
if (filterDropdownType == 'number') {
|
||||
this.setState({
|
||||
selectNumberValue: [item.key]
|
||||
}, () => {
|
||||
onSelectDropdown(item);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -57,8 +54,8 @@ class FilterDropDown extends Component {
|
|||
let { onClickClear } = this.props;
|
||||
if (onClickClear) {
|
||||
this.setState({
|
||||
selectValue: [],
|
||||
selectNumberValue: []
|
||||
// selectValue: [],
|
||||
// selectNumberValue: []
|
||||
}, () => {
|
||||
onClickClear();
|
||||
});
|
||||
|
|
@ -72,35 +69,80 @@ 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);
|
||||
switch (filterDropdownType) {
|
||||
case 'string':
|
||||
return <Menu
|
||||
onSelect={this.onSelectDropdown}
|
||||
selectedKeys={selectValue}
|
||||
>
|
||||
<Item key="LIKE">{locale['include']}</Item>
|
||||
<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>
|
||||
</Menu>
|
||||
case 'number':
|
||||
return <Menu
|
||||
onSelect={this.onSelectDropdown}
|
||||
selectedKeys={selectNumberValue}
|
||||
>
|
||||
<Item key="GT">{locale['greater_than']}</Item>
|
||||
<Item key="GTEQ">{locale['great_than_equal_to']}</Item>
|
||||
<Item key="LT">{locale['less_than']}</Item>
|
||||
<Item key="LTEQ">{locale['less_than_equal_to']}</Item>
|
||||
<Item key="EQ">{locale['be_equal_to']}</Item>
|
||||
<Item key="UEQ">{locale['not_equal_to']}</Item>
|
||||
</Menu>
|
||||
default:
|
||||
return <div></div>;
|
||||
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
|
||||
onSelect={this.onSelectDropdown}
|
||||
selectedKeys={selectValue}
|
||||
>
|
||||
<Item key="LIKE">{locale['include']}</Item>
|
||||
<Item key="ULIKE">{locale['exclusive']}</Item>
|
||||
<Item key="EQ">{locale['equal']}</Item>
|
||||
<Item key="UEQ">{locale['unequal']}</Item>
|
||||
<Item key="RLIKE">{locale['begin']}</Item>
|
||||
<Item key="LLIKE">{locale['end']}</Item>
|
||||
</Menu>
|
||||
case 'number':
|
||||
return <Menu
|
||||
onSelect={this.onSelectDropdown}
|
||||
selectedKeys={selectNumberValue}
|
||||
>
|
||||
<Item key="GT">{locale['greater_than']}</Item>
|
||||
<Item key="GTEQ">{locale['great_than_equal_to']}</Item>
|
||||
<Item key="LT">{locale['less_than']}</Item>
|
||||
<Item key="LTEQ">{locale['less_than_equal_to']}</Item>
|
||||
<Item key="EQ">{locale['be_equal_to']}</Item>
|
||||
<Item key="UEQ">{locale['not_equal_to']}</Item>
|
||||
</Menu>
|
||||
default:
|
||||
return <div></div>;
|
||||
}
|
||||
}
|
||||
}
|
||||
render() {
|
||||
|
|
|
|||
|
|
@ -33,13 +33,15 @@ class FilterType extends Component {
|
|||
*/
|
||||
clearFilter = () => {
|
||||
let { onFilterClear, dataIndex } = this.props;
|
||||
this.setState({
|
||||
value: "",//清空值
|
||||
condition: this.props.filterDropdownType == 'string' ? 'LIKE' : 'EQ'//切回默认查询条件
|
||||
}, () => {
|
||||
//调用清除方法参数为当前字段的field
|
||||
onFilterClear && onFilterClear(dataIndex);
|
||||
});
|
||||
if (this.state.value !== "") {
|
||||
this.setState({
|
||||
value: "",//清空值
|
||||
condition: this.props.filterDropdownType == 'string' ? 'LIKE' : 'EQ'//切回默认查询条件
|
||||
}, () => {
|
||||
//调用清除方法参数为当前字段的field
|
||||
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>
|
||||
|
|
|
|||
26
src/Table.js
26
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,9 +970,14 @@ class Table extends Component {
|
|||
}
|
||||
|
||||
handleRowHover(isHover, key) {
|
||||
this.store.setState({
|
||||
currentHoverKey: isHover ? key : null,
|
||||
});
|
||||
//增加新的API，设置是否同步Hover状态，提高性能，避免无关的渲染
|
||||
let { syncHover } = this.props;
|
||||
if(syncHover){
|
||||
this.store.setState({
|
||||
currentHoverKey: isHover ? key : null,
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
|
|
|
|||
|
|
@ -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