add:过滤行的下拉事件触发焦点函数.
This commit is contained in:
kvkens
parent
37704aa154
commit
daadedb95c
|
|
@ -130,6 +130,8 @@ class Demo extends Component {
|
|||
| format | 针对过滤下拉设置日期类的格式 | string | YYYY-MM-DD |
|
||||
| filterDropdownAuto | 设置下拉条件是否自动设置选项，`auto`自动根据当前数据生成，`manual`手动传入，可以使用`filterDropdownData`来传入自定义数据 | string | auto |
|
||||
| filterDropdownData | 下拉条件自定义数据，filterDropdownAuto=manual生效，传入格式：[{ key : "自定义", value : "自定义" }] | array | [] |
|
||||
| filterDropdownFocus | 触发点击下拉条件的回调，一般用于异步点击请求数据使用 | function | () => () |
|
||||
|
||||
|
||||
|
||||
## 如何引用
|
||||
|
|
|
|||
|
|
@ -446,7 +446,8 @@ var Table = function (_Component) {
|
|||
format: column.format,
|
||||
filterdropdown: column.filterDropdown,
|
||||
filterdropdownauto: column.filterDropdownAuto, //是否自定义数据
|
||||
filterdropdowndata: column.filterDropdownData //自定义数据格式
|
||||
filterdropdowndata: column.filterDropdownData, //自定义数据格式
|
||||
filterdropdownfocus: column.filterDropdownFocus //焦点触发函数回调
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -276,7 +276,8 @@ var TableHeader = function (_Component) {
|
|||
data: selectDataSource,
|
||||
onChange: _this.handlerFilterTextChange.bind(_this, dataIndex),
|
||||
onSelectDropdown: _this.handlerFilterDropChange.bind(_this, dataIndex),
|
||||
filterDropdown: rows[1][index]['filterdropdown']
|
||||
filterDropdown: rows[1][index]['filterdropdown'],
|
||||
onFocus: rows[1][index]['filterdropdownfocus']
|
||||
});
|
||||
//日期
|
||||
case 'date':
|
||||
|
|
@ -383,6 +384,7 @@ var TableHeader = function (_Component) {
|
|||
}
|
||||
if (filterable && index == rows.length - 1) {
|
||||
da.children = _this2.filterRenderType(da['filtertype'], da.dataindex, i);
|
||||
delete da.filterdropdownfocus;
|
||||
}
|
||||
if (draggable) {
|
||||
return _react2["default"].createElement('th', _extends({}, da, {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
/**
|
||||
*
|
||||
* @title 组合过滤和其他功能使用
|
||||
* @description 在过滤数据行的基础上增加列拖拽、动态菜单显示等
|
||||
* @description 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等
|
||||
*
|
||||
*/
|
||||
|
||||
|
|
@ -100,6 +100,12 @@ const data27 = [
|
|||
const MultiSelectTable = multiSelect(Table, Checkbox);
|
||||
const ComplexTable = sort(MultiSelectTable, Icon);
|
||||
class Demo27 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
dropdownvalue: []
|
||||
}
|
||||
}
|
||||
handlerFilterRowsChange = (key, val) => {
|
||||
console.log('准备构建AJAX请求，接收参数：key=', key, ' value=', val);
|
||||
}
|
||||
|
|
@ -153,10 +159,12 @@ class Demo27 extends Component {
|
|||
filterType: "dropdown",
|
||||
filterDropdown: "hide",
|
||||
filterDropdownAuto: "manual",//切换手动传入模式
|
||||
filterDropdownData: [{
|
||||
key: '数据',
|
||||
value: '数据'
|
||||
}]
|
||||
filterDropdownData: this.state.dropdownvalue,
|
||||
filterDropdownFocus: () => {
|
||||
this.setState({
|
||||
dropdownvalue: [{ key: "自定义数据1", value: "1" }, { key: "自定义数据2", value: "2" }]
|
||||
});
|
||||
}
|
||||
},
|
||||
{ title: "居住地址", width: 150, dataIndex: "address", key: "address", filterType: "dropdown", filterDropdown: "hide" },
|
||||
];
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -2553,9 +2553,9 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
|
|||
|
||||
@font-face {
|
||||
font-family: "uf";
|
||||
src: url("../style/utils/iconfont.eot");
|
||||
src: url("../node_modules/tinper-bee-core/scss/iconfont.eot?t=1483429573920");
|
||||
/* IE9*/
|
||||
src: url("../style/utils/iconfont.eot") format("embedded-opentype"), url("../style/utils/iconfont.woff") format("woff"), url("../style/utils/iconfont.ttf") format("truetype"), url("../style/utils/iconfont.svg") format("svg");
|
||||
src: url("../node_modules/tinper-bee-core/scss/iconfont.eot?t=1483429573920#iefix") format("embedded-opentype"), url("../node_modules/tinper-bee-core/scss/iconfont.woff?t=1483429573920") format("woff"), url("../node_modules/tinper-bee-core/scss/iconfont.ttf?t=1483429573920") format("truetype"), url("../node_modules/tinper-bee-core/scss/iconfont.svg?t=1483429573920#uf") format("svg");
|
||||
/* iOS 4.1- */ }
|
||||
|
||||
.uf {
|
||||
|
|
|
|||
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
|
|
@ -77,7 +77,7 @@ import 'bee-table/build/Table.css';
|
|||
| format | 设置日期类的格式 | string | YYYY-MM-DD |
|
||||
| filterDropdownAuto | 设置下拉条件是否自动设置选项，`auto`自动根据当前数据生成，`manual`手动传入，可以使用`filterDropdownData`来传入自定义数据 | string | auto |
|
||||
| filterDropdownData | 下拉条件自定义数据，filterDropdownAuto=manual生效，传入格式：[{ key : "自定义", value : "自定义" }] | array | [] |
|
||||
|
||||
| filterDropdownFocus | 触发点击下拉条件的回调，一般用于异步点击请求数据使用 | function | () => () |
|
||||
|
||||
{% include "mixin.md"%}
|
||||
|
||||
|
|
|
|||
|
|
@ -353,7 +353,8 @@ class Table extends Component {
|
|||
format: column.format,
|
||||
filterdropdown: column.filterDropdown,
|
||||
filterdropdownauto: column.filterDropdownAuto,//是否自定义数据
|
||||
filterdropdowndata: column.filterDropdownData//自定义数据格式
|
||||
filterdropdowndata: column.filterDropdownData,//自定义数据格式
|
||||
filterdropdownfocus: column.filterDropdownFocus//焦点触发函数回调
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -265,6 +265,7 @@ class TableHeader extends Component {
|
|||
onChange={this.handlerFilterTextChange.bind(this, dataIndex)}
|
||||
onSelectDropdown={this.handlerFilterDropChange.bind(this, dataIndex)}
|
||||
filterDropdown={rows[1][index]['filterdropdown']}
|
||||
onFocus={rows[1][index]['filterdropdownfocus']}
|
||||
/>
|
||||
//日期
|
||||
case 'date':
|
||||
|
|
@ -307,6 +308,7 @@ class TableHeader extends Component {
|
|||
}
|
||||
if (filterable && index == rows.length - 1) {
|
||||
da.children = this.filterRenderType(da['filtertype'], da.dataindex, i);
|
||||
delete da.filterdropdownfocus;
|
||||
}
|
||||
if (draggable) {
|
||||
return (<th {...da}
|
||||
|
|
|
|||
Loading…
Reference in New Issue