feat:重构过滤行代码，整合回调参数集合。
This commit is contained in:
kvkens
parent
ebd0111c36
commit
e8eb6723d5
|
|
@ -103,8 +103,9 @@ class Demo extends Component {
|
||||||
| haveExpandIcon | 控制是否显示行展开icon.**注：该参数只有在和expandedRowRender同时使用才生效** | Function(record, index):bool | () =>false |
|
| haveExpandIcon | 控制是否显示行展开icon.**注：该参数只有在和expandedRowRender同时使用才生效** | Function(record, index):bool | () =>false |
|
||||||
| filterable | 是否开启根据条件来过滤数据 | bool | false
|
| filterable | 是否开启根据条件来过滤数据 | bool | false
|
||||||
| filterDelay | 触发过滤输入的时候的ms延迟时间 | number | 300
|
| filterDelay | 触发过滤输入的时候的ms延迟时间 | number | 300
|
||||||
| onFilterRowsChange | 触发过滤输入操作以及其他的回调，回车执行函数或者失去焦点触发回调 | (key,val) => () | () => ()
|
| onFilterChange | 触发过滤输入操作以及下拉条件的回调 | function | (field,value,condition) => ()
|
||||||
| onFilterRowsDropChange | 过滤下拉条件的回调 | (key,val)=>() | () => ()
|
| onFilterClear | 清除过滤条件的回调函数，回调参数为清空的字段 | function | (field) => ()
|
||||||
|
| headerScroll | 表头下是否显示滚动条 | bool| false
|
||||||
|
|
||||||
|
|
||||||
*注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*
|
*注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*
|
||||||
|
|
@ -125,7 +126,7 @@ class Demo extends Component {
|
||||||
|onCellClick|单击列的单元格时调用|Function(row, event)|-|
|
|onCellClick|单击列的单元格时调用|Function(row, event)|-|
|
||||||
|onHeadCellClick|单击表头的单元格时调用|Function(row, event)|row 当前行的数据|
|
|onHeadCellClick|单击表头的单元格时调用|Function(row, event)|row 当前行的数据|
|
||||||
| order | 设置排序 | string（"descend"、"ascend"） | - |
|
| order | 设置排序 | string（"descend"、"ascend"） | - |
|
||||||
| filterType | 过滤下拉的类型.可选`text`,`dropdown`,`date` | string | text |
|
| filterType | 过滤下拉的类型.可选`text(文本框)`,`dropdown(下拉)`,`date(日期)`,`daterange(日期范围)`,`number(数值)` | string | text |
|
||||||
| filterDropdown | 是否显示过滤下拉.可选`show`,`hide` | string | show |
|
| filterDropdown | 是否显示过滤下拉.可选`show`,`hide` | string | show |
|
||||||
| format | 针对过滤下拉设置日期类的格式 | string | YYYY-MM-DD |
|
| format | 针对过滤下拉设置日期类的格式 | string | YYYY-MM-DD |
|
||||||
| filterDropdownAuto | 设置下拉条件是否自动设置选项，`auto`自动根据当前数据生成，`manual`手动传入，可以使用`filterDropdownData`来传入自定义数据 | string | auto |
|
| filterDropdownAuto | 设置下拉条件是否自动设置选项，`auto`自动根据当前数据生成，`manual`手动传入，可以使用`filterDropdownData`来传入自定义数据 | string | auto |
|
||||||
|
|
|
||||||
|
|
@ -56,15 +56,19 @@ var FilterDropDown = function (_Component) {
|
||||||
|
|
||||||
var _this = _possibleConstructorReturn(this, _Component.call(this));
|
var _this = _possibleConstructorReturn(this, _Component.call(this));
|
||||||
|
|
||||||
_this.onSelectDropdown = function (s) {
|
_this.onSelectDropdown = function (item) {
|
||||||
var onSelectDropdown = _this.props.onSelectDropdown;
|
var _this$props = _this.props,
|
||||||
|
onSelectDropdown = _this$props.onSelectDropdown,
|
||||||
|
dataText = _this$props.dataText;
|
||||||
|
|
||||||
if (onSelectDropdown) {
|
if (onSelectDropdown) {
|
||||||
_this.setState({
|
if (dataText != "") {
|
||||||
selectValue: [s.key]
|
_this.setState({
|
||||||
}, function () {
|
selectValue: [item.key]
|
||||||
onSelectDropdown(s);
|
}, function () {
|
||||||
});
|
onSelectDropdown(item);
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -97,32 +101,32 @@ var FilterDropDown = function (_Component) {
|
||||||
},
|
},
|
||||||
_react2["default"].createElement(
|
_react2["default"].createElement(
|
||||||
Item,
|
Item,
|
||||||
{ key: '2' },
|
{ key: 'LIKE' },
|
||||||
locale['include']
|
locale['include']
|
||||||
),
|
),
|
||||||
_react2["default"].createElement(
|
_react2["default"].createElement(
|
||||||
Item,
|
Item,
|
||||||
{ key: '6' },
|
{ key: 'ULIKE' },
|
||||||
locale['exclusive']
|
locale['exclusive']
|
||||||
),
|
),
|
||||||
_react2["default"].createElement(
|
_react2["default"].createElement(
|
||||||
Item,
|
Item,
|
||||||
{ key: '1' },
|
{ key: 'EQ' },
|
||||||
locale['equal']
|
locale['equal']
|
||||||
),
|
),
|
||||||
_react2["default"].createElement(
|
_react2["default"].createElement(
|
||||||
Item,
|
Item,
|
||||||
{ key: '5' },
|
{ key: 'UEQ' },
|
||||||
locale['unequal']
|
locale['unequal']
|
||||||
),
|
),
|
||||||
_react2["default"].createElement(
|
_react2["default"].createElement(
|
||||||
Item,
|
Item,
|
||||||
{ key: '7' },
|
{ key: 'START' },
|
||||||
locale['begin']
|
locale['begin']
|
||||||
),
|
),
|
||||||
_react2["default"].createElement(
|
_react2["default"].createElement(
|
||||||
Item,
|
Item,
|
||||||
{ key: '3' },
|
{ key: 'END' },
|
||||||
locale['end']
|
locale['end']
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
@ -135,32 +139,32 @@ var FilterDropDown = function (_Component) {
|
||||||
},
|
},
|
||||||
_react2["default"].createElement(
|
_react2["default"].createElement(
|
||||||
Item,
|
Item,
|
||||||
{ key: '1' },
|
{ key: 'GT' },
|
||||||
locale['greater_than']
|
locale['greater_than']
|
||||||
),
|
),
|
||||||
_react2["default"].createElement(
|
_react2["default"].createElement(
|
||||||
Item,
|
Item,
|
||||||
{ key: '2' },
|
{ key: 'GTEQ' },
|
||||||
locale['great_than_equal_to']
|
locale['great_than_equal_to']
|
||||||
),
|
),
|
||||||
_react2["default"].createElement(
|
_react2["default"].createElement(
|
||||||
Item,
|
Item,
|
||||||
{ key: '3' },
|
{ key: 'LT' },
|
||||||
locale['less_than']
|
locale['less_than']
|
||||||
),
|
),
|
||||||
_react2["default"].createElement(
|
_react2["default"].createElement(
|
||||||
Item,
|
Item,
|
||||||
{ key: '4' },
|
{ key: 'LTEQ' },
|
||||||
locale['less_than_equal_to']
|
locale['less_than_equal_to']
|
||||||
),
|
),
|
||||||
_react2["default"].createElement(
|
_react2["default"].createElement(
|
||||||
Item,
|
Item,
|
||||||
{ key: '5' },
|
{ key: 'EQ' },
|
||||||
locale['be_equal_to']
|
locale['be_equal_to']
|
||||||
),
|
),
|
||||||
_react2["default"].createElement(
|
_react2["default"].createElement(
|
||||||
Item,
|
Item,
|
||||||
{ key: '6' },
|
{ key: 'UEQ' },
|
||||||
locale['not_equal_to']
|
locale['not_equal_to']
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
@ -204,6 +208,7 @@ var FilterDropDown = function (_Component) {
|
||||||
isShowCondition == 'show' && _react2["default"].createElement(
|
isShowCondition == 'show' && _react2["default"].createElement(
|
||||||
_beeDropdown2["default"],
|
_beeDropdown2["default"],
|
||||||
{
|
{
|
||||||
|
overlayClassName: 'u-filter-dropdown-menu-wrap',
|
||||||
trigger: ['click'],
|
trigger: ['click'],
|
||||||
overlay: this.getMenu(),
|
overlay: this.getMenu(),
|
||||||
animation: 'slide-up'
|
animation: 'slide-up'
|
||||||
|
|
|
||||||
|
|
@ -58,26 +58,68 @@ var propTypes = {
|
||||||
var FilterType = function (_Component) {
|
var FilterType = function (_Component) {
|
||||||
_inherits(FilterType, _Component);
|
_inherits(FilterType, _Component);
|
||||||
|
|
||||||
function FilterType() {
|
function FilterType(props) {
|
||||||
_classCallCheck(this, FilterType);
|
_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({
|
_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) {
|
_this.changeText = function (val) {
|
||||||
var onChange = _this.props.onChange;
|
|
||||||
|
|
||||||
onChange && onChange(number);
|
|
||||||
_this.setState({
|
_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("");
|
onChange && onChange("");
|
||||||
_this.setState({
|
_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) {
|
_this.changeTextCallBlur = function (val) {
|
||||||
var onChange = _this.props.onChange;
|
var onChange = _this.props.onChange;
|
||||||
|
|
||||||
onChange && onChange(val);
|
onChange && onChange(val);
|
||||||
};
|
};
|
||||||
|
|
||||||
_this.changeSelect = function (val) {
|
_this.changeSelect = function (value) {
|
||||||
var onChange = _this.props.onChange;
|
var _this$props5 = _this.props,
|
||||||
|
onFilterChange = _this$props5.onFilterChange,
|
||||||
|
dataIndex = _this$props5.dataIndex;
|
||||||
|
|
||||||
if (onChange) {
|
if (onFilterChange) {
|
||||||
onChange(val);
|
onFilterChange(dataIndex, value, _this.state.condition);
|
||||||
_this.setState({
|
_this.setState({
|
||||||
selectValue: val
|
value: value
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
@ -137,28 +167,31 @@ var FilterType = function (_Component) {
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
_this.changeDate = function (val) {
|
_this.changeDate = function (value) {
|
||||||
var onChange = _this.props.onChange;
|
var _this$props6 = _this.props,
|
||||||
|
onFilterChange = _this$props6.onFilterChange,
|
||||||
|
dataIndex = _this$props6.dataIndex;
|
||||||
|
|
||||||
if (onChange) {
|
if (onFilterChange) {
|
||||||
onChange(val);
|
onFilterChange(dataIndex, value, _this.state.condition);
|
||||||
_this.setState({
|
_this.setState({
|
||||||
dateValue: val,
|
value: value,
|
||||||
open: false
|
open: false
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
_this.renderControl = function (rendertype) {
|
_this.renderControl = function (rendertype) {
|
||||||
var _this$props = _this.props,
|
var _this$props7 = _this.props,
|
||||||
filterDropdown = _this$props.filterDropdown,
|
dataIndex = _this$props7.dataIndex,
|
||||||
filterDropdownType = _this$props.filterDropdownType,
|
filterDropdown = _this$props7.filterDropdown,
|
||||||
format = _this$props.format,
|
filterDropdownType = _this$props7.filterDropdownType,
|
||||||
className = _this$props.className,
|
format = _this$props7.format,
|
||||||
onChange = _this$props.onChange,
|
className = _this$props7.className,
|
||||||
onSelectDropdown = _this$props.onSelectDropdown,
|
onChange = _this$props7.onChange,
|
||||||
clsPrefix = _this$props.clsPrefix,
|
onSelectDropdown = _this$props7.onSelectDropdown,
|
||||||
locale = _this$props.locale;
|
clsPrefix = _this$props7.clsPrefix,
|
||||||
|
locale = _this$props7.locale;
|
||||||
|
|
||||||
switch (rendertype) {
|
switch (rendertype) {
|
||||||
case 'text':
|
case 'text':
|
||||||
|
|
@ -166,20 +199,19 @@ var FilterType = function (_Component) {
|
||||||
'div',
|
'div',
|
||||||
{ className: clsPrefix + ' filter-wrap' },
|
{ className: clsPrefix + ' filter-wrap' },
|
||||||
_react2["default"].createElement(_beeFormControl2["default"], {
|
_react2["default"].createElement(_beeFormControl2["default"], {
|
||||||
ref: function ref(el) {
|
value: _this.state.value,
|
||||||
return _this.text = el;
|
|
||||||
},
|
|
||||||
value: _this.state.text,
|
|
||||||
className: className,
|
className: className,
|
||||||
onChange: _this.changeText,
|
onChange: _this.changeText,
|
||||||
onKeyDown: _this.changeTextCall,
|
onKeyDown: _this.changeTextCall
|
||||||
onBlur: _this.changeTextCallBlur
|
//onBlur={this.changeTextCallBlur}
|
||||||
}),
|
}),
|
||||||
_react2["default"].createElement(_FilterDropDown2["default"], {
|
_react2["default"].createElement(_FilterDropDown2["default"], {
|
||||||
locale: locale,
|
locale: locale,
|
||||||
onSelectDropdown: onSelectDropdown,
|
dataIndex: dataIndex,
|
||||||
onClickClear: _this.clearText,
|
dataText: _this.state.value,
|
||||||
isShowClear: _this.state.text,
|
onSelectDropdown: _this.onSelectDropdown,
|
||||||
|
onClickClear: _this.clearFilter,
|
||||||
|
isShowClear: _this.state.value,
|
||||||
isShowCondition: filterDropdown,
|
isShowCondition: filterDropdown,
|
||||||
filterDropdownType: filterDropdownType
|
filterDropdownType: filterDropdownType
|
||||||
})
|
})
|
||||||
|
|
@ -190,15 +222,17 @@ var FilterType = function (_Component) {
|
||||||
{ className: clsPrefix + ' filter-wrap' },
|
{ className: clsPrefix + ' filter-wrap' },
|
||||||
_react2["default"].createElement(_beeInputNumber2["default"], {
|
_react2["default"].createElement(_beeInputNumber2["default"], {
|
||||||
className: className,
|
className: className,
|
||||||
value: _this.state.number,
|
value: _this.state.value,
|
||||||
onChange: _this.changeNumber,
|
onChange: _this.changeNumber,
|
||||||
iconStyle: 'one'
|
iconStyle: 'one'
|
||||||
}),
|
}),
|
||||||
_react2["default"].createElement(_FilterDropDown2["default"], {
|
_react2["default"].createElement(_FilterDropDown2["default"], {
|
||||||
locale: locale,
|
locale: locale,
|
||||||
onSelectDropdown: onSelectDropdown,
|
dataIndex: dataIndex,
|
||||||
onClickClear: _this.clearNumber,
|
dataText: _this.state.value,
|
||||||
isShowClear: _this.state.number,
|
onSelectDropdown: _this.onSelectDropdown,
|
||||||
|
onClickClear: _this.clearFilter,
|
||||||
|
isShowClear: _this.state.value != 0,
|
||||||
isShowCondition: filterDropdown,
|
isShowCondition: filterDropdown,
|
||||||
filterDropdownType: filterDropdownType
|
filterDropdownType: filterDropdownType
|
||||||
})
|
})
|
||||||
|
|
@ -208,15 +242,18 @@ var FilterType = function (_Component) {
|
||||||
'div',
|
'div',
|
||||||
{ className: clsPrefix + ' filter-wrap' },
|
{ className: clsPrefix + ' filter-wrap' },
|
||||||
_react2["default"].createElement(_beeSelect2["default"], _extends({}, _this.props, {
|
_react2["default"].createElement(_beeSelect2["default"], _extends({}, _this.props, {
|
||||||
value: _this.state.selectValue,
|
value: _this.state.value,
|
||||||
onChange: _this.changeSelect
|
onChange: _this.changeSelect
|
||||||
})),
|
})),
|
||||||
_react2["default"].createElement(_FilterDropDown2["default"], {
|
_react2["default"].createElement(_FilterDropDown2["default"], {
|
||||||
locale: locale,
|
locale: locale,
|
||||||
onSelectDropdown: onSelectDropdown,
|
dataIndex: dataIndex,
|
||||||
onClickClear: _this.clearSelectValue,
|
dataText: _this.state.value,
|
||||||
|
onSelectDropdown: _this.onSelectDropdown,
|
||||||
|
onClickClear: _this.clearFilter,
|
||||||
isShowCondition: filterDropdown,
|
isShowCondition: filterDropdown,
|
||||||
isShowClear: _this.state.selectValue
|
isShowClear: _this.state.value,
|
||||||
|
filterDropdownType: filterDropdownType
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
case 'date':
|
case 'date':
|
||||||
|
|
@ -224,7 +261,7 @@ var FilterType = function (_Component) {
|
||||||
'div',
|
'div',
|
||||||
{ className: clsPrefix + ' filter-wrap' },
|
{ className: clsPrefix + ' filter-wrap' },
|
||||||
_react2["default"].createElement(_beeDatepicker2["default"], _extends({}, _this.props, {
|
_react2["default"].createElement(_beeDatepicker2["default"], _extends({}, _this.props, {
|
||||||
value: _this.state.dateValue,
|
value: _this.state.value,
|
||||||
onChange: _this.changeDate,
|
onChange: _this.changeDate,
|
||||||
open: _this.state.open,
|
open: _this.state.open,
|
||||||
format: format,
|
format: format,
|
||||||
|
|
@ -232,10 +269,13 @@ var FilterType = function (_Component) {
|
||||||
})),
|
})),
|
||||||
_react2["default"].createElement(_FilterDropDown2["default"], {
|
_react2["default"].createElement(_FilterDropDown2["default"], {
|
||||||
locale: locale,
|
locale: locale,
|
||||||
onSelectDropdown: onSelectDropdown,
|
dataIndex: dataIndex,
|
||||||
onClickClear: _this.clearDateValue,
|
dataText: _this.state.value,
|
||||||
|
onSelectDropdown: _this.onSelectDropdown,
|
||||||
|
onClickClear: _this.clearFilter,
|
||||||
isShowCondition: filterDropdown,
|
isShowCondition: filterDropdown,
|
||||||
isShowClear: _this.state.dateValue
|
isShowClear: _this.state.value,
|
||||||
|
filterDropdownType: filterDropdownType
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
case 'daterange':
|
case 'daterange':
|
||||||
|
|
@ -243,10 +283,11 @@ var FilterType = function (_Component) {
|
||||||
'div',
|
'div',
|
||||||
{ className: clsPrefix + ' filter-wrap' },
|
{ className: clsPrefix + ' filter-wrap' },
|
||||||
_react2["default"].createElement(RangePicker, _extends({}, _this.props, {
|
_react2["default"].createElement(RangePicker, _extends({}, _this.props, {
|
||||||
value: _this.state.dateValue,
|
value: _this.state.value,
|
||||||
onChange: _this.changeDate,
|
onChange: _this.changeDate,
|
||||||
open: _this.state.open,
|
open: _this.state.open,
|
||||||
format: format,
|
format: format,
|
||||||
|
showTime: true,
|
||||||
locale: _zh_CN2["default"],
|
locale: _zh_CN2["default"],
|
||||||
placeholder: '开始 ~ 结束',
|
placeholder: '开始 ~ 结束',
|
||||||
dateInputPlaceholder: ['开始', '结束'],
|
dateInputPlaceholder: ['开始', '结束'],
|
||||||
|
|
@ -254,10 +295,12 @@ var FilterType = function (_Component) {
|
||||||
})),
|
})),
|
||||||
_react2["default"].createElement(_FilterDropDown2["default"], {
|
_react2["default"].createElement(_FilterDropDown2["default"], {
|
||||||
locale: locale,
|
locale: locale,
|
||||||
onSelectDropdown: onSelectDropdown,
|
dataIndex: dataIndex,
|
||||||
onClickClear: _this.clearDateValue,
|
dataText: _this.state.value,
|
||||||
|
onSelectDropdown: _this.onSelectDropdown,
|
||||||
|
onClickClear: _this.clearFilter,
|
||||||
isShowCondition: filterDropdown,
|
isShowCondition: filterDropdown,
|
||||||
isShowClear: _this.state.dateValue
|
isShowClear: _this.state.value
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
case 'bool':
|
case 'bool':
|
||||||
|
|
@ -278,23 +321,54 @@ var FilterType = function (_Component) {
|
||||||
};
|
};
|
||||||
|
|
||||||
_this.state = {
|
_this.state = {
|
||||||
|
value: "",
|
||||||
text: "",
|
text: "",
|
||||||
selectValue: "",
|
selectValue: "",
|
||||||
dateValue: "",
|
dateValue: "",
|
||||||
open: false,
|
open: false,
|
||||||
|
condition: props.filterDropdownType == 'string' ? 'LIKE' : 'EQ',
|
||||||
number: 0
|
number: 0
|
||||||
};
|
};
|
||||||
return _this;
|
return _this;
|
||||||
}
|
}
|
||||||
//清除文本
|
|
||||||
|
|
||||||
//设置数值
|
/**
|
||||||
|
* 清除过滤条件
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 设置输入文本的值
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 输入框回车执行回调
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 更改修改值
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 下拉条件的回调
|
||||||
|
*
|
||||||
|
* @param {*} key 字段
|
||||||
|
* @param {*} value 值1,2,3...6
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 修改数值型的值
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
//清除数值
|
//清除数值
|
||||||
|
|
||||||
//设置文本
|
|
||||||
|
|
||||||
//回车执行函数
|
|
||||||
|
|
||||||
//失去焦点后执行函数
|
//失去焦点后执行函数
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -611,3 +611,9 @@
|
||||||
height: 100%;
|
height: 100%;
|
||||||
top: 0px;
|
top: 0px;
|
||||||
left: 3px; }
|
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) {
|
Table.prototype.getHeader = function getHeader(columns, fixed) {
|
||||||
var _props = this.props,
|
var _props = this.props,
|
||||||
filterDelay = _props.filterDelay,
|
filterDelay = _props.filterDelay,
|
||||||
onFilterRowsDropChange = _props.onFilterRowsDropChange,
|
onFilterChange = _props.onFilterChange,
|
||||||
onFilterRowsChange = _props.onFilterRowsChange,
|
onFilterClear = _props.onFilterClear,
|
||||||
filterable = _props.filterable,
|
filterable = _props.filterable,
|
||||||
showHeader = _props.showHeader,
|
showHeader = _props.showHeader,
|
||||||
expandIconAsCell = _props.expandIconAsCell,
|
expandIconAsCell = _props.expandIconAsCell,
|
||||||
|
|
@ -417,9 +417,9 @@ var Table = function (_Component) {
|
||||||
rowStyle: trStyle,
|
rowStyle: trStyle,
|
||||||
fixed: fixed,
|
fixed: fixed,
|
||||||
filterable: filterable,
|
filterable: filterable,
|
||||||
onFilterRowsChange: onFilterRowsChange,
|
onFilterChange: onFilterChange //过滤行输入或下拉之后回调
|
||||||
onFilterRowsDropChange: onFilterRowsDropChange,
|
, onFilterClear: onFilterClear //过滤行清除后回调
|
||||||
filterDelay: filterDelay,
|
, filterDelay: filterDelay,
|
||||||
afterDragColWidth: afterDragColWidth,
|
afterDragColWidth: afterDragColWidth,
|
||||||
contentDomWidth: this.contentDomWidth,
|
contentDomWidth: this.contentDomWidth,
|
||||||
scrollbarWidth: this.scrollbarWidth,
|
scrollbarWidth: this.scrollbarWidth,
|
||||||
|
|
|
||||||
|
|
@ -295,19 +295,19 @@ var TableHeader = function (_Component) {
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
_this.handlerFilterTextChange = function (key, val) {
|
_this.handlerFilterChange = function (key, value, condition) {
|
||||||
var onFilterRowsChange = _this.props.onFilterRowsChange;
|
var onFilterChange = _this.props.onFilterChange;
|
||||||
|
|
||||||
if (onFilterRowsChange) {
|
if (onFilterChange) {
|
||||||
onFilterRowsChange(key, val);
|
onFilterChange(key, value, condition);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
_this.handlerFilterDropChange = function (key, val) {
|
_this.handlerFilterClear = function (field) {
|
||||||
var onFilterRowsDropChange = _this.props.onFilterRowsDropChange;
|
var onFilterClear = _this.props.onFilterClear;
|
||||||
|
|
||||||
if (onFilterRowsDropChange) {
|
if (onFilterClear) {
|
||||||
onFilterRowsDropChange(key, val.key);
|
onFilterClear(field);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -322,15 +322,15 @@ var TableHeader = function (_Component) {
|
||||||
//文本输入
|
//文本输入
|
||||||
case "text":
|
case "text":
|
||||||
return _react2["default"].createElement(_FilterType2["default"], {
|
return _react2["default"].createElement(_FilterType2["default"], {
|
||||||
locale: locale,
|
locale: locale //多语
|
||||||
rendertype: type,
|
, rendertype: type //渲染类型
|
||||||
clsPrefix: clsPrefix,
|
, clsPrefix: clsPrefix //css前缀
|
||||||
className: clsPrefix + " filter-text",
|
, className: clsPrefix + " filter-text",
|
||||||
onChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this.handlerFilterTextChange.bind(_this, dataIndex))
|
dataIndex: dataIndex //字段
|
||||||
// onChange={this.handlerFilterTextChange.bind(this, dataIndex)}
|
, onFilterChange: _this.handlerFilterChange //输入框回调
|
||||||
, onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex),
|
, onFilterClear: _this.handlerFilterClear //清除回调
|
||||||
filterDropdown: rows[1][index]["filterdropdown"],
|
, filterDropdown: rows[1][index]["filterdropdown"] //是否显示下拉条件
|
||||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
, filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||||
});
|
});
|
||||||
//数值输入
|
//数值输入
|
||||||
case "number":
|
case "number":
|
||||||
|
|
@ -339,14 +339,16 @@ var TableHeader = function (_Component) {
|
||||||
rendertype: type,
|
rendertype: type,
|
||||||
clsPrefix: clsPrefix,
|
clsPrefix: clsPrefix,
|
||||||
className: clsPrefix + " filter-text",
|
className: clsPrefix + " filter-text",
|
||||||
onChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this.handlerFilterTextChange.bind(_this, dataIndex)),
|
dataIndex: dataIndex //字段
|
||||||
onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex),
|
, onFilterChange: (0, _throttleDebounce.debounce)(filterDelay || 300, _this.handlerFilterChange) //输入框回调并且函数防抖动
|
||||||
filterDropdown: rows[1][index]["filterdropdown"],
|
, onFilterClear: _this.handlerFilterClear //清除回调
|
||||||
|
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||||
});
|
});
|
||||||
//下拉框选择
|
//下拉框选择
|
||||||
case "dropdown":
|
case "dropdown":
|
||||||
var selectDataSource = [];
|
var selectDataSource = [];
|
||||||
|
//处理没有输入数据源的时候，系统自动查找自带的数据筛选后注入
|
||||||
if (rows.length > 0 && (rows[1][index]["filterdropdownauto"] || "auto") == "auto") {
|
if (rows.length > 0 && (rows[1][index]["filterdropdownauto"] || "auto") == "auto") {
|
||||||
var hash = {};
|
var hash = {};
|
||||||
//处理下拉重复对象组装dropdown
|
//处理下拉重复对象组装dropdown
|
||||||
|
|
@ -361,6 +363,7 @@ var TableHeader = function (_Component) {
|
||||||
return item;
|
return item;
|
||||||
}, []);
|
}, []);
|
||||||
} else {
|
} else {
|
||||||
|
//从外部数据源加载系统数据
|
||||||
selectDataSource = rows[1][index]["filterdropdowndata"];
|
selectDataSource = rows[1][index]["filterdropdowndata"];
|
||||||
}
|
}
|
||||||
return _react2["default"].createElement(_FilterType2["default"], {
|
return _react2["default"].createElement(_FilterType2["default"], {
|
||||||
|
|
@ -368,9 +371,10 @@ var TableHeader = function (_Component) {
|
||||||
rendertype: type,
|
rendertype: type,
|
||||||
className: clsPrefix + " filter-dropdown",
|
className: clsPrefix + " filter-dropdown",
|
||||||
data: selectDataSource,
|
data: selectDataSource,
|
||||||
onChange: _this.handlerFilterTextChange.bind(_this, dataIndex),
|
dataIndex: dataIndex //字段
|
||||||
onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex),
|
, onFilterChange: _this.handlerFilterChange //输入框回调
|
||||||
filterDropdown: rows[1][index]["filterdropdown"],
|
, onFilterClear: _this.handlerFilterClear //清除回调
|
||||||
|
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||||
onFocus: rows[1][index]["filterdropdownfocus"],
|
onFocus: rows[1][index]["filterdropdownfocus"],
|
||||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||||
});
|
});
|
||||||
|
|
@ -382,9 +386,10 @@ var TableHeader = function (_Component) {
|
||||||
className: "filter-date",
|
className: "filter-date",
|
||||||
onClick: function onClick() {},
|
onClick: function onClick() {},
|
||||||
format: rows[1][index]["format"] || "YYYY-MM-DD",
|
format: rows[1][index]["format"] || "YYYY-MM-DD",
|
||||||
onChange: _this.handlerFilterTextChange.bind(_this, dataIndex),
|
dataIndex: dataIndex //字段
|
||||||
onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex),
|
, onFilterChange: _this.handlerFilterChange //输入框回调
|
||||||
filterDropdown: rows[1][index]["filterdropdown"],
|
, onFilterClear: _this.handlerFilterClear //清除回调
|
||||||
|
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||||
});
|
});
|
||||||
//日期范围
|
//日期范围
|
||||||
|
|
@ -395,9 +400,10 @@ var TableHeader = function (_Component) {
|
||||||
className: "filter-date",
|
className: "filter-date",
|
||||||
onClick: function onClick() {},
|
onClick: function onClick() {},
|
||||||
format: rows[1][index]["format"] || "YYYY-MM-DD",
|
format: rows[1][index]["format"] || "YYYY-MM-DD",
|
||||||
onChange: _this.handlerFilterTextChange.bind(_this, dataIndex),
|
dataIndex: dataIndex //字段
|
||||||
onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex),
|
, onFilterChange: _this.handlerFilterChange //输入框回调
|
||||||
filterDropdown: rows[1][index]["filterdropdown"],
|
, onFilterClear: _this.handlerFilterClear //清除回调
|
||||||
|
, filterDropdown: rows[1][index]["filterdropdown"],
|
||||||
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
filterDropdownType: rows[1][index]["filterdropdowntype"] //下拉的条件类型为string,number
|
||||||
});
|
});
|
||||||
default:
|
default:
|
||||||
|
|
@ -458,15 +464,17 @@ var TableHeader = function (_Component) {
|
||||||
// }
|
// }
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description 过滤输入后的回调函数
|
* 过滤输入后或下拉条件的回调函数
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/**
|
|
||||||
* @description 过滤输入后的回调函数
|
|
||||||
*/
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description 过滤渲染的组件类型
|
* 过滤行清除回调
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 过滤渲染的组件类型
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -85,16 +85,17 @@ const data26 = [
|
||||||
];
|
];
|
||||||
|
|
||||||
class Demo26 extends Component {
|
class Demo26 extends Component {
|
||||||
handlerFilterRowsChange = (key, val) => {
|
handlerFilterChange = (key, val, condition) => {
|
||||||
console.log('准备构建AJAX请求，接收参数：key=', key, ' value=', val);
|
console.log('参数：key=', key, ' value=', val, 'condition=', condition);
|
||||||
}
|
}
|
||||||
handlerFilterRowsDropChange = (key, val) => {
|
|
||||||
console.log('过滤条件类型:', key, val);
|
handlerFilterClear = (key) => {
|
||||||
|
console.log('清除条件', key);
|
||||||
}
|
}
|
||||||
render() {
|
render() {
|
||||||
return <Table
|
return <Table
|
||||||
onFilterRowsDropChange={this.handlerFilterRowsDropChange}//下拉条件的回调(key,val)=>()
|
onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()
|
||||||
onFilterRowsChange={this.handlerFilterRowsChange}//触发输入操作以及其他的回调(key,val)=>()
|
onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()
|
||||||
filterDelay={500}//输入文本多少ms触发回调函数，默认300ms
|
filterDelay={500}//输入文本多少ms触发回调函数，默认300ms
|
||||||
filterable={true}//是否开启过滤数据功能
|
filterable={true}//是否开启过滤数据功能
|
||||||
bordered
|
bordered
|
||||||
|
|
|
||||||
|
|
@ -106,12 +106,12 @@ class Demo27 extends Component {
|
||||||
dropdownvalue: []
|
dropdownvalue: []
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
handlerFilterRowsChange = (key, val) => {
|
handlerFilterChange = (key, val, condition) => {
|
||||||
console.log('准备构建AJAX请求，接收参数：key=', key, ' value=', val);
|
console.log('参数：key=', key, ' value=', val, 'condition=', condition);
|
||||||
}
|
}
|
||||||
|
|
||||||
handlerFilterRowsDropChange = (key, val) => {
|
handlerFilterClear = (key) => {
|
||||||
console.log('过滤条件类型:', key, val);
|
console.log('清除条件', key);
|
||||||
}
|
}
|
||||||
getSelectedDataFunc = data => {
|
getSelectedDataFunc = data => {
|
||||||
console.log(data);
|
console.log(data);
|
||||||
|
|
@ -158,49 +158,47 @@ class Demo27 extends Component {
|
||||||
filterDropdown: "show",//显示条件
|
filterDropdown: "show",//显示条件
|
||||||
filterDropdownType: "string"//字符条件
|
filterDropdownType: "string"//字符条件
|
||||||
},
|
},
|
||||||
{
|
|
||||||
title: "区间",
|
|
||||||
width: 200,
|
|
||||||
dataIndex: "mark",
|
|
||||||
key: "mark",
|
|
||||||
filterType: "number",//输入框类型
|
|
||||||
filterDropdownType: "number"//数值类条件
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
title: "年龄",
|
title: "年龄",
|
||||||
width: 180,
|
width: 180,
|
||||||
sorter: (a, b) => a.age - b.age,
|
|
||||||
dataIndex: "age",
|
dataIndex: "age",
|
||||||
key: "age",
|
key: "age",
|
||||||
filterType: "dropdown",
|
filterType: "number",//输入框类型
|
||||||
filterDropdown: "hide",//不显示条件
|
filterDropdown: "show",//显示条件
|
||||||
filterDropdownAuto: "manual",//切换手动传入模式
|
filterDropdownType: "number"//字符条件
|
||||||
filterDropdownData: this.state.dropdownvalue,
|
|
||||||
filterDropdownFocus: () => {
|
|
||||||
this.setState({
|
|
||||||
dropdownvalue: [{ key: "自定义数据1", value: "1" }, { key: "自定义数据2", value: "2" }]
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "居住地址",
|
title: "日期",
|
||||||
width: 350,
|
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",
|
dataIndex: "address",
|
||||||
key: "address",
|
key: "address",
|
||||||
filterType: "daterange",
|
filterType: "dropdown",//输入框类型
|
||||||
filterDropdown: "show"
|
filterDropdown: "show",//显示条件
|
||||||
},
|
filterDropdownType: "number"//字符条件
|
||||||
{
|
|
||||||
title: "操作",
|
|
||||||
width: 100,
|
|
||||||
key: "other",
|
|
||||||
dataIndex: "other"
|
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
return <ComplexTable
|
return <ComplexTable
|
||||||
onFilterRowsDropChange={this.handlerFilterRowsDropChange}//下拉条件的回调(key,val)=>()
|
onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()
|
||||||
onFilterRowsChange={this.handlerFilterRowsChange}//触发输入操作以及其他的回调(key,val)=>()
|
onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()
|
||||||
filterDelay={500}//输入文本多少ms触发回调函数，默认300ms
|
filterDelay={500}//输入文本多少ms触发回调函数，默认500ms
|
||||||
filterable={true}//是否开启过滤数据功能
|
filterable={true}//是否开启过滤数据功能
|
||||||
getSelectedDataFunc={this.getSelectedDataFunc}
|
getSelectedDataFunc={this.getSelectedDataFunc}
|
||||||
bordered
|
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 {
|
::selection {
|
||||||
background: rgb(187,222,251);
|
background: rgb(187,222,251);
|
||||||
text-shadow: none; }
|
text-shadow: none; }
|
||||||
|
|
@ -5287,7 +5284,7 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
|
||||||
.u-panel .u-panel-body {
|
.u-panel .u-panel-body {
|
||||||
padding: 15px 15px;
|
padding: 15px 15px;
|
||||||
position: relative; }
|
position: relative; }
|
||||||
.u-panel .u-panel-body .uf {
|
.u-panel .u-panel-body .u-panel-copy {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 25px;
|
right: 25px;
|
||||||
top: 30px;
|
top: 30px;
|
||||||
|
|
@ -5297,7 +5294,7 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
|
||||||
margin: 8px;
|
margin: 8px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
cursor: pointer; }
|
cursor: pointer; }
|
||||||
.u-panel .u-panel-body .uf:hover {
|
.u-panel .u-panel-body .u-panel-copy:hover {
|
||||||
color: #a8a7a7; }
|
color: #a8a7a7; }
|
||||||
|
|
||||||
.u-panel-default {
|
.u-panel-default {
|
||||||
|
|
@ -6673,7 +6670,8 @@ input.u-button[type="submit"] {
|
||||||
border-radius: 0 500px 500px 0; }
|
border-radius: 0 500px 500px 0; }
|
||||||
|
|
||||||
.u-pagination {
|
.u-pagination {
|
||||||
font-size: 14px; }
|
font-size: 14px;
|
||||||
|
position: relative; }
|
||||||
.u-pagination-list {
|
.u-pagination-list {
|
||||||
float: left;
|
float: left;
|
||||||
margin: 5px; }
|
margin: 5px; }
|
||||||
|
|
@ -6811,6 +6809,15 @@ input.u-button[type="submit"] {
|
||||||
margin: 5px; }
|
margin: 5px; }
|
||||||
.u-pagination-total span {
|
.u-pagination-total span {
|
||||||
padding: 0 5px; }
|
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 {
|
.pagination-state {
|
||||||
float: left;
|
float: left;
|
||||||
|
|
@ -6917,15 +6924,29 @@ input.u-button[type="submit"] {
|
||||||
margin: 0 5px;
|
margin: 0 5px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
line-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 {
|
.u-checkbox.disabled .u-checkbox-label {
|
||||||
cursor: not-allowed;
|
cursor: not-allowed;
|
||||||
opacity: 0.5; }
|
opacity: 0.5; }
|
||||||
.u-checkbox input[type='checkbox'] {
|
.u-checkbox input[type='checkbox'] {
|
||||||
display: none;
|
position: absolute;
|
||||||
cursor: pointer; }
|
z-index: 3;
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%; }
|
||||||
.u-checkbox input[disabled] {
|
.u-checkbox input[disabled] {
|
||||||
cursor: not-allowed; }
|
cursor: not-allowed; }
|
||||||
|
.u-checkbox input[type='checkbox']:focus + .u-checkbox-label:before {
|
||||||
|
border-color: #1e88e5; }
|
||||||
.u-checkbox.is-checked .u-checkbox-label:before {
|
.u-checkbox.is-checked .u-checkbox-label:before {
|
||||||
box-shadow: inset 0 0 0 10px rgb(30,136,229);
|
box-shadow: inset 0 0 0 10px rgb(30,136,229);
|
||||||
border-color: 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);
|
box-shadow: inset 0 0 0 10px rgb(76,175,80);
|
||||||
border-color: 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 {
|
.u-checkbox.u-checkbox-warning.is-checked .u-checkbox-label:before {
|
||||||
box-shadow: inset 0 0 0 10px rgb(255,152,0);
|
box-shadow: inset 0 0 0 10px rgb(255,152,0);
|
||||||
border-color: 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 {
|
.u-checkbox.u-checkbox-danger.is-checked .u-checkbox-label:before {
|
||||||
box-shadow: inset 0 0 0 10px rgb(244,67,54);
|
box-shadow: inset 0 0 0 10px rgb(244,67,54);
|
||||||
border-color: 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 {
|
.u-checkbox.u-checkbox-dark.is-checked .u-checkbox-label:before {
|
||||||
box-shadow: inset 0 0 0 10px rgb(97,97,97);
|
box-shadow: inset 0 0 0 10px rgb(97,97,97);
|
||||||
border-color: 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 {
|
.u-checkbox.u-checkbox-info.is-checked .u-checkbox-label:before {
|
||||||
box-shadow: inset 0 0 0 10px rgb(0,188,212);
|
box-shadow: inset 0 0 0 10px rgb(0,188,212);
|
||||||
border-color: 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 */
|
/* FormGroup */
|
||||||
/* Navlayout */
|
/* Navlayout */
|
||||||
/* keyframes 定义 */
|
/* keyframes 定义 */
|
||||||
|
|
@ -7530,7 +7566,8 @@ ul {
|
||||||
zoom: 1;
|
zoom: 1;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 4px;
|
right: 4px;
|
||||||
padding: 0 0 0 8px; }
|
padding: 0 0 0 8px;
|
||||||
|
top: -3px; }
|
||||||
.u-select-selection--multiple .u-select-selection-choice-remove:before {
|
.u-select-selection--multiple .u-select-selection-choice-remove:before {
|
||||||
display: block;
|
display: block;
|
||||||
font-family: "uf"; }
|
font-family: "uf"; }
|
||||||
|
|
@ -8874,6 +8911,12 @@ ul {
|
||||||
top: 0px;
|
top: 0px;
|
||||||
left: 3px; }
|
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 */
|
/* FormGroup */
|
||||||
/* Navlayout */
|
/* Navlayout */
|
||||||
/* FormGroup */
|
/* 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 |
|
| haveExpandIcon | 控制是否显示行展开icon.**注：该参数只有在和expandedRowRender同时使用才生效** | Function(record, index):bool | () =>false |
|
||||||
| filterable | 是否开启根据条件来过滤数据 | bool | false
|
| filterable | 是否开启根据条件来过滤数据 | bool | false
|
||||||
| filterDelay | 触发过滤输入的时候的ms延迟时间 | number | 300
|
| filterDelay | 触发过滤输入的时候的ms延迟时间 | number | 300
|
||||||
| onFilterRowsChange | 触发过滤输入操作以及其他的回调，回车执行函数或者失去焦点触发回调 | (key,val) => () | () => ()
|
| onFilterChange | 触发过滤输入操作以及下拉条件的回调 | function | (field,value,condition) => ()
|
||||||
| onFilterRowsDropChange | 过滤下拉条件的回调 | (key,val)=>() | () => ()
|
| onFilterClear | 清除过滤条件的回调函数，回调参数为清空的字段 | function | (field) => ()
|
||||||
| headerScroll | 表头下是否显示滚动条 | bool| false
|
| 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是这个单元格的一些设置，可以设置单元格行/列合并|-|
|
|render|cell的render函数有三个参数：这个单元格的文本，这行的记录，这行的索引，它返回一个对象：{children：value，props：{colSpan：1，rowSpan：1}} ==>'children'是这个单元格的文本，props是这个单元格的一些设置，可以设置单元格行/列合并|-|
|
||||||
|onCellClick|单击列的单元格时调用|Function(row, event)|-|
|
|onCellClick|单击列的单元格时调用|Function(row, event)|-|
|
||||||
| order | 设置排序 | string（"descend"、"ascend"） | -|
|
| order | 设置排序 | string（"descend"、"ascend"） | -|
|
||||||
| filterType | 过滤下拉的类型.可选`text`,`dropdown`,`date` | string | text |
|
| filterType | 过滤下拉的类型.可选`text(文本框)`,`dropdown(下拉)`,`date(日期)`,`daterange(日期范围)`,`number(数值)` | string | text |
|
||||||
| filterDropdown | 是否显示过滤下拉.可选`show`,`hide` | string | show |
|
| filterDropdown | 是否显示过滤下拉.可选`show`,`hide` | string | show |
|
||||||
| format | 设置日期类的格式 | string | YYYY-MM-DD |
|
| format | 针对过滤下拉设置日期类的格式 | string | YYYY-MM-DD |
|
||||||
| filterDropdownAuto | 设置下拉条件是否自动设置选项，`auto`自动根据当前数据生成，`manual`手动传入，可以使用`filterDropdownData`来传入自定义数据 | string | auto |
|
| filterDropdownAuto | 设置下拉条件是否自动设置选项，`auto`自动根据当前数据生成，`manual`手动传入，可以使用`filterDropdownData`来传入自定义数据 | string | auto |
|
||||||
| filterDropdownData | 下拉条件自定义数据，filterDropdownAuto=manual生效，传入格式：[{ key : "自定义", value : "自定义" }] | array | [] |
|
| filterDropdownData | 下拉条件自定义数据，filterDropdownAuto=manual生效，传入格式：[{ key : "自定义", value : "自定义" }] | array | [] |
|
||||||
| filterDropdownFocus | 触发点击下拉条件的回调，一般用于异步点击请求数据使用 | function | () => () |
|
| filterDropdownFocus | 触发点击下拉条件的回调，一般用于异步点击请求数据使用 | function | () => () |
|
||||||
|
|
|
||||||
|
|
@ -25,14 +25,16 @@ class FilterDropDown extends Component {
|
||||||
*
|
*
|
||||||
* @param {*} s 选中的selectRecord
|
* @param {*} s 选中的selectRecord
|
||||||
*/
|
*/
|
||||||
onSelectDropdown = (s) => {
|
onSelectDropdown = (item) => {
|
||||||
let { onSelectDropdown } = this.props;
|
let { onSelectDropdown, dataText } = this.props;
|
||||||
if (onSelectDropdown) {
|
if (onSelectDropdown) {
|
||||||
this.setState({
|
if (dataText != "") {
|
||||||
selectValue: [s.key]
|
this.setState({
|
||||||
}, () => {
|
selectValue: [item.key]
|
||||||
onSelectDropdown(s);
|
}, () => {
|
||||||
});
|
onSelectDropdown(item);
|
||||||
|
});
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -66,24 +68,24 @@ class FilterDropDown extends Component {
|
||||||
onSelect={this.onSelectDropdown}
|
onSelect={this.onSelectDropdown}
|
||||||
selectedKeys={selectValue}
|
selectedKeys={selectValue}
|
||||||
>
|
>
|
||||||
<Item key="2">{locale['include']}</Item>
|
<Item key="LIKE">{locale['include']}</Item>
|
||||||
<Item key="6">{locale['exclusive']}</Item>
|
<Item key="ULIKE">{locale['exclusive']}</Item>
|
||||||
<Item key="1">{locale['equal']}</Item>
|
<Item key="EQ">{locale['equal']}</Item>
|
||||||
<Item key="5">{locale['unequal']}</Item>
|
<Item key="UEQ">{locale['unequal']}</Item>
|
||||||
<Item key="7">{locale['begin']}</Item>
|
<Item key="START">{locale['begin']}</Item>
|
||||||
<Item key="3">{locale['end']}</Item>
|
<Item key="END">{locale['end']}</Item>
|
||||||
</Menu>
|
</Menu>
|
||||||
case 'number':
|
case 'number':
|
||||||
return <Menu
|
return <Menu
|
||||||
onSelect={this.onSelectDropdown}
|
onSelect={this.onSelectDropdown}
|
||||||
selectedKeys={selectValue}
|
selectedKeys={selectValue}
|
||||||
>
|
>
|
||||||
<Item key="1">{locale['greater_than']}</Item>
|
<Item key="GT">{locale['greater_than']}</Item>
|
||||||
<Item key="2">{locale['great_than_equal_to']}</Item>
|
<Item key="GTEQ">{locale['great_than_equal_to']}</Item>
|
||||||
<Item key="3">{locale['less_than']}</Item>
|
<Item key="LT">{locale['less_than']}</Item>
|
||||||
<Item key="4">{locale['less_than_equal_to']}</Item>
|
<Item key="LTEQ">{locale['less_than_equal_to']}</Item>
|
||||||
<Item key="5">{locale['be_equal_to']}</Item>
|
<Item key="EQ">{locale['be_equal_to']}</Item>
|
||||||
<Item key="6">{locale['not_equal_to']}</Item>
|
<Item key="UEQ">{locale['not_equal_to']}</Item>
|
||||||
</Menu>
|
</Menu>
|
||||||
default:
|
default:
|
||||||
return <div></div>;
|
return <div></div>;
|
||||||
|
|
@ -94,6 +96,7 @@ class FilterDropDown extends Component {
|
||||||
|
|
||||||
return (<div className="filter-btns">
|
return (<div className="filter-btns">
|
||||||
{isShowCondition == 'show' && <Dropdown
|
{isShowCondition == 'show' && <Dropdown
|
||||||
|
overlayClassName="u-filter-dropdown-menu-wrap"
|
||||||
trigger={['click']}
|
trigger={['click']}
|
||||||
overlay={this.getMenu()}
|
overlay={this.getMenu()}
|
||||||
animation="slide-up"
|
animation="slide-up"
|
||||||
|
|
|
||||||
|
|
@ -14,30 +14,88 @@ const propTypes = {
|
||||||
};
|
};
|
||||||
|
|
||||||
class FilterType extends Component {
|
class FilterType extends Component {
|
||||||
constructor() {
|
constructor(props) {
|
||||||
super();
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
|
value: "",
|
||||||
text: "",
|
text: "",
|
||||||
selectValue: "",
|
selectValue: "",
|
||||||
dateValue: "",
|
dateValue: "",
|
||||||
open: false,
|
open: false,
|
||||||
|
condition: props.filterDropdownType == 'string' ? 'LIKE' : 'EQ',
|
||||||
number: 0
|
number: 0
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
//清除文本
|
|
||||||
clearText = () => {
|
/**
|
||||||
|
* 清除过滤条件
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
clearFilter = () => {
|
||||||
|
let { onFilterClear, dataIndex } = this.props;
|
||||||
this.setState({
|
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({
|
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;
|
let { onChange } = this.props;
|
||||||
onChange && onChange("");
|
onChange && onChange("");
|
||||||
this.setState({
|
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) => {
|
changeTextCallBlur = (val) => {
|
||||||
let { onChange } = this.props;
|
let { onChange } = this.props;
|
||||||
onChange && onChange(val);
|
onChange && onChange(val);
|
||||||
}
|
}
|
||||||
//设置下拉值
|
//设置下拉值
|
||||||
changeSelect = (val) => {
|
changeSelect = (value) => {
|
||||||
let { onChange } = this.props;
|
let { onFilterChange, dataIndex } = this.props;
|
||||||
if (onChange) {
|
if (onFilterChange) {
|
||||||
onChange(val);
|
onFilterChange(dataIndex, value, this.state.condition);
|
||||||
this.setState({
|
this.setState({
|
||||||
selectValue: val
|
value
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -93,12 +139,12 @@ class FilterType extends Component {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
//设置日期值
|
//设置日期值
|
||||||
changeDate = (val) => {
|
changeDate = (value) => {
|
||||||
let { onChange } = this.props;
|
let { onFilterChange, dataIndex } = this.props;
|
||||||
if (onChange) {
|
if (onFilterChange) {
|
||||||
onChange(val);
|
onFilterChange(dataIndex, value, this.state.condition);
|
||||||
this.setState({
|
this.setState({
|
||||||
dateValue: val,
|
value,
|
||||||
open: false
|
open: false
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
@ -111,23 +157,24 @@ class FilterType extends Component {
|
||||||
* @returns
|
* @returns
|
||||||
*/
|
*/
|
||||||
renderControl = (rendertype) => {
|
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) {
|
switch (rendertype) {
|
||||||
case 'text':
|
case 'text':
|
||||||
return <div className={`${clsPrefix} filter-wrap`}>
|
return <div className={`${clsPrefix} filter-wrap`}>
|
||||||
<FormControl
|
<FormControl
|
||||||
ref={el => this.text = el}
|
value={this.state.value}
|
||||||
value={this.state.text}
|
|
||||||
className={className}
|
className={className}
|
||||||
onChange={this.changeText}
|
onChange={this.changeText}
|
||||||
onKeyDown={this.changeTextCall}
|
onKeyDown={this.changeTextCall}
|
||||||
onBlur={this.changeTextCallBlur}
|
//onBlur={this.changeTextCallBlur}
|
||||||
/>
|
/>
|
||||||
<FilterDropDown
|
<FilterDropDown
|
||||||
locale={locale}
|
locale={locale}
|
||||||
onSelectDropdown={onSelectDropdown}
|
dataIndex={dataIndex}
|
||||||
onClickClear={this.clearText}
|
dataText={this.state.value}
|
||||||
isShowClear={this.state.text}
|
onSelectDropdown={this.onSelectDropdown}
|
||||||
|
onClickClear={this.clearFilter}
|
||||||
|
isShowClear={this.state.value}
|
||||||
isShowCondition={filterDropdown}
|
isShowCondition={filterDropdown}
|
||||||
filterDropdownType={filterDropdownType}
|
filterDropdownType={filterDropdownType}
|
||||||
>
|
>
|
||||||
|
|
@ -137,15 +184,17 @@ class FilterType extends Component {
|
||||||
return <div className={`${clsPrefix} filter-wrap`}>
|
return <div className={`${clsPrefix} filter-wrap`}>
|
||||||
<InputNumber
|
<InputNumber
|
||||||
className={className}
|
className={className}
|
||||||
value={this.state.number}
|
value={this.state.value}
|
||||||
onChange={this.changeNumber}
|
onChange={this.changeNumber}
|
||||||
iconStyle="one"
|
iconStyle="one"
|
||||||
/>
|
/>
|
||||||
<FilterDropDown
|
<FilterDropDown
|
||||||
locale={locale}
|
locale={locale}
|
||||||
onSelectDropdown={onSelectDropdown}
|
dataIndex={dataIndex}
|
||||||
onClickClear={this.clearNumber}
|
dataText={this.state.value}
|
||||||
isShowClear={this.state.number}
|
onSelectDropdown={this.onSelectDropdown}
|
||||||
|
onClickClear={this.clearFilter}
|
||||||
|
isShowClear={this.state.value != 0}
|
||||||
isShowCondition={filterDropdown}
|
isShowCondition={filterDropdown}
|
||||||
filterDropdownType={filterDropdownType}
|
filterDropdownType={filterDropdownType}
|
||||||
>
|
>
|
||||||
|
|
@ -155,31 +204,37 @@ class FilterType extends Component {
|
||||||
return <div className={`${clsPrefix} filter-wrap`}>
|
return <div className={`${clsPrefix} filter-wrap`}>
|
||||||
<Select
|
<Select
|
||||||
{...this.props}
|
{...this.props}
|
||||||
value={this.state.selectValue}
|
value={this.state.value}
|
||||||
onChange={this.changeSelect}
|
onChange={this.changeSelect}
|
||||||
/><FilterDropDown
|
/><FilterDropDown
|
||||||
locale={locale}
|
locale={locale}
|
||||||
onSelectDropdown={onSelectDropdown}
|
dataIndex={dataIndex}
|
||||||
onClickClear={this.clearSelectValue}
|
dataText={this.state.value}
|
||||||
|
onSelectDropdown={this.onSelectDropdown}
|
||||||
|
onClickClear={this.clearFilter}
|
||||||
isShowCondition={filterDropdown}
|
isShowCondition={filterDropdown}
|
||||||
isShowClear={this.state.selectValue}
|
isShowClear={this.state.value}
|
||||||
|
filterDropdownType={filterDropdownType}
|
||||||
>
|
>
|
||||||
</FilterDropDown></div>
|
</FilterDropDown></div>
|
||||||
case 'date':
|
case 'date':
|
||||||
return <div className={`${clsPrefix} filter-wrap`}>
|
return <div className={`${clsPrefix} filter-wrap`}>
|
||||||
<DatePicker
|
<DatePicker
|
||||||
{...this.props}
|
{...this.props}
|
||||||
value={this.state.dateValue}
|
value={this.state.value}
|
||||||
onChange={this.changeDate}
|
onChange={this.changeDate}
|
||||||
open={this.state.open}
|
open={this.state.open}
|
||||||
format={format}
|
format={format}
|
||||||
locale={zhCN}
|
locale={zhCN}
|
||||||
/><FilterDropDown
|
/><FilterDropDown
|
||||||
locale={locale}
|
locale={locale}
|
||||||
onSelectDropdown={onSelectDropdown}
|
dataIndex={dataIndex}
|
||||||
onClickClear={this.clearDateValue}
|
dataText={this.state.value}
|
||||||
|
onSelectDropdown={this.onSelectDropdown}
|
||||||
|
onClickClear={this.clearFilter}
|
||||||
isShowCondition={filterDropdown}
|
isShowCondition={filterDropdown}
|
||||||
isShowClear={this.state.dateValue}
|
isShowClear={this.state.value}
|
||||||
|
filterDropdownType={filterDropdownType}
|
||||||
>
|
>
|
||||||
</FilterDropDown>
|
</FilterDropDown>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -187,20 +242,23 @@ class FilterType extends Component {
|
||||||
return <div className={`${clsPrefix} filter-wrap`}>
|
return <div className={`${clsPrefix} filter-wrap`}>
|
||||||
<RangePicker
|
<RangePicker
|
||||||
{...this.props}
|
{...this.props}
|
||||||
value={this.state.dateValue}
|
value={this.state.value}
|
||||||
onChange={this.changeDate}
|
onChange={this.changeDate}
|
||||||
open={this.state.open}
|
open={this.state.open}
|
||||||
format={format}
|
format={format}
|
||||||
|
showTime={true}
|
||||||
locale={zhCN}
|
locale={zhCN}
|
||||||
placeholder={'开始 ~ 结束'}
|
placeholder={'开始 ~ 结束'}
|
||||||
dateInputPlaceholder={['开始', '结束']}
|
dateInputPlaceholder={['开始', '结束']}
|
||||||
showClear={true}
|
showClear={true}
|
||||||
/><FilterDropDown
|
/><FilterDropDown
|
||||||
locale={locale}
|
locale={locale}
|
||||||
onSelectDropdown={onSelectDropdown}
|
dataIndex={dataIndex}
|
||||||
onClickClear={this.clearDateValue}
|
dataText={this.state.value}
|
||||||
|
onSelectDropdown={this.onSelectDropdown}
|
||||||
|
onClickClear={this.clearFilter}
|
||||||
isShowCondition={filterDropdown}
|
isShowCondition={filterDropdown}
|
||||||
isShowClear={this.state.dateValue}
|
isShowClear={this.state.value}
|
||||||
>
|
>
|
||||||
</FilterDropDown>
|
</FilterDropDown>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -293,7 +293,7 @@ class Table extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
getHeader(columns, fixed) {
|
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;
|
onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight,afterDragColWidth,headerScroll ,bordered} = this.props;
|
||||||
const rows = this.getHeaderRows(columns);
|
const rows = this.getHeaderRows(columns);
|
||||||
if (expandIconAsCell && fixed !== 'right') {
|
if (expandIconAsCell && fixed !== 'right') {
|
||||||
|
|
@ -328,8 +328,8 @@ class Table extends Component {
|
||||||
rowStyle={trStyle}
|
rowStyle={trStyle}
|
||||||
fixed={fixed}
|
fixed={fixed}
|
||||||
filterable={filterable}
|
filterable={filterable}
|
||||||
onFilterRowsChange={onFilterRowsChange}
|
onFilterChange={onFilterChange}//过滤行输入或下拉之后回调
|
||||||
onFilterRowsDropChange={onFilterRowsDropChange}
|
onFilterClear={onFilterClear}//过滤行清除后回调
|
||||||
filterDelay={filterDelay}
|
filterDelay={filterDelay}
|
||||||
afterDragColWidth = {afterDragColWidth}
|
afterDragColWidth = {afterDragColWidth}
|
||||||
contentDomWidth={this.contentDomWidth}
|
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) => {
|
handlerFilterChange = (key, value, condition) => {
|
||||||
let { onFilterRowsChange } = this.props;
|
let { onFilterChange } = this.props;
|
||||||
if (onFilterRowsChange) {
|
if (onFilterChange) {
|
||||||
onFilterRowsChange(key, val);
|
onFilterChange(key, value, condition);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description 过滤输入后的回调函数
|
* 过滤行清除回调
|
||||||
*/
|
*/
|
||||||
handlerFilterDropChange = (key, val) => {
|
handlerFilterClear = (field) => {
|
||||||
let { onFilterRowsDropChange } = this.props;
|
let { onFilterClear } = this.props;
|
||||||
if (onFilterRowsDropChange) {
|
if (onFilterClear) {
|
||||||
onFilterRowsDropChange(key, val.key);
|
onFilterClear(field);
|
||||||
}
|
}
|
||||||
};
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @description 过滤渲染的组件类型
|
* 过滤渲染的组件类型
|
||||||
*/
|
*/
|
||||||
filterRenderType = (type, dataIndex, index) => {
|
filterRenderType = (type, dataIndex, index) => {
|
||||||
const { clsPrefix, rows, filterDelay, locale } = this.props;
|
const { clsPrefix, rows, filterDelay, locale } = this.props;
|
||||||
|
|
@ -332,24 +335,18 @@ class TableHeader extends Component {
|
||||||
case "text":
|
case "text":
|
||||||
return (
|
return (
|
||||||
<FilterType
|
<FilterType
|
||||||
locale={locale}
|
locale={locale}//多语
|
||||||
rendertype={type}
|
rendertype={type}//渲染类型
|
||||||
clsPrefix={clsPrefix}
|
clsPrefix={clsPrefix}//css前缀
|
||||||
className={`${clsPrefix} filter-text`}
|
className={`${clsPrefix} filter-text`}
|
||||||
onChange={debounce(
|
dataIndex={dataIndex}//字段
|
||||||
filterDelay || 300,
|
onFilterChange={this.handlerFilterChange}//输入框回调
|
||||||
this.handlerFilterTextChange.bind(this, dataIndex)
|
onFilterClear={this.handlerFilterClear}//清除回调
|
||||||
)}
|
filterDropdown={rows[1][index]["filterdropdown"]}//是否显示下拉条件
|
||||||
// onChange={this.handlerFilterTextChange.bind(this, dataIndex)}
|
|
||||||
onSelectDropdown={this.handlerFilterDropChange.bind(
|
|
||||||
this,
|
|
||||||
dataIndex
|
|
||||||
)}
|
|
||||||
filterDropdown={rows[1][index]["filterdropdown"]}
|
|
||||||
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
//数值输入
|
//数值输入
|
||||||
case "number":
|
case "number":
|
||||||
return (
|
return (
|
||||||
<FilterType
|
<FilterType
|
||||||
|
|
@ -357,14 +354,9 @@ class TableHeader extends Component {
|
||||||
rendertype={type}
|
rendertype={type}
|
||||||
clsPrefix={clsPrefix}
|
clsPrefix={clsPrefix}
|
||||||
className={`${clsPrefix} filter-text`}
|
className={`${clsPrefix} filter-text`}
|
||||||
onChange={debounce(
|
dataIndex={dataIndex}//字段
|
||||||
filterDelay || 300,
|
onFilterChange={debounce(filterDelay || 300, this.handlerFilterChange)}//输入框回调并且函数防抖动
|
||||||
this.handlerFilterTextChange.bind(this, dataIndex)
|
onFilterClear={this.handlerFilterClear}//清除回调
|
||||||
)}
|
|
||||||
onSelectDropdown={this.handlerFilterDropChange.bind(
|
|
||||||
this,
|
|
||||||
dataIndex
|
|
||||||
)}
|
|
||||||
filterDropdown={rows[1][index]["filterdropdown"]}
|
filterDropdown={rows[1][index]["filterdropdown"]}
|
||||||
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
||||||
/>
|
/>
|
||||||
|
|
@ -372,10 +364,8 @@ class TableHeader extends Component {
|
||||||
//下拉框选择
|
//下拉框选择
|
||||||
case "dropdown":
|
case "dropdown":
|
||||||
let selectDataSource = [];
|
let selectDataSource = [];
|
||||||
if (
|
//处理没有输入数据源的时候，系统自动查找自带的数据筛选后注入
|
||||||
rows.length > 0 &&
|
if (rows.length > 0 && (rows[1][index]["filterdropdownauto"] || "auto") == "auto") {
|
||||||
(rows[1][index]["filterdropdownauto"] || "auto") == "auto"
|
|
||||||
) {
|
|
||||||
let hash = {};
|
let hash = {};
|
||||||
//处理下拉重复对象组装dropdown
|
//处理下拉重复对象组装dropdown
|
||||||
selectDataSource = Array.from(rows[1][0].datasource, x => ({
|
selectDataSource = Array.from(rows[1][0].datasource, x => ({
|
||||||
|
|
@ -387,6 +377,7 @@ class TableHeader extends Component {
|
||||||
return item;
|
return item;
|
||||||
}, []);
|
}, []);
|
||||||
} else {
|
} else {
|
||||||
|
//从外部数据源加载系统数据
|
||||||
selectDataSource = rows[1][index]["filterdropdowndata"];
|
selectDataSource = rows[1][index]["filterdropdowndata"];
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
|
|
@ -395,11 +386,9 @@ class TableHeader extends Component {
|
||||||
rendertype={type}
|
rendertype={type}
|
||||||
className={`${clsPrefix} filter-dropdown`}
|
className={`${clsPrefix} filter-dropdown`}
|
||||||
data={selectDataSource}
|
data={selectDataSource}
|
||||||
onChange={this.handlerFilterTextChange.bind(this, dataIndex)}
|
dataIndex={dataIndex}//字段
|
||||||
onSelectDropdown={this.handlerFilterDropChange.bind(
|
onFilterChange={this.handlerFilterChange}//输入框回调
|
||||||
this,
|
onFilterClear={this.handlerFilterClear}//清除回调
|
||||||
dataIndex
|
|
||||||
)}
|
|
||||||
filterDropdown={rows[1][index]["filterdropdown"]}
|
filterDropdown={rows[1][index]["filterdropdown"]}
|
||||||
onFocus={rows[1][index]["filterdropdownfocus"]}
|
onFocus={rows[1][index]["filterdropdownfocus"]}
|
||||||
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
||||||
|
|
@ -412,13 +401,11 @@ class TableHeader extends Component {
|
||||||
locale={locale}
|
locale={locale}
|
||||||
rendertype={type}
|
rendertype={type}
|
||||||
className={`filter-date`}
|
className={`filter-date`}
|
||||||
onClick={() => {}}
|
onClick={() => { }}
|
||||||
format={rows[1][index]["format"] || "YYYY-MM-DD"}
|
format={rows[1][index]["format"] || "YYYY-MM-DD"}
|
||||||
onChange={this.handlerFilterTextChange.bind(this, dataIndex)}
|
dataIndex={dataIndex}//字段
|
||||||
onSelectDropdown={this.handlerFilterDropChange.bind(
|
onFilterChange={this.handlerFilterChange}//输入框回调
|
||||||
this,
|
onFilterClear={this.handlerFilterClear}//清除回调
|
||||||
dataIndex
|
|
||||||
)}
|
|
||||||
filterDropdown={rows[1][index]["filterdropdown"]}
|
filterDropdown={rows[1][index]["filterdropdown"]}
|
||||||
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
||||||
/>
|
/>
|
||||||
|
|
@ -430,13 +417,11 @@ class TableHeader extends Component {
|
||||||
locale={locale}
|
locale={locale}
|
||||||
rendertype={type}
|
rendertype={type}
|
||||||
className={`filter-date`}
|
className={`filter-date`}
|
||||||
onClick={() => {}}
|
onClick={() => { }}
|
||||||
format={rows[1][index]["format"] || "YYYY-MM-DD"}
|
format={rows[1][index]["format"] || "YYYY-MM-DD"}
|
||||||
onChange={this.handlerFilterTextChange.bind(this, dataIndex)}
|
dataIndex={dataIndex}//字段
|
||||||
onSelectDropdown={this.handlerFilterDropChange.bind(
|
onFilterChange={this.handlerFilterChange}//输入框回调
|
||||||
this,
|
onFilterClear={this.handlerFilterClear}//清除回调
|
||||||
dataIndex
|
|
||||||
)}
|
|
||||||
filterDropdown={rows[1][index]["filterdropdown"]}
|
filterDropdown={rows[1][index]["filterdropdown"]}
|
||||||
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
|
||||||
/>
|
/>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue