Merge branch 'master' of github.com:tinper-bee/bee-table
This commit is contained in:
wanghaoo
commit
81a34d36fe
|
|
@ -1,3 +1,8 @@
|
|||
<a name="1.5.18"></a>
|
||||
## [1.5.18](https://github.com/tinper-bee/bee-table/compare/v1.5.17...v1.5.18) (2018-11-30)
|
||||
|
||||
|
||||
|
||||
<a name="1.5.17"></a>
|
||||
## [1.5.17](https://github.com/tinper-bee/bee-table/compare/v1.5.16...v1.5.17) (2018-11-29)
|
||||
|
||||
|
|
@ -79,7 +84,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)
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -103,8 +103,9 @@ class Demo extends Component {
|
|||
| haveExpandIcon | 控制是否显示行展开icon.**注：该参数只有在和expandedRowRender同时使用才生效** | Function(record, index):bool | () =>false |
|
||||
| filterable | 是否开启根据条件来过滤数据 | bool | false
|
||||
| filterDelay | 触发过滤输入的时候的ms延迟时间 | number | 300
|
||||
| onFilterRowsChange | 触发过滤输入操作以及其他的回调，回车执行函数或者失去焦点触发回调 | (key,val) => () | () => ()
|
||||
| onFilterRowsDropChange | 过滤下拉条件的回调 | (key,val)=>() | () => ()
|
||||
| onFilterChange | 触发过滤输入操作以及下拉条件的回调 | function | (field,value,condition) => ()
|
||||
| onFilterClear | 清除过滤条件的回调函数，回调参数为清空的字段 | function | (field) => ()
|
||||
| headerScroll | 表头下是否显示滚动条 | bool| false
|
||||
|
||||
|
||||
*注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*
|
||||
|
|
@ -125,7 +126,7 @@ class Demo extends Component {
|
|||
|onCellClick|单击列的单元格时调用|Function(row, event)|-|
|
||||
|onHeadCellClick|单击表头的单元格时调用|Function(row, event)|row 当前行的数据|
|
||||
| order | 设置排序 | string（"descend"、"ascend"） | - |
|
||||
| filterType | 过滤下拉的类型.可选`text`,`dropdown`,`date` | string | text |
|
||||
| filterType | 过滤下拉的类型.可选`text(文本框)`,`dropdown(下拉)`,`date(日期)`,`daterange(日期范围)`,`number(数值)` | string | text |
|
||||
| filterDropdown | 是否显示过滤下拉.可选`show`,`hide` | string | show |
|
||||
| format | 针对过滤下拉设置日期类的格式 | string | YYYY-MM-DD |
|
||||
| filterDropdownAuto | 设置下拉条件是否自动设置选项，`auto`自动根据当前数据生成，`manual`手动传入，可以使用`filterDropdownData`来传入自定义数据 | string | auto |
|
||||
|
|
|
|||
|
|
@ -56,15 +56,19 @@ var FilterDropDown = function (_Component) {
|
|||
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this));
|
||||
|
||||
_this.onSelectDropdown = function (s) {
|
||||
var onSelectDropdown = _this.props.onSelectDropdown;
|
||||
_this.onSelectDropdown = function (item) {
|
||||
var _this$props = _this.props,
|
||||
onSelectDropdown = _this$props.onSelectDropdown,
|
||||
dataText = _this$props.dataText;
|
||||
|
||||
if (onSelectDropdown) {
|
||||
_this.setState({
|
||||
selectValue: [s.key]
|
||||
}, function () {
|
||||
onSelectDropdown(s);
|
||||
});
|
||||
if (dataText != "") {
|
||||
_this.setState({
|
||||
selectValue: [item.key]
|
||||
}, function () {
|
||||
onSelectDropdown(item);
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -97,32 +101,32 @@ var FilterDropDown = function (_Component) {
|
|||
},
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: '2' },
|
||||
{ key: 'LIKE' },
|
||||
locale['include']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: '6' },
|
||||
{ key: 'ULIKE' },
|
||||
locale['exclusive']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: '1' },
|
||||
{ key: 'EQ' },
|
||||
locale['equal']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: '5' },
|
||||
{ key: 'UEQ' },
|
||||
locale['unequal']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: '7' },
|
||||
{ key: 'START' },
|
||||
locale['begin']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: '3' },
|
||||
{ key: 'END' },
|
||||
locale['end']
|
||||
)
|
||||
);
|
||||
|
|
@ -135,32 +139,32 @@ var FilterDropDown = function (_Component) {
|
|||
},
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: '1' },
|
||||
{ key: 'GT' },
|
||||
locale['greater_than']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: '2' },
|
||||
{ key: 'GTEQ' },
|
||||
locale['great_than_equal_to']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: '3' },
|
||||
{ key: 'LT' },
|
||||
locale['less_than']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: '4' },
|
||||
{ key: 'LTEQ' },
|
||||
locale['less_than_equal_to']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: '5' },
|
||||
{ key: 'EQ' },
|
||||
locale['be_equal_to']
|
||||
),
|
||||
_react2["default"].createElement(
|
||||
Item,
|
||||
{ key: '6' },
|
||||
{ key: 'UEQ' },
|
||||
locale['not_equal_to']
|
||||
)
|
||||
);
|
||||
|
|
@ -204,6 +208,7 @@ var FilterDropDown = function (_Component) {
|
|||
isShowCondition == 'show' && _react2["default"].createElement(
|
||||
_beeDropdown2["default"],
|
||||
{
|
||||
overlayClassName: 'u-filter-dropdown-menu-wrap',
|
||||
trigger: ['click'],
|
||||
overlay: this.getMenu(),
|
||||
animation: 'slide-up'
|
||||
|
|
|
|||
|
|
@ -58,26 +58,68 @@ var propTypes = {
|
|||
var FilterType = function (_Component) {
|
||||
_inherits(FilterType, _Component);
|
||||
|
||||
function FilterType() {
|
||||
function FilterType(props) {
|
||||
_classCallCheck(this, FilterType);
|
||||
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this));
|
||||
var _this = _possibleConstructorReturn(this, _Component.call(this, props));
|
||||
|
||||
_this.clearFilter = function () {
|
||||
var _this$props = _this.props,
|
||||
onFilterClear = _this$props.onFilterClear,
|
||||
dataIndex = _this$props.dataIndex;
|
||||
|
||||
_this.clearText = function () {
|
||||
_this.setState({
|
||||
text: ""
|
||||
value: "", //清空值
|
||||
condition: _this.props.filterDropdownType == 'string' ? 'LIKE' : 'EQ' //切回默认查询条件
|
||||
}, function () {
|
||||
//调用清除方法参数为当前字段的field
|
||||
onFilterClear && onFilterClear(dataIndex);
|
||||
});
|
||||
var onChange = _this.props.onChange;
|
||||
|
||||
onChange && onChange("");
|
||||
};
|
||||
|
||||
_this.changeNumber = function (number) {
|
||||
var onChange = _this.props.onChange;
|
||||
|
||||
onChange && onChange(number);
|
||||
_this.changeText = function (val) {
|
||||
_this.setState({
|
||||
number: number
|
||||
value: val
|
||||
});
|
||||
};
|
||||
|
||||
_this.changeTextCall = function (e) {
|
||||
var _this$props2 = _this.props,
|
||||
onFilterChange = _this$props2.onFilterChange,
|
||||
dataIndex = _this$props2.dataIndex;
|
||||
|
||||
if (e.keyCode == 13) {
|
||||
onFilterChange(dataIndex, e.target.value, _this.state.condition);
|
||||
}
|
||||
};
|
||||
|
||||
_this.changeValue = function () {
|
||||
_this.setState({
|
||||
value: ""
|
||||
});
|
||||
};
|
||||
|
||||
_this.onSelectDropdown = function (item) {
|
||||
var _this$props3 = _this.props,
|
||||
onFilterChange = _this$props3.onFilterChange,
|
||||
dataIndex = _this$props3.dataIndex;
|
||||
|
||||
_this.setState({
|
||||
condition: item.key
|
||||
}, function () {
|
||||
onFilterChange && onFilterChange(dataIndex, _this.state.value, _this.state.condition);
|
||||
});
|
||||
};
|
||||
|
||||
_this.changeNumber = function (value) {
|
||||
var _this$props4 = _this.props,
|
||||
onFilterChange = _this$props4.onFilterChange,
|
||||
dataIndex = _this$props4.dataIndex;
|
||||
|
||||
_this.setState({
|
||||
value: value
|
||||
}, function () {
|
||||
onFilterChange(dataIndex, value, _this.state.condition);
|
||||
});
|
||||
};
|
||||
|
||||
|
|
@ -86,37 +128,25 @@ var FilterType = function (_Component) {
|
|||
|
||||
onChange && onChange("");
|
||||
_this.setState({
|
||||
number: ""
|
||||
value: ""
|
||||
});
|
||||
};
|
||||
|
||||
_this.changeText = function (eve) {
|
||||
_this.setState({
|
||||
text: eve
|
||||
});
|
||||
};
|
||||
|
||||
_this.changeTextCall = function (eve) {
|
||||
var onChange = _this.props.onChange;
|
||||
|
||||
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;
|
||||
_this.changeSelect = function (value) {
|
||||
var _this$props5 = _this.props,
|
||||
onFilterChange = _this$props5.onFilterChange,
|
||||
dataIndex = _this$props5.dataIndex;
|
||||
|
||||
if (onChange) {
|
||||
onChange(val);
|
||||
if (onFilterChange) {
|
||||
onFilterChange(dataIndex, value, _this.state.condition);
|
||||
_this.setState({
|
||||
selectValue: val
|
||||
value: value
|
||||
});
|
||||
}
|
||||
};
|
||||
|
|
@ -137,28 +167,31 @@ var FilterType = function (_Component) {
|
|||
});
|
||||
};
|
||||
|
||||
_this.changeDate = function (val) {
|
||||
var onChange = _this.props.onChange;
|
||||
_this.changeDate = function (value) {
|
||||
var _this$props6 = _this.props,
|
||||
onFilterChange = _this$props6.onFilterChange,
|
||||
dataIndex = _this$props6.dataIndex;
|
||||
|
||||
if (onChange) {
|
||||
onChange(val);
|
||||
if (onFilterChange) {
|
||||
onFilterChange(dataIndex, value, _this.state.condition);
|
||||
_this.setState({
|
||||
dateValue: val,
|
||||
value: value,
|
||||
open: false
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
_this.renderControl = function (rendertype) {
|
||||
var _this$props = _this.props,
|
||||
filterDropdown = _this$props.filterDropdown,
|
||||
filterDropdownType = _this$props.filterDropdownType,
|
||||
format = _this$props.format,
|
||||
className = _this$props.className,
|
||||
onChange = _this$props.onChange,
|
||||
onSelectDropdown = _this$props.onSelectDropdown,
|
||||
clsPrefix = _this$props.clsPrefix,
|
||||
locale = _this$props.locale;
|
||||
var _this$props7 = _this.props,
|
||||
dataIndex = _this$props7.dataIndex,
|
||||
filterDropdown = _this$props7.filterDropdown,
|
||||
filterDropdownType = _this$props7.filterDropdownType,
|
||||
format = _this$props7.format,
|
||||
className = _this$props7.className,
|
||||
onChange = _this$props7.onChange,
|
||||
onSelectDropdown = _this$props7.onSelectDropdown,
|
||||
clsPrefix = _this$props7.clsPrefix,
|
||||
locale = _this$props7.locale;
|
||||
|
||||
switch (rendertype) {
|
||||
case 'text':
|
||||
|
|
@ -166,20 +199,19 @@ var FilterType = function (_Component) {
|
|||
'div',
|
||||
{ className: clsPrefix + ' filter-wrap' },
|
||||
_react2["default"].createElement(_beeFormControl2["default"], {
|
||||
ref: function ref(el) {
|
||||
return _this.text = el;
|
||||
},
|
||||
value: _this.state.text,
|
||||
value: _this.state.value,
|
||||
className: className,
|
||||
onChange: _this.changeText,
|
||||
onKeyDown: _this.changeTextCall,
|
||||
onBlur: _this.changeTextCallBlur
|
||||
onKeyDown: _this.changeTextCall
|
||||
//onBlur={this.changeTextCallBlur}
|
||||
}),
|
||||
_react2["default"].createElement(_FilterDropDown2["default"], {
|
||||
locale: locale,
|
||||
onSelectDropdown: onSelectDropdown,
|
||||
onClickClear: _this.clearText,
|
||||
isShowClear: _this.state.text,
|
||||
dataIndex: dataIndex,
|
||||
dataText: _this.state.value,
|
||||
onSelectDropdown: _this.onSelectDropdown,
|
||||
onClickClear: _this.clearFilter,
|
||||
isShowClear: _this.state.value,
|
||||
isShowCondition: filterDropdown,
|
||||
filterDropdownType: filterDropdownType
|
||||
})
|
||||
|
|
@ -190,15 +222,17 @@ var FilterType = function (_Component) {
|
|||
{ className: clsPrefix + ' filter-wrap' },
|
||||
_react2["default"].createElement(_beeInputNumber2["default"], {
|
||||
className: className,
|
||||
value: _this.state.number,
|
||||
value: _this.state.value,
|
||||
onChange: _this.changeNumber,
|
||||
iconStyle: 'one'
|
||||
}),
|
||||
_react2["default"].createElement(_FilterDropDown2["default"], {
|
||||
locale: locale,
|
||||
onSelectDropdown: onSelectDropdown,
|
||||
onClickClear: _this.clearNumber,
|
||||
isShowClear: _this.state.number,
|
||||
dataIndex: dataIndex,
|
||||
dataText: _this.state.value,
|
||||
onSelectDropdown: _this.onSelectDropdown,
|
||||
onClickClear: _this.clearFilter,
|
||||
isShowClear: _this.state.value != 0,
|
||||
isShowCondition: filterDropdown,
|
||||
filterDropdownType: filterDropdownType
|
||||
})
|
||||
|
|
@ -208,15 +242,18 @@ var FilterType = function (_Component) {
|
|||
'div',
|
||||
{ className: clsPrefix + ' filter-wrap' },
|
||||
_react2["default"].createElement(_beeSelect2["default"], _extends({}, _this.props, {
|
||||
value: _this.state.selectValue,
|
||||
value: _this.state.value,
|
||||
onChange: _this.changeSelect
|
||||
})),
|
||||
_react2["default"].createElement(_FilterDropDown2["default"], {
|
||||
locale: locale,
|
||||
onSelectDropdown: onSelectDropdown,
|
||||
onClickClear: _this.clearSelectValue,
|
||||
dataIndex: dataIndex,
|
||||
dataText: _this.state.value,
|
||||
onSelectDropdown: _this.onSelectDropdown,
|
||||
onClickClear: _this.clearFilter,
|
||||
isShowCondition: filterDropdown,
|
||||
isShowClear: _this.state.selectValue
|
||||
isShowClear: _this.state.value,
|
||||
filterDropdownType: filterDropdownType
|
||||
})
|
||||
);
|
||||
case 'date':
|
||||
|
|
@ -224,7 +261,7 @@ var FilterType = function (_Component) {
|
|||
'div',
|
||||
{ className: clsPrefix + ' filter-wrap' },
|
||||
_react2["default"].createElement(_beeDatepicker2["default"], _extends({}, _this.props, {
|
||||
value: _this.state.dateValue,
|
||||
value: _this.state.value,
|
||||
onChange: _this.changeDate,
|
||||
open: _this.state.open,
|
||||
format: format,
|
||||
|
|
@ -232,10 +269,13 @@ var FilterType = function (_Component) {
|
|||
})),
|
||||
_react2["default"].createElement(_FilterDropDown2["default"], {
|
||||
locale: locale,
|
||||
onSelectDropdown: onSelectDropdown,
|
||||
onClickClear: _this.clearDateValue,
|
||||
dataIndex: dataIndex,
|
||||
dataText: _this.state.value,
|
||||
onSelectDropdown: _this.onSelectDropdown,
|
||||
onClickClear: _this.clearFilter,
|
||||
isShowCondition: filterDropdown,
|
||||
isShowClear: _this.state.dateValue
|
||||
isShowClear: _this.state.value,
|
||||
filterDropdownType: filterDropdownType
|
||||
})
|
||||
);
|
||||
case 'daterange':
|
||||
|
|
@ -243,10 +283,11 @@ var FilterType = function (_Component) {
|
|||
'div',
|
||||
{ className: clsPrefix + ' filter-wrap' },
|
||||
_react2["default"].createElement(RangePicker, _extends({}, _this.props, {
|
||||
value: _this.state.dateValue,
|
||||
value: _this.state.value,
|
||||
onChange: _this.changeDate,
|
||||
open: _this.state.open,
|
||||
format: format,
|
||||
showTime: true,
|
||||
locale: _zh_CN2["default"],
|
||||
placeholder: '开始 ~ 结束',
|
||||
dateInputPlaceholder: ['开始', '结束'],
|
||||
|
|
@ -254,10 +295,12 @@ var FilterType = function (_Component) {
|
|||
})),
|
||||
_react2["default"].createElement(_FilterDropDown2["default"], {
|
||||
locale: locale,
|
||||
onSelectDropdown: onSelectDropdown,
|
||||
onClickClear: _this.clearDateValue,
|
||||
dataIndex: dataIndex,
|
||||
dataText: _this.state.value,
|
||||
onSelectDropdown: _this.onSelectDropdown,
|
||||
onClickClear: _this.clearFilter,
|
||||
isShowCondition: filterDropdown,
|
||||
isShowClear: _this.state.dateValue
|
||||
isShowClear: _this.state.value
|
||||
})
|
||||
);
|
||||
case 'bool':
|
||||
|
|
@ -278,23 +321,54 @@ var FilterType = function (_Component) {
|
|||
};
|
||||
|
||||
_this.state = {
|
||||
value: "",
|
||||
text: "",
|
||||
selectValue: "",
|
||||
dateValue: "",
|
||||
open: false,
|
||||
condition: props.filterDropdownType == 'string' ? 'LIKE' : 'EQ',
|
||||
number: 0
|
||||
};
|
||||
return _this;
|
||||
}
|
||||
//清除文本
|
||||
|
||||
//设置数值
|
||||
/**
|
||||
* 清除过滤条件
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 设置输入文本的值
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 输入框回车执行回调
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* 更改修改值
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* 下拉条件的回调
|
||||
*
|
||||
* @param {*} key 字段
|
||||
* @param {*} value 值1,2,3...6
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 修改数值型的值
|
||||
*
|
||||
*/
|
||||
|
||||
//清除数值
|
||||
|
||||
//设置文本
|
||||
|
||||
//回车执行函数
|
||||
|
||||
//失去焦点后执行函数
|
||||
|
||||
|
|
|
|||
|
|
@ -611,3 +611,9 @@
|
|||
height: 100%;
|
||||
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; }
|
||||
|
|
|
|||
|
|
@ -364,8 +364,8 @@ var Table = function (_Component) {
|
|||
Table.prototype.getHeader = function getHeader(columns, fixed) {
|
||||
var _props = this.props,
|
||||
filterDelay = _props.filterDelay,
|
||||
onFilterRowsDropChange = _props.onFilterRowsDropChange,
|
||||
onFilterRowsChange = _props.onFilterRowsChange,
|
||||
onFilterChange = _props.onFilterChange,
|
||||
onFilterClear = _props.onFilterClear,
|
||||
filterable = _props.filterable,
|
||||
showHeader = _props.showHeader,
|
||||
expandIconAsCell = _props.expandIconAsCell,
|
||||
|
|
@ -417,9 +417,9 @@ var Table = function (_Component) {
|
|||
rowStyle: trStyle,
|
||||
fixed: fixed,
|
||||
filterable: filterable,
|
||||
onFilterRowsChange: onFilterRowsChange,
|
||||
onFilterRowsDropChange: onFilterRowsDropChange,
|
||||
filterDelay: filterDelay,
|
||||
onFilterChange: onFilterChange //过滤行输入或下拉之后回调
|
||||
, onFilterClear: onFilterClear //过滤行清除后回调
|
||||
, filterDelay: filterDelay,
|
||||
afterDragColWidth: afterDragColWidth,
|
||||
contentDomWidth: this.contentDomWidth,
|
||||
scrollbarWidth: this.scrollbarWidth,
|
||||
|
|
|
|||
|
|
@ -295,19 +295,19 @@ var TableHeader = function (_Component) {
|
|||
}
|
||||
};
|
||||
|
||||
_this.handlerFilterTextChange = function (key, val) {
|
||||
var onFilterRowsChange = _this.props.onFilterRowsChange;
|
||||
_this.handlerFilterChange = function (key, value, condition) {
|
||||
var onFilterChange = _this.props.onFilterChange;
|
||||
|
||||
if (onFilterRowsChange) {
|
||||
onFilterRowsChange(key, val);
|
||||
if (onFilterChange) {
|
||||
onFilterChange(key, value, condition);
|
||||
}
|
||||
};
|
||||
|
||||
_this.handlerFilterDropChange = function (key, val) {
|
||||
var onFilterRowsDropChange = _this.props.onFilterRowsDropChange;
|
||||
_this.handlerFilterClear = function (field) {
|
||||
var onFilterClear = _this.props.onFilterClear;
|
||||
|
||||
if (onFilterRowsDropChange) {
|
||||
onFilterRowsDropChange(key, val.key);
|
||||
if (onFilterClear) {
|
||||
onFilterClear(field);
|
||||
}
|
||||
};
|
||||
|
||||
|
|
@ -322,15 +322,15 @@ var TableHeader = function (_Component) {
|
|||
//文本输入
|
||||
case "text":
|
||||
return _react2["default"].createElement(_FilterType2["default"], {
|
||||
locale: locale,
|
||||
rendertype: type,
|
||||
clsPrefix: clsPrefix,
|
||||
className: clsPrefix + " filter-text",
|
||||
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"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
locale: locale //多语
|
||||
, rendertype: type //渲染类型
|
||||
, clsPrefix: clsPrefix //css前缀
|
||||
, className: clsPrefix + " filter-text",
|
||||
dataIndex: dataIndex //字段
|
||||
, onFilterChange: _this.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"] //是否显示下拉条件
|
||||
, filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
});
|
||||
//数值输入
|
||||
case "number":
|
||||
|
|
@ -339,14 +339,16 @@ 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),
|
||||
filterDropdown: rows[1][index]["filterdropdown"],
|
||||
dataIndex: dataIndex //字段
|
||||
, onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this.handlerFilterChange) //输入框回调并且函数防抖动
|
||||
, onFilterClear: _this.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
});
|
||||
//下拉框选择
|
||||
case "dropdown":
|
||||
var selectDataSource = [];
|
||||
//处理没有输入数据源的时候，系统自动查找自带的数据筛选后注入
|
||||
if (rows.length > 0 && (rows[1][index]["filterdropdownauto"] || "auto") == "auto") {
|
||||
var hash = {};
|
||||
//处理下拉重复对象组装dropdown
|
||||
|
|
@ -361,6 +363,7 @@ var TableHeader = function (_Component) {
|
|||
return item;
|
||||
}, []);
|
||||
} else {
|
||||
//从外部数据源加载系统数据
|
||||
selectDataSource = rows[1][index]["filterdropdowndata"];
|
||||
}
|
||||
return _react2["default"].createElement(_FilterType2["default"], {
|
||||
|
|
@ -368,9 +371,10 @@ var TableHeader = function (_Component) {
|
|||
rendertype: type,
|
||||
className: clsPrefix + " filter-dropdown",
|
||||
data: selectDataSource,
|
||||
onChange: _this.handlerFilterTextChange.bind(_this, dataIndex),
|
||||
onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex),
|
||||
filterDropdown: rows[1][index]["filterdropdown"],
|
||||
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
|
||||
});
|
||||
|
|
@ -382,9 +386,10 @@ var TableHeader = function (_Component) {
|
|||
className: "filter-date",
|
||||
onClick: function onClick() {},
|
||||
format: rows[1][index]["format"] || "YYYY-MM-DD",
|
||||
onChange: _this.handlerFilterTextChange.bind(_this, dataIndex),
|
||||
onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex),
|
||||
filterDropdown: rows[1][index]["filterdropdown"],
|
||||
dataIndex: dataIndex //字段
|
||||
, onFilterChange: _this.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
});
|
||||
//日期范围
|
||||
|
|
@ -395,9 +400,10 @@ var TableHeader = function (_Component) {
|
|||
className: "filter-date",
|
||||
onClick: function onClick() {},
|
||||
format: rows[1][index]["format"] || "YYYY-MM-DD",
|
||||
onChange: _this.handlerFilterTextChange.bind(_this, dataIndex),
|
||||
onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex),
|
||||
filterDropdown: rows[1][index]["filterdropdown"],
|
||||
dataIndex: dataIndex //字段
|
||||
, onFilterChange: _this.handlerFilterChange //输入框回调
|
||||
, onFilterClear: _this.handlerFilterClear //清除回调
|
||||
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||
});
|
||||
default:
|
||||
|
|
@ -458,15 +464,17 @@ var TableHeader = function (_Component) {
|
|||
// }
|
||||
|
||||
/**
|
||||
* @description 过滤输入后的回调函数
|
||||
* 过滤输入后或下拉条件的回调函数
|
||||
*/
|
||||
|
||||
/**
|
||||
* @description 过滤输入后的回调函数
|
||||
*/
|
||||
|
||||
/**
|
||||
* @description 过滤渲染的组件类型
|
||||
* 过滤行清除回调
|
||||
*/
|
||||
|
||||
|
||||
/**
|
||||
* 过滤渲染的组件类型
|
||||
*/
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -85,16 +85,17 @@ const data26 = [
|
|||
];
|
||||
|
||||
class Demo26 extends Component {
|
||||
handlerFilterRowsChange = (key, val) => {
|
||||
console.log('准备构建AJAX请求，接收参数：key=', key, ' value=', val);
|
||||
handlerFilterChange = (key, val, condition) => {
|
||||
console.log('参数：key=', key, ' value=', val, 'condition=', condition);
|
||||
}
|
||||
handlerFilterRowsDropChange = (key, val) => {
|
||||
console.log('过滤条件类型:', key, val);
|
||||
|
||||
handlerFilterClear = (key) => {
|
||||
console.log('清除条件', key);
|
||||
}
|
||||
render() {
|
||||
return <Table
|
||||
onFilterRowsDropChange={this.handlerFilterRowsDropChange}//下拉条件的回调(key,val)=>()
|
||||
onFilterRowsChange={this.handlerFilterRowsChange}//触发输入操作以及其他的回调(key,val)=>()
|
||||
onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()
|
||||
onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()
|
||||
filterDelay={500}//输入文本多少ms触发回调函数，默认300ms
|
||||
filterable={true}//是否开启过滤数据功能
|
||||
bordered
|
||||
|
|
|
|||
|
|
@ -106,12 +106,12 @@ class Demo27 extends Component {
|
|||
dropdownvalue: []
|
||||
}
|
||||
}
|
||||
handlerFilterRowsChange = (key, val) => {
|
||||
console.log('准备构建AJAX请求，接收参数：key=', key, ' value=', val);
|
||||
handlerFilterChange = (key, val, condition) => {
|
||||
console.log('参数：key=', key, ' value=', val, 'condition=', condition);
|
||||
}
|
||||
|
||||
handlerFilterRowsDropChange = (key, val) => {
|
||||
console.log('过滤条件类型:', key, val);
|
||||
handlerFilterClear = (key) => {
|
||||
console.log('清除条件', key);
|
||||
}
|
||||
getSelectedDataFunc = data => {
|
||||
console.log(data);
|
||||
|
|
@ -158,49 +158,47 @@ class Demo27 extends Component {
|
|||
filterDropdown: "show",//显示条件
|
||||
filterDropdownType: "string"//字符条件
|
||||
},
|
||||
{
|
||||
title: "区间",
|
||||
width: 200,
|
||||
dataIndex: "mark",
|
||||
key: "mark",
|
||||
filterType: "number",//输入框类型
|
||||
filterDropdownType: "number"//数值类条件
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
width: 180,
|
||||
sorter: (a, b) => a.age - b.age,
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
filterType: "dropdown",
|
||||
filterDropdown: "hide",//不显示条件
|
||||
filterDropdownAuto: "manual",//切换手动传入模式
|
||||
filterDropdownData: this.state.dropdownvalue,
|
||||
filterDropdownFocus: () => {
|
||||
this.setState({
|
||||
dropdownvalue: [{ key: "自定义数据1", value: "1" }, { key: "自定义数据2", value: "2" }]
|
||||
});
|
||||
}
|
||||
filterType: "number",//输入框类型
|
||||
filterDropdown: "show",//显示条件
|
||||
filterDropdownType: "number"//字符条件
|
||||
},
|
||||
{
|
||||
title: "居住地址",
|
||||
width: 350,
|
||||
title: "日期",
|
||||
width: 190,
|
||||
dataIndex: "date",
|
||||
key: "date",
|
||||
filterType: "date",//输入框类型
|
||||
filterDropdown: "show",//显示条件
|
||||
filterDropdownType: "string"//字符条件
|
||||
},
|
||||
{
|
||||
title: "时间范围",
|
||||
width: 290,
|
||||
dataIndex: "mark",
|
||||
key: "mark",
|
||||
filterType: "daterange",//输入框类型
|
||||
filterDropdown: "show",//显示条件
|
||||
filterDropdownType: "number"//字符条件
|
||||
},
|
||||
{
|
||||
title: "地址",
|
||||
width: 100,
|
||||
dataIndex: "address",
|
||||
key: "address",
|
||||
filterType: "daterange",
|
||||
filterDropdown: "show"
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
width: 100,
|
||||
key: "other",
|
||||
dataIndex: "other"
|
||||
filterType: "dropdown",//输入框类型
|
||||
filterDropdown: "show",//显示条件
|
||||
filterDropdownType: "number"//字符条件
|
||||
}
|
||||
];
|
||||
return <ComplexTable
|
||||
onFilterRowsDropChange={this.handlerFilterRowsDropChange}//下拉条件的回调(key,val)=>()
|
||||
onFilterRowsChange={this.handlerFilterRowsChange}//触发输入操作以及其他的回调(key,val)=>()
|
||||
filterDelay={500}//输入文本多少ms触发回调函数，默认300ms
|
||||
onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()
|
||||
onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()
|
||||
filterDelay={500}//输入文本多少ms触发回调函数，默认500ms
|
||||
filterable={true}//是否开启过滤数据功能
|
||||
getSelectedDataFunc={this.getSelectedDataFunc}
|
||||
bordered
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -2421,9 +2421,6 @@ i.uf {
|
|||
/*
|
||||
* 选择时删除文本阴影，及设置默认选中颜色
|
||||
*/
|
||||
::-moz-selection {
|
||||
background: rgb(187,222,251);
|
||||
text-shadow: none; }
|
||||
::selection {
|
||||
background: rgb(187,222,251);
|
||||
text-shadow: none; }
|
||||
|
|
@ -5287,7 +5284,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 +5294,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 +6670,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; }
|
||||
|
|
@ -6811,6 +6809,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 +6924,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 +6998,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 +7566,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"; }
|
||||
|
|
@ -8874,6 +8911,12 @@ 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; }
|
||||
|
||||
/* FormGroup */
|
||||
/* Navlayout */
|
||||
/* FormGroup */
|
||||
|
|
|
|||
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
|
|
@ -50,8 +50,8 @@ import 'bee-table/build/Table.css';
|
|||
| haveExpandIcon | 控制是否显示行展开icon.**注：该参数只有在和expandedRowRender同时使用才生效** | Function(record, index):bool | () =>false |
|
||||
| filterable | 是否开启根据条件来过滤数据 | bool | false
|
||||
| filterDelay | 触发过滤输入的时候的ms延迟时间 | number | 300
|
||||
| onFilterRowsChange | 触发过滤输入操作以及其他的回调，回车执行函数或者失去焦点触发回调 | (key,val) => () | () => ()
|
||||
| onFilterRowsDropChange | 过滤下拉条件的回调 | (key,val)=>() | () => ()
|
||||
| onFilterChange | 触发过滤输入操作以及下拉条件的回调 | function | (field,value,condition) => ()
|
||||
| onFilterClear | 清除过滤条件的回调函数，回调参数为清空的字段 | function | (field) => ()
|
||||
| headerScroll | 表头下是否显示滚动条 | bool| false
|
||||
|
||||
|
||||
|
|
@ -72,9 +72,9 @@ import 'bee-table/build/Table.css';
|
|||
|render|cell的render函数有三个参数：这个单元格的文本，这行的记录，这行的索引，它返回一个对象：{children：value，props：{colSpan：1，rowSpan：1}} ==>'children'是这个单元格的文本，props是这个单元格的一些设置，可以设置单元格行/列合并|-|
|
||||
|onCellClick|单击列的单元格时调用|Function(row, event)|-|
|
||||
| order | 设置排序 | string（"descend"、"ascend"） | -|
|
||||
| filterType | 过滤下拉的类型.可选`text`,`dropdown`,`date` | string | text |
|
||||
| filterType | 过滤下拉的类型.可选`text(文本框)`,`dropdown(下拉)`,`date(日期)`,`daterange(日期范围)`,`number(数值)` | string | text |
|
||||
| filterDropdown | 是否显示过滤下拉.可选`show`,`hide` | string | show |
|
||||
| format | 设置日期类的格式 | string | YYYY-MM-DD |
|
||||
| format | 针对过滤下拉设置日期类的格式 | string | YYYY-MM-DD |
|
||||
| filterDropdownAuto | 设置下拉条件是否自动设置选项，`auto`自动根据当前数据生成，`manual`手动传入，可以使用`filterDropdownData`来传入自定义数据 | string | auto |
|
||||
| filterDropdownData | 下拉条件自定义数据，filterDropdownAuto=manual生效，传入格式：[{ key : "自定义", value : "自定义" }] | array | [] |
|
||||
| filterDropdownFocus | 触发点击下拉条件的回调，一般用于异步点击请求数据使用 | function | () => () |
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"name": "bee-table",
|
||||
"version": "1.5.17",
|
||||
"version": "1.5.18",
|
||||
"description": "Table ui component for react",
|
||||
"keywords": [
|
||||
"react",
|
||||
|
|
|
|||
|
|
@ -25,14 +25,16 @@ class FilterDropDown extends Component {
|
|||
*
|
||||
* @param {*} s 选中的selectRecord
|
||||
*/
|
||||
onSelectDropdown = (s) => {
|
||||
let { onSelectDropdown } = this.props;
|
||||
onSelectDropdown = (item) => {
|
||||
let { onSelectDropdown, dataText } = this.props;
|
||||
if (onSelectDropdown) {
|
||||
this.setState({
|
||||
selectValue: [s.key]
|
||||
}, () => {
|
||||
onSelectDropdown(s);
|
||||
});
|
||||
if (dataText != "") {
|
||||
this.setState({
|
||||
selectValue: [item.key]
|
||||
}, () => {
|
||||
onSelectDropdown(item);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -66,24 +68,24 @@ class FilterDropDown extends Component {
|
|||
onSelect={this.onSelectDropdown}
|
||||
selectedKeys={selectValue}
|
||||
>
|
||||
<Item key="2">{locale['include']}</Item>
|
||||
<Item key="6">{locale['exclusive']}</Item>
|
||||
<Item key="1">{locale['equal']}</Item>
|
||||
<Item key="5">{locale['unequal']}</Item>
|
||||
<Item key="7">{locale['begin']}</Item>
|
||||
<Item key="3">{locale['end']}</Item>
|
||||
<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={selectValue}
|
||||
>
|
||||
<Item key="1">{locale['greater_than']}</Item>
|
||||
<Item key="2">{locale['great_than_equal_to']}</Item>
|
||||
<Item key="3">{locale['less_than']}</Item>
|
||||
<Item key="4">{locale['less_than_equal_to']}</Item>
|
||||
<Item key="5">{locale['be_equal_to']}</Item>
|
||||
<Item key="6">{locale['not_equal_to']}</Item>
|
||||
<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>;
|
||||
|
|
@ -94,6 +96,7 @@ class FilterDropDown extends Component {
|
|||
|
||||
return (<div className="filter-btns">
|
||||
{isShowCondition == 'show' && <Dropdown
|
||||
overlayClassName="u-filter-dropdown-menu-wrap"
|
||||
trigger={['click']}
|
||||
overlay={this.getMenu()}
|
||||
animation="slide-up"
|
||||
|
|
|
|||
|
|
@ -14,30 +14,88 @@ const propTypes = {
|
|||
};
|
||||
|
||||
class FilterType extends Component {
|
||||
constructor() {
|
||||
super();
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
value: "",
|
||||
text: "",
|
||||
selectValue: "",
|
||||
dateValue: "",
|
||||
open: false,
|
||||
condition: props.filterDropdownType == 'string' ? 'LIKE' : 'EQ',
|
||||
number: 0
|
||||
}
|
||||
}
|
||||
//清除文本
|
||||
clearText = () => {
|
||||
|
||||
/**
|
||||
* 清除过滤条件
|
||||
*
|
||||
*/
|
||||
clearFilter = () => {
|
||||
let { onFilterClear, dataIndex } = this.props;
|
||||
this.setState({
|
||||
text: ""
|
||||
value: "",//清空值
|
||||
condition: this.props.filterDropdownType == 'string' ? 'LIKE' : 'EQ'//切回默认查询条件
|
||||
}, () => {
|
||||
//调用清除方法参数为当前字段的field
|
||||
onFilterClear && onFilterClear(dataIndex);
|
||||
});
|
||||
let { onChange } = this.props;
|
||||
onChange && onChange("");
|
||||
}
|
||||
//设置数值
|
||||
changeNumber = (number) => {
|
||||
let { onChange } = this.props;
|
||||
onChange && onChange(number);
|
||||
|
||||
/**
|
||||
* 设置输入文本的值
|
||||
*
|
||||
*/
|
||||
changeText = (val) => {
|
||||
this.setState({
|
||||
number
|
||||
value: val
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 输入框回车执行回调
|
||||
*
|
||||
*/
|
||||
changeTextCall = (e) => {
|
||||
let { onFilterChange, dataIndex } = this.props;
|
||||
if (e.keyCode == 13) {
|
||||
onFilterChange(dataIndex, e.target.value, this.state.condition);
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 更改修改值
|
||||
*
|
||||
*/
|
||||
changeValue = () => {
|
||||
this.setState({
|
||||
value: ""
|
||||
});
|
||||
}
|
||||
/**
|
||||
* 下拉条件的回调
|
||||
*
|
||||
* @param {*} key 字段
|
||||
* @param {*} value 值1,2,3...6
|
||||
*/
|
||||
onSelectDropdown = (item) => {
|
||||
let { onFilterChange, dataIndex } = this.props;
|
||||
this.setState({
|
||||
condition: item.key
|
||||
}, () => {
|
||||
onFilterChange && onFilterChange(dataIndex, this.state.value, this.state.condition);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 修改数值型的值
|
||||
*
|
||||
*/
|
||||
changeNumber = (value) => {
|
||||
let { onFilterChange, dataIndex } = this.props;
|
||||
this.setState({
|
||||
value
|
||||
}, () => {
|
||||
onFilterChange(dataIndex, value, this.state.condition);
|
||||
});
|
||||
}
|
||||
//清除数值
|
||||
|
|
@ -45,34 +103,22 @@ class FilterType extends Component {
|
|||
let { onChange } = this.props;
|
||||
onChange && onChange("");
|
||||
this.setState({
|
||||
number: ""
|
||||
value: ""
|
||||
});
|
||||
}
|
||||
//设置文本
|
||||
changeText = (eve) => {
|
||||
this.setState({
|
||||
text: eve
|
||||
});
|
||||
}
|
||||
//回车执行函数
|
||||
changeTextCall = (eve) => {
|
||||
let { onChange } = this.props;
|
||||
if (eve.keyCode == 13) {
|
||||
onChange(eve.target.value);
|
||||
}
|
||||
}
|
||||
|
||||
//失去焦点后执行函数
|
||||
changeTextCallBlur = (val) => {
|
||||
let { onChange } = this.props;
|
||||
onChange && onChange(val);
|
||||
}
|
||||
//设置下拉值
|
||||
changeSelect = (val) => {
|
||||
let { onChange } = this.props;
|
||||
if (onChange) {
|
||||
onChange(val);
|
||||
changeSelect = (value) => {
|
||||
let { onFilterChange, dataIndex } = this.props;
|
||||
if (onFilterChange) {
|
||||
onFilterChange(dataIndex, value, this.state.condition);
|
||||
this.setState({
|
||||
selectValue: val
|
||||
value
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -93,12 +139,12 @@ class FilterType extends Component {
|
|||
});
|
||||
}
|
||||
//设置日期值
|
||||
changeDate = (val) => {
|
||||
let { onChange } = this.props;
|
||||
if (onChange) {
|
||||
onChange(val);
|
||||
changeDate = (value) => {
|
||||
let { onFilterChange, dataIndex } = this.props;
|
||||
if (onFilterChange) {
|
||||
onFilterChange(dataIndex, value, this.state.condition);
|
||||
this.setState({
|
||||
dateValue: val,
|
||||
value,
|
||||
open: false
|
||||
});
|
||||
}
|
||||
|
|
@ -111,23 +157,24 @@ class FilterType extends Component {
|
|||
* @returns
|
||||
*/
|
||||
renderControl = (rendertype) => {
|
||||
let { filterDropdown, filterDropdownType, format, className, onChange, onSelectDropdown, clsPrefix, locale } = this.props;
|
||||
let { dataIndex, filterDropdown, filterDropdownType, format, className, onChange, onSelectDropdown, clsPrefix, locale } = this.props;
|
||||
switch (rendertype) {
|
||||
case 'text':
|
||||
return <div className={`${clsPrefix} filter-wrap`}>
|
||||
<FormControl
|
||||
ref={el => this.text = el}
|
||||
value={this.state.text}
|
||||
value={this.state.value}
|
||||
className={className}
|
||||
onChange={this.changeText}
|
||||
onKeyDown={this.changeTextCall}
|
||||
onBlur={this.changeTextCallBlur}
|
||||
//onBlur={this.changeTextCallBlur}
|
||||
/>
|
||||
<FilterDropDown
|
||||
locale={locale}
|
||||
onSelectDropdown={onSelectDropdown}
|
||||
onClickClear={this.clearText}
|
||||
isShowClear={this.state.text}
|
||||
dataIndex={dataIndex}
|
||||
dataText={this.state.value}
|
||||
onSelectDropdown={this.onSelectDropdown}
|
||||
onClickClear={this.clearFilter}
|
||||
isShowClear={this.state.value}
|
||||
isShowCondition={filterDropdown}
|
||||
filterDropdownType={filterDropdownType}
|
||||
>
|
||||
|
|
@ -137,15 +184,17 @@ class FilterType extends Component {
|
|||
return <div className={`${clsPrefix} filter-wrap`}>
|
||||
<InputNumber
|
||||
className={className}
|
||||
value={this.state.number}
|
||||
value={this.state.value}
|
||||
onChange={this.changeNumber}
|
||||
iconStyle="one"
|
||||
/>
|
||||
<FilterDropDown
|
||||
locale={locale}
|
||||
onSelectDropdown={onSelectDropdown}
|
||||
onClickClear={this.clearNumber}
|
||||
isShowClear={this.state.number}
|
||||
dataIndex={dataIndex}
|
||||
dataText={this.state.value}
|
||||
onSelectDropdown={this.onSelectDropdown}
|
||||
onClickClear={this.clearFilter}
|
||||
isShowClear={this.state.value != 0}
|
||||
isShowCondition={filterDropdown}
|
||||
filterDropdownType={filterDropdownType}
|
||||
>
|
||||
|
|
@ -155,31 +204,37 @@ class FilterType extends Component {
|
|||
return <div className={`${clsPrefix} filter-wrap`}>
|
||||
<Select
|
||||
{...this.props}
|
||||
value={this.state.selectValue}
|
||||
value={this.state.value}
|
||||
onChange={this.changeSelect}
|
||||
/><FilterDropDown
|
||||
locale={locale}
|
||||
onSelectDropdown={onSelectDropdown}
|
||||
onClickClear={this.clearSelectValue}
|
||||
dataIndex={dataIndex}
|
||||
dataText={this.state.value}
|
||||
onSelectDropdown={this.onSelectDropdown}
|
||||
onClickClear={this.clearFilter}
|
||||
isShowCondition={filterDropdown}
|
||||
isShowClear={this.state.selectValue}
|
||||
isShowClear={this.state.value}
|
||||
filterDropdownType={filterDropdownType}
|
||||
>
|
||||
</FilterDropDown></div>
|
||||
case 'date':
|
||||
return <div className={`${clsPrefix} filter-wrap`}>
|
||||
<DatePicker
|
||||
{...this.props}
|
||||
value={this.state.dateValue}
|
||||
value={this.state.value}
|
||||
onChange={this.changeDate}
|
||||
open={this.state.open}
|
||||
format={format}
|
||||
locale={zhCN}
|
||||
/><FilterDropDown
|
||||
locale={locale}
|
||||
onSelectDropdown={onSelectDropdown}
|
||||
onClickClear={this.clearDateValue}
|
||||
dataIndex={dataIndex}
|
||||
dataText={this.state.value}
|
||||
onSelectDropdown={this.onSelectDropdown}
|
||||
onClickClear={this.clearFilter}
|
||||
isShowCondition={filterDropdown}
|
||||
isShowClear={this.state.dateValue}
|
||||
isShowClear={this.state.value}
|
||||
filterDropdownType={filterDropdownType}
|
||||
>
|
||||
</FilterDropDown>
|
||||
</div>
|
||||
|
|
@ -187,20 +242,23 @@ class FilterType extends Component {
|
|||
return <div className={`${clsPrefix} filter-wrap`}>
|
||||
<RangePicker
|
||||
{...this.props}
|
||||
value={this.state.dateValue}
|
||||
value={this.state.value}
|
||||
onChange={this.changeDate}
|
||||
open={this.state.open}
|
||||
format={format}
|
||||
showTime={true}
|
||||
locale={zhCN}
|
||||
placeholder={'开始 ~ 结束'}
|
||||
dateInputPlaceholder={['开始', '结束']}
|
||||
showClear={true}
|
||||
/><FilterDropDown
|
||||
locale={locale}
|
||||
onSelectDropdown={onSelectDropdown}
|
||||
onClickClear={this.clearDateValue}
|
||||
dataIndex={dataIndex}
|
||||
dataText={this.state.value}
|
||||
onSelectDropdown={this.onSelectDropdown}
|
||||
onClickClear={this.clearFilter}
|
||||
isShowCondition={filterDropdown}
|
||||
isShowClear={this.state.dateValue}
|
||||
isShowClear={this.state.value}
|
||||
>
|
||||
</FilterDropDown>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -293,7 +293,7 @@ class Table extends Component {
|
|||
}
|
||||
|
||||
getHeader(columns, fixed) {
|
||||
const { filterDelay, onFilterRowsDropChange, onFilterRowsChange, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop, draggable,
|
||||
const { filterDelay, onFilterChange, onFilterClear, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop, draggable,
|
||||
onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered} = this.props;
|
||||
const rows = this.getHeaderRows(columns);
|
||||
if (expandIconAsCell && fixed !== 'right') {
|
||||
|
|
@ -328,8 +328,8 @@ class Table extends Component {
|
|||
rowStyle={trStyle}
|
||||
fixed={fixed}
|
||||
filterable={filterable}
|
||||
onFilterRowsChange={onFilterRowsChange}
|
||||
onFilterRowsDropChange={onFilterRowsDropChange}
|
||||
onFilterChange={onFilterChange}//过滤行输入或下拉之后回调
|
||||
onFilterClear={onFilterClear}//过滤行清除后回调
|
||||
filterDelay={filterDelay}
|
||||
afterDragColWidth = {afterDragColWidth}
|
||||
contentDomWidth={this.contentDomWidth}
|
||||
|
|
|
|||
|
|
@ -693,3 +693,14 @@ $table-move-in-color: $bg-color-base;
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -304,26 +304,29 @@ class TableHeader extends Component {
|
|||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* @description 过滤输入后的回调函数
|
||||
* 过滤输入后或下拉条件的回调函数
|
||||
*/
|
||||
handlerFilterTextChange = (key, val) => {
|
||||
let { onFilterRowsChange } = this.props;
|
||||
if (onFilterRowsChange) {
|
||||
onFilterRowsChange(key, val);
|
||||
handlerFilterChange = (key, value, condition) => {
|
||||
let { onFilterChange } = this.props;
|
||||
if (onFilterChange) {
|
||||
onFilterChange(key, value, condition);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* @description 过滤输入后的回调函数
|
||||
* 过滤行清除回调
|
||||
*/
|
||||
handlerFilterDropChange = (key, val) => {
|
||||
let { onFilterRowsDropChange } = this.props;
|
||||
if (onFilterRowsDropChange) {
|
||||
onFilterRowsDropChange(key, val.key);
|
||||
handlerFilterClear = (field) => {
|
||||
let { onFilterClear } = this.props;
|
||||
if (onFilterClear) {
|
||||
onFilterClear(field);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* @description 过滤渲染的组件类型
|
||||
* 过滤渲染的组件类型
|
||||
*/
|
||||
filterRenderType = (type, dataIndex, index) => {
|
||||
const { clsPrefix, rows, filterDelay, locale } = this.props;
|
||||
|
|
@ -332,24 +335,18 @@ class TableHeader extends Component {
|
|||
case "text":
|
||||
return (
|
||||
<FilterType
|
||||
locale={locale}
|
||||
rendertype={type}
|
||||
clsPrefix={clsPrefix}
|
||||
locale={locale}//多语
|
||||
rendertype={type}//渲染类型
|
||||
clsPrefix={clsPrefix}//css前缀
|
||||
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"]}
|
||||
dataIndex={dataIndex}//字段
|
||||
onFilterChange={this.handlerFilterChange}//输入框回调
|
||||
onFilterClear={this.handlerFilterClear}//清除回调
|
||||
filterDropdown={rows[1][index]["filterdropdown"]}//是否显示下拉条件
|
||||
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
||||
/>
|
||||
);
|
||||
//数值输入
|
||||
//数值输入
|
||||
case "number":
|
||||
return (
|
||||
<FilterType
|
||||
|
|
@ -357,14 +354,9 @@ class TableHeader extends Component {
|
|||
rendertype={type}
|
||||
clsPrefix={clsPrefix}
|
||||
className={`${clsPrefix} filter-text`}
|
||||
onChange={debounce(
|
||||
filterDelay || 300,
|
||||
this.handlerFilterTextChange.bind(this, dataIndex)
|
||||
)}
|
||||
onSelectDropdown={this.handlerFilterDropChange.bind(
|
||||
this,
|
||||
dataIndex
|
||||
)}
|
||||
dataIndex={dataIndex}//字段
|
||||
onFilterChange={debounce(filterDelay || 300, this.handlerFilterChange)}//输入框回调并且函数防抖动
|
||||
onFilterClear={this.handlerFilterClear}//清除回调
|
||||
filterDropdown={rows[1][index]["filterdropdown"]}
|
||||
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
||||
/>
|
||||
|
|
@ -372,10 +364,8 @@ class TableHeader extends Component {
|
|||
//下拉框选择
|
||||
case "dropdown":
|
||||
let selectDataSource = [];
|
||||
if (
|
||||
rows.length > 0 &&
|
||||
(rows[1][index]["filterdropdownauto"] || "auto") == "auto"
|
||||
) {
|
||||
//处理没有输入数据源的时候，系统自动查找自带的数据筛选后注入
|
||||
if (rows.length > 0 && (rows[1][index]["filterdropdownauto"] || "auto") == "auto") {
|
||||
let hash = {};
|
||||
//处理下拉重复对象组装dropdown
|
||||
selectDataSource = Array.from(rows[1][0].datasource, x => ({
|
||||
|
|
@ -387,6 +377,7 @@ class TableHeader extends Component {
|
|||
return item;
|
||||
}, []);
|
||||
} else {
|
||||
//从外部数据源加载系统数据
|
||||
selectDataSource = rows[1][index]["filterdropdowndata"];
|
||||
}
|
||||
return (
|
||||
|
|
@ -395,11 +386,9 @@ class TableHeader extends Component {
|
|||
rendertype={type}
|
||||
className={`${clsPrefix} filter-dropdown`}
|
||||
data={selectDataSource}
|
||||
onChange={this.handlerFilterTextChange.bind(this, dataIndex)}
|
||||
onSelectDropdown={this.handlerFilterDropChange.bind(
|
||||
this,
|
||||
dataIndex
|
||||
)}
|
||||
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
|
||||
|
|
@ -412,13 +401,11 @@ class TableHeader extends Component {
|
|||
locale={locale}
|
||||
rendertype={type}
|
||||
className={`filter-date`}
|
||||
onClick={() => {}}
|
||||
onClick={() => { }}
|
||||
format={rows[1][index]["format"] || "YYYY-MM-DD"}
|
||||
onChange={this.handlerFilterTextChange.bind(this, dataIndex)}
|
||||
onSelectDropdown={this.handlerFilterDropChange.bind(
|
||||
this,
|
||||
dataIndex
|
||||
)}
|
||||
dataIndex={dataIndex}//字段
|
||||
onFilterChange={this.handlerFilterChange}//输入框回调
|
||||
onFilterClear={this.handlerFilterClear}//清除回调
|
||||
filterDropdown={rows[1][index]["filterdropdown"]}
|
||||
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
||||
/>
|
||||
|
|
@ -430,13 +417,11 @@ class TableHeader extends Component {
|
|||
locale={locale}
|
||||
rendertype={type}
|
||||
className={`filter-date`}
|
||||
onClick={() => {}}
|
||||
onClick={() => { }}
|
||||
format={rows[1][index]["format"] || "YYYY-MM-DD"}
|
||||
onChange={this.handlerFilterTextChange.bind(this, dataIndex)}
|
||||
onSelectDropdown={this.handlerFilterDropChange.bind(
|
||||
this,
|
||||
dataIndex
|
||||
)}
|
||||
dataIndex={dataIndex}//字段
|
||||
onFilterChange={this.handlerFilterChange}//输入框回调
|
||||
onFilterClear={this.handlerFilterClear}//清除回调
|
||||
filterDropdown={rows[1][index]["filterdropdown"]}
|
||||
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
||||
/>
|
||||
|
|
|
|||
Loading…
Reference in New Issue