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

View File

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

View File

@ -1,7 +1,7 @@
/** /**
* *
* @title 从弹出框内显示过滤行 * @title 从弹出框内显示过滤行并且设置可选下拉条件
* @description * @description 通过Modal组件来展示表格的过滤相关能力并且通过filterDropdownIncludeKeys设置可选条件
* *
*/ */
@ -13,11 +13,9 @@ import Button from 'bee-button';
const columns29 = [ const columns29 = [
{ title: "姓名", width: 180, dataIndex: "name", key: "name", filterType: "text", filterDropdown: "show" }, { 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" }, { 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" }, { 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" }
]; ];
const data29 = [ const data29 = [

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; clear: both;
display: table; display: table;
content: ''; } 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 { .u-pagination-list > li > a, .u-pagination-list > li > span {
display: inline-block; display: inline-block;
text-decoration: none; text-decoration: none;
@ -6767,9 +6771,15 @@ input.u-button[type="submit"] {
margin: 5px; margin: 5px;
float: left; float: left;
min-width: 120px; } min-width: 120px; }
.u-pagination .data_per_select > span {
display: inline-block;
line-height: 36px;
float: left; }
.u-pagination .data_per_select .u-select { .u-pagination .data_per_select .u-select {
width: 50px; width: 50px;
margin: 0 6px; } margin: 0 6px;
height: 36px;
float: left; }
.u-pagination .data_per_select .u-select .u-select-selection { .u-pagination .data_per_select .u-select .u-select-selection {
height: 36px; } height: 36px; }
.u-pagination .data_per_select .u-select .u-select-selection .u-select-selection-rendered { .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 { .u-pagination .page_jump {
float: left; float: left;
margin: 5px; } margin: 5px; }
.u-pagination .page_jump > span {
display: inline-block;
line-height: 36px;
float: left; }
.u-pagination .page_jump_value { .u-pagination .page_jump_value {
outline: none; outline: none;
-webkit-appearance: none; -webkit-appearance: none;
background: #fff; background: #fff;
border-radius: 4px; border-radius: 4px;
line-height: 32px;
width: 50px; width: 50px;
margin: 0 6px;
text-align: center; text-align: center;
border: 1px solid #d7d7d7; } border: 1px solid #d7d7d7; }
.u-pagination .page_jump_btn { .u-pagination .page_jump_btn,
margin-top: -3px; .u-pagination .page_jump_value {
margin-left: 10px; margin: 0 6px;
border-color: #d7d7d7; } padding: 0;
height: 36px;
line-height: 34px;
box-sizing: border-box;
float: left; }
.u-pagination-total { .u-pagination-total {
float: left; float: left;
height: 36px; height: 36px;
@ -10351,16 +10367,4 @@ li.rc-time-picker-panel-select-option-disabled:hover {
.demo25 .u-table-filter-column-filter-icon { .demo25 .u-table-filter-column-filter-icon {
right: 15px; } 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 */ /*# sourceMappingURL=demo.css.map */

2
dist/demo.css.map vendored

File diff suppressed because one or more lines are too long

21332
dist/demo.js vendored

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -80,6 +80,7 @@ import 'bee-table/build/Table.css';
| filterDropdownData | 下拉条件自定义数据filterDropdownAuto=manual生效传入格式[{ key : "自定义", value : "自定义" }] | array | [] | | filterDropdownData | 下拉条件自定义数据filterDropdownAuto=manual生效传入格式[{ key : "自定义", value : "自定义" }] | array | [] |
| filterDropdownFocus | 触发点击下拉条件的回调,一般用于异步点击请求数据使用 | function | () => () | | filterDropdownFocus | 触发点击下拉条件的回调,一般用于异步点击请求数据使用 | function | () => () |
| filterDropdownType | 下拉条件类型,分为 string 和 number 条件类型 | string | string | 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"%} {% include "mixin.md"%}

View File

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

View File

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

View File

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

View File

@ -400,6 +400,7 @@ class TableHeader extends Component {
onFilterClear={this.handlerFilterClear}//清除回调 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
filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
/> />
); );
//数值输入 //数值输入
@ -415,6 +416,7 @@ class TableHeader extends Component {
onFilterClear={this.handlerFilterClear}//清除回调 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
filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
/> />
); );
//下拉框选择 //下拉框选择
@ -448,6 +450,7 @@ class TableHeader extends Component {
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
filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
/> />
); );
//日期 //日期
@ -464,6 +467,7 @@ class TableHeader extends Component {
onFilterClear={this.handlerFilterClear}//清除回调 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
filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
/> />
); );
//日期范围 //日期范围
@ -480,6 +484,7 @@ class TableHeader extends Component {
onFilterClear={this.handlerFilterClear}//清除回调 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
filterDropdownIncludeKeys={rows[1][index]["filterdropdownincludekeys"]}//下拉条件按照指定的keys去显示
/> />
); );
default: default: