p47502813
/
bee-table
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat:实现过滤行新功能，增加可设置单独条件属性filterDropdownIncludeKeys

This commit is contained in:
Kvkens 2018-12-10 22:51:45 +08:00
parent aff4151408
commit be87445379
12 changed files with 3033 additions and 18506 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -133,6 +133,7 @@ class Demo extends Component {
| filterDropdownData | 下拉条件自定义数据，filterDropdownAuto=manual生效，传入格式：[{ key : "自定义", value : "自定义" }] | array | [] |
| filterDropdownFocus | 触发点击下拉条件的回调，一般用于异步点击请求数据使用 | function | () => () |
| filterDropdownType | 下拉条件类型，分为 string 和 number 条件类型 | string | string
| filterDropdownIncludeKeys | 能够设置指定的下拉条件项，通过设置keys 其中string条件可设置:LIKE,ULIKE,EQ,UEQ,START,END.number条件可设置:GT,GTEQ,LT,LTEQ,EQ,UEQ | array | [] 不设置此属性为显示所有

12
demo/demolist/Demo29.js
View File

@ -1,7 +1,7 @@
/**
*
* @title 从弹出框内显示过滤行
* @description
* @title 从弹出框内显示过滤行并且设置可选下拉条件
* @description 通过Modal组件来展示表格的过滤相关能力，并且通过filterDropdownIncludeKeys设置可选条件
*
*/
@ -13,11 +13,9 @@ import Button from 'bee-button';
const columns29 = [
{ title: "姓名", width: 180, dataIndex: "name", key: "name", filterType: "text", filterDropdown: "show" },
{ title: "年龄", width: 150, dataIndex: "age", key: "age", filterType: "dropdown", filterDropdown: "show" },
{ title: "日期", width: 200, dataIndex: "date", key: "date", filterType: "date", filterDropdown: "show", format: "YYYY-MM-DD" },
{ title: "居住地址", width: 150, dataIndex: "address", key: "address", filterType: "dropdown", filterDropdown: "show" },
{ title: "备注", dataIndex: "mark", key: "mark" }
{ title: "姓名", width: 180, dataIndex: "name", key: "name", filterType: "text", filterDropdown: "show",filterDropdownIncludeKeys:['LIKE','EQ'] },
{ title: "年龄", width: 150, dataIndex: "age", key: "age", filterType: "dropdown", filterDropdown: "show",filterDropdownType:"number",filterDropdownIncludeKeys:['EQ'] },
{ title: "日期", width: 200, dataIndex: "date", key: "date", filterType: "date", filterDropdown: "show", format: "YYYY-MM-DD" }
];
const data29 = [

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

42
dist/demo.css vendored
View File

@ -6680,6 +6680,10 @@ input.u-button[type="submit"] {
clear: both;
display: table;
content: ''; }
.u-pagination-list > li.iconBtn > a {
padding: 0 11px;
font-size: 22px;
line-height: 1.57142857; }
.u-pagination-list > li > a, .u-pagination-list > li > span {
display: inline-block;
text-decoration: none;
@ -6767,9 +6771,15 @@ input.u-button[type="submit"] {
margin: 5px;
float: left;
min-width: 120px; }
.u-pagination .data_per_select > span {
display: inline-block;
line-height: 36px;
float: left; }
.u-pagination .data_per_select .u-select {
width: 50px;
margin: 0 6px; }
margin: 0 6px;
height: 36px;
float: left; }
.u-pagination .data_per_select .u-select .u-select-selection {
height: 36px; }
.u-pagination .data_per_select .u-select .u-select-selection .u-select-selection-rendered {
@ -6789,20 +6799,26 @@ input.u-button[type="submit"] {
.u-pagination .page_jump {
float: left;
margin: 5px; }
.u-pagination .page_jump > span {
display: inline-block;
line-height: 36px;
float: left; }
.u-pagination .page_jump_value {
outline: none;
-webkit-appearance: none;
background: #fff;
border-radius: 4px;
line-height: 32px;
width: 50px;
margin: 0 6px;
text-align: center;
border: 1px solid #d7d7d7; }
.u-pagination .page_jump_btn {
margin-top: -3px;
margin-left: 10px;
border-color: #d7d7d7; }
.u-pagination .page_jump_btn,
.u-pagination .page_jump_value {
margin: 0 6px;
padding: 0;
height: 36px;
line-height: 34px;
box-sizing: border-box;
float: left; }
.u-pagination-total {
float: left;
height: 36px;
@ -10351,16 +10367,4 @@ li.rc-time-picker-panel-select-option-disabled:hover {
.demo25 .u-table-filter-column-filter-icon {
right: 15px; }
th .drop-menu .uf {
font-size: 12px;
visibility: hidden;
margin-left: 15px; }
th:hover .uf {
visibility: visible; }
.demo3 .u-table-thead th {
padding-top: 0px;
padding-bottom: 0px; }
/*# sourceMappingURL=demo.css.map */

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

21332
dist/demo.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored
View File

File diff suppressed because one or more lines are too long

1
docs/api.md
View File

@ -80,6 +80,7 @@ import 'bee-table/build/Table.css';
| filterDropdownData | 下拉条件自定义数据，filterDropdownAuto=manual生效，传入格式：[{ key : "自定义", value : "自定义" }] | array | [] |
| filterDropdownFocus | 触发点击下拉条件的回调，一般用于异步点击请求数据使用 | function | () => () |
| filterDropdownType | 下拉条件类型，分为 string 和 number 条件类型 | string | string
| filterDropdownIncludeKeys | 能够设置指定的下拉条件项，通过设置keys 其中string条件可设置:LIKE,ULIKE,EQ,UEQ,START,END.number条件可设置:GT,GTEQ,LT,LTEQ,EQ,UEQ | array | [] 不设置此属性为显示所有
{% include "mixin.md"%}

129
src/FilterDropDown.js
View File

@ -29,20 +29,20 @@ class FilterDropDown extends Component {
onSelectDropdown = (item) => {
let { onSelectDropdown, dataText, filterDropdownType } = this.props;
if (onSelectDropdown) {
if (filterDropdownType == 'string') {
this.setState({
selectValue: [item.key]
}, () => {
onSelectDropdown(item);
});
}
if (filterDropdownType == 'number') {
this.setState({
selectNumberValue: [item.key]
}, () => {
onSelectDropdown(item);
});
}
if (filterDropdownType == 'string') {
this.setState({
selectValue: [item.key]
}, () => {
onSelectDropdown(item);
});
}
if (filterDropdownType == 'number') {
this.setState({
selectNumberValue: [item.key]
}, () => {
onSelectDropdown(item);
});
}
}
}
@ -69,35 +69,80 @@ class FilterDropDown extends Component {
*/
getMenu = () => {
let { selectValue, selectNumberValue } = this.state;
let { filterDropdownType } = this.props;
let { filterDropdownType, filterDropdownIncludeKeys } = this.props;
let locale = getComponentLocale(this.props, this.context, 'Table', () => i18n);
switch (filterDropdownType) {
case 'string':
return <Menu
onSelect={this.onSelectDropdown}
selectedKeys={selectValue}
>
<Item key="LIKE">{locale['include']}</Item>
<Item key="ULIKE">{locale['exclusive']}</Item>
<Item key="EQ">{locale['equal']}</Item>
<Item key="UEQ">{locale['unequal']}</Item>
<Item key="START">{locale['begin']}</Item>
<Item key="END">{locale['end']}</Item>
</Menu>
case 'number':
return <Menu
onSelect={this.onSelectDropdown}
selectedKeys={selectNumberValue}
>
<Item key="GT">{locale['greater_than']}</Item>
<Item key="GTEQ">{locale['great_than_equal_to']}</Item>
<Item key="LT">{locale['less_than']}</Item>
<Item key="LTEQ">{locale['less_than_equal_to']}</Item>
<Item key="EQ">{locale['be_equal_to']}</Item>
<Item key="UEQ">{locale['not_equal_to']}</Item>
</Menu>
default:
return <div></div>;
let stringEnum = {
LIKE: 'include',
ULIKE: 'exclusive',
EQ: 'equal',
UEQ: 'unequal',
START: 'begin',
END: 'end'
};
let numberEnum = {
GT: 'greater_than',
GTEQ: 'great_than_equal_to',
LT: 'less_than',
LTEQ: 'less_than_equal_to',
EQ: 'be_equal_to',
UEQ: 'not_equal_to'
};
if (filterDropdownIncludeKeys != undefined) {
switch (filterDropdownType) {
case 'string':
return <Menu
onSelect={this.onSelectDropdown}
selectedKeys={selectValue}
>
{
filterDropdownIncludeKeys.map(item => {
return <Item key={item}>{locale[stringEnum[item]]}</Item>
})
}
</Menu>
case 'number':
return <Menu
onSelect={this.onSelectDropdown}
selectedKeys={selectNumberValue}
>
{
filterDropdownIncludeKeys.map(item => {
return <Item key={item}>{locale[numberEnum[item]]}</Item>
})
}
</Menu>
default:
return <div></div>;
}
} else {
switch (filterDropdownType) {
case 'string':
return <Menu
onSelect={this.onSelectDropdown}
selectedKeys={selectValue}
>
<Item key="LIKE">{locale['include']}</Item>
<Item key="ULIKE">{locale['exclusive']}</Item>
<Item key="EQ">{locale['equal']}</Item>
<Item key="UEQ">{locale['unequal']}</Item>
<Item key="START">{locale['begin']}</Item>
<Item key="END">{locale['end']}</Item>
</Menu>
case 'number':
return <Menu
onSelect={this.onSelectDropdown}
selectedKeys={selectNumberValue}
>
<Item key="GT">{locale['greater_than']}</Item>
<Item key="GTEQ">{locale['great_than_equal_to']}</Item>
<Item key="LT">{locale['less_than']}</Item>
<Item key="LTEQ">{locale['less_than_equal_to']}</Item>
<Item key="EQ">{locale['be_equal_to']}</Item>
<Item key="UEQ">{locale['not_equal_to']}</Item>
</Menu>
default:
return <div></div>;
}
}
}
render() {

8
src/FilterType.js
View File

@ -157,7 +157,7 @@ class FilterType extends Component {
* @returns
*/
renderControl = (rendertype) => {
let { dataIndex, filterDropdown, filterDropdownType, format, className, onChange, onSelectDropdown, clsPrefix, locale } = this.props;
let { filterDropdownIncludeKeys, dataIndex, filterDropdown, filterDropdownType, format, className, onChange, onSelectDropdown, clsPrefix, locale } = this.props;
switch (rendertype) {
case 'text':
return <div className={`${clsPrefix} filter-wrap`}>
@ -177,6 +177,7 @@ class FilterType extends Component {
isShowClear={this.state.value}
isShowCondition={filterDropdown}
filterDropdownType={filterDropdownType}
filterDropdownIncludeKeys={filterDropdownIncludeKeys}
>
</FilterDropDown>
</div>
@ -197,6 +198,7 @@ class FilterType extends Component {
isShowClear={this.state.value != 0}
isShowCondition={filterDropdown}
filterDropdownType={filterDropdownType}
filterDropdownIncludeKeys={filterDropdownIncludeKeys}
>
</FilterDropDown>
</div>
@ -215,6 +217,7 @@ class FilterType extends Component {
isShowCondition={filterDropdown}
isShowClear={this.state.value}
filterDropdownType={filterDropdownType}
filterDropdownIncludeKeys={filterDropdownIncludeKeys}
>
</FilterDropDown></div>
case 'date':
@ -235,6 +238,7 @@ class FilterType extends Component {
isShowCondition={filterDropdown}
isShowClear={this.state.value}
filterDropdownType={filterDropdownType}
filterDropdownIncludeKeys={filterDropdownIncludeKeys}
>
</FilterDropDown>
</div>
@ -259,6 +263,7 @@ class FilterType extends Component {
onClickClear={this.clearFilter}
isShowCondition={filterDropdown}
isShowClear={this.state.value}
filterDropdownIncludeKeys={filterDropdownIncludeKeys}
>
</FilterDropDown>
</div>
@ -270,6 +275,7 @@ class FilterType extends Component {
/>
<FilterDropDown locale={locale}
onSelectDropdown={onSelectDropdown}
filterDropdownIncludeKeys={filterDropdownIncludeKeys}
>
</FilterDropDown>
</div>

3
src/Table.js
View File

@ -401,7 +401,8 @@ class Table extends Component {
filterdropdownauto: column.filterDropdownAuto,//是否自定义数据
filterdropdowndata: column.filterDropdownData,//自定义数据格式
filterdropdownfocus: column.filterDropdownFocus,//焦点触发函数回调
filterdropdowntype: column.filterDropdownType//下拉的类型分为 String,Number 默认是String
filterdropdowntype: column.filterDropdownType,//下拉的类型分为 String,Number 默认是String
filterdropdownincludekeys: column.filterDropdownIncludeKeys//下拉条件按照指定的keys去显示
});
}
});

5
src/TableHeader.js
View File

@ -400,6 +400,7 @@ class TableHeader extends Component {
onFilterClear={this.handlerFilterClear}//清除回调
filterDropdown={rows[1][index]["filterdropdown"]}//是否显示下拉条件
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
/>
);
//数值输入
@ -415,6 +416,7 @@ class TableHeader extends Component {
onFilterClear={this.handlerFilterClear}//清除回调
filterDropdown={rows[1][index]["filterdropdown"]}
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
/>
);
//下拉框选择
@ -448,6 +450,7 @@ class TableHeader extends Component {
filterDropdown={rows[1][index]["filterdropdown"]}
onFocus={rows[1][index]["filterdropdownfocus"]}
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
/>
);
//日期
@ -464,6 +467,7 @@ class TableHeader extends Component {
onFilterClear={this.handlerFilterClear}//清除回调
filterDropdown={rows[1][index]["filterdropdown"]}
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
/>
);
//日期范围
@ -480,6 +484,7 @@ class TableHeader extends Component {
onFilterClear={this.handlerFilterClear}//清除回调
filterDropdown={rows[1][index]["filterdropdown"]}
filterDropdownType={rows[1][index]["filterdropdowntype"]}//下拉的条件类型为string,number
filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
/>
);
default: