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

update:完善UI展示&添加函数节流参数&单独设置条件

This commit is contained in:
kvkens 2018-09-21 15:58:37 +08:00
parent 81491aa586
commit 5d0f77b327
13 changed files with 1852 additions and 14676 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
demo/.DS_Store vendored
View File

Binary file not shown.

BIN
demo/demolist/.DS_Store vendored
View File

Binary file not shown.

19
demo/demolist/Demo26.js
View File

@ -11,10 +11,10 @@ import Table from '../../src';
const columns26 = [
{ title: "姓名", width: 150, dataIndex: "name", key: "name", filterType: "text" },
{ title: "年龄", width: 100, dataIndex: "age", key: "age", filterType: "dropdown" },
{ title: "姓名", width: 180, dataIndex: "name", key: "name", filterType: "text", filterDropdown: "show" },
{ title: "年龄", width: 120, dataIndex: "age", key: "age", filterType: "dropdown" },
{ title: "日期", width: 200, dataIndex: "date", key: "date", filterType: "date" },
{ title: "居住地址", width: 150, dataIndex: "address", key: "address", filterType: "text" },
{ title: "居住地址", width: 120, dataIndex: "address", key: "address", filterType: "dropdown" },
{ title: "备注", dataIndex: "mark", key: "mark" }
];
@ -84,7 +84,7 @@ const data26 = [
}
];
class Demo6 extends Component {
class Demo26 extends Component {
handlerFilterRowsChange = (key, val) => {
console.log('准备构建AJAX请求，接收参数：key=', key, ' value=', val);
}
@ -92,8 +92,15 @@ class Demo6 extends Component {
console.log('过滤条件类型:', key, val);
}
render() {
return <Table onFilterRowsDropChange={this.handlerFilterRowsDropChange} onFilterRowsChange={this.handlerFilterRowsChange} filterable={true} bordered columns={columns26} data={data26} />;
return <Table
onFilterRowsDropChange={this.handlerFilterRowsDropChange}//下拉条件的回调(key,val)=>()
onFilterRowsChange={this.handlerFilterRowsChange}//触发输入操作以及其他的回调(key,val)=>()
filterDelay={500}//输入文本多少ms触发回调函数，默认300ms
filterable={true}//是否开启过滤数据功能
bordered
columns={columns26}
data={data26} />;
}
}
export default Demo6;
export default Demo26;

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

11
dist/demo.css vendored
View File

@ -8547,6 +8547,9 @@ ul {
box-shadow: none; }
.u-table-thead .filter-text, .u-table-thead .filter-dropdown, .u-table-thead .filter-date {
font-weight: normal; }
.u-table-thead .filter-wrap {
display: -ms-flexbox;
display: flex; }
.u-table-thead th {
background: #f7f7f7;
overflow: hidden;
@ -10244,12 +10247,4 @@ li.rc-time-picker-panel-select-option-disabled:hover {
.demo25 .u-table-scroll .u-table-header {
margin-right: 15px; }
th .drop-menu .uf {
font-size: 12px;
visibility: hidden;
margin-left: 15px; }
th:hover .uf {
visibility: visible; }
/*# sourceMappingURL=demo.css.map */

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

16378
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

35
src/FilterDropDown.js Normal file
View File

@ -0,0 +1,35 @@
import React, { Component } from 'react';
import Dropdown from 'bee-dropdown';
import Menu from 'bee-menus';
import Button from 'bee-button';
import Icon from 'bee-icon';
const { Item } = Menu;
class FilterDropDown extends Component {
render() {
let dropmenu = (
<Menu
onSelect={this.props.onSelectDropdown}
>
<Item key="1">等于</Item>
<Item key="2">包含</Item>
<Item key="3">以结尾</Item>
<Item key="4">空</Item>
<Item key="5">不等于</Item>
<Item key="6">不包含</Item>
<Item key="7">以开始</Item>
</Menu>
);
return (
<Dropdown
trigger={['click']}
overlay={dropmenu}
animation="slide-up"
>
<Button shape="border" style={{ marginLeft: "5px", minWidth: "0px", width: "38px", padding: 0 }}><Icon style={{ padding: 0 }} type="uf-navmenu" /></Button>
</Dropdown>
);
}
}
export default FilterDropDown;

62
src/FilterType.js
View File

@ -1,52 +1,43 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import FormControl from 'bee-form-control';
import Button from 'bee-button';
import Icon from 'bee-icon';
import Select from 'bee-select';
import DatePicker from 'bee-datepicker';
import Menu from 'bee-menus';
import Dropdown from 'bee-dropdown';
const { Item } = Menu;
const format = "YYYY-MM-DD dddd";
import FilterDropDown from './FilterDropDown';
const propTypes = {
filterDropdown: PropTypes.string
};
class FilterType extends Component {
renderControl = (rendertype) => {
let { filterDropdown, className, onChange, onSelectDropdown, clsPrefix } = this.props;
switch (rendertype) {
case 'text':
const dropmenu = (
<Menu
onSelect={this.props.onSelectDropdown}
>
<Item key="1">等于</Item>
<Item key="2">包含</Item>
<Item key="3">以结尾</Item>
<Item key="4">空</Item>
<Item key="5">不等于</Item>
<Item key="6">不包含</Item>
<Item key="7">以开始</Item>
</Menu>
);
return <div><FormControl
className={this.props.className}
onChange={this.props.onChange}
style={{ width: "70%" }}
return <div className={`${clsPrefix} filter-wrap`}><FormControl
className={className}
onChange={onChange}
/>
<Dropdown
trigger={['click']}
overlay={dropmenu}
animation="slide-up"
{filterDropdown == 'show' && <FilterDropDown
onSelectDropdown={onSelectDropdown}
>
<Button shape="border" style={{ marginLeft: "5px", minWidth: "26px", width: "26px", padding: 0, marginBottom: "4px" }}><Icon style={{ padding: 0 }} type="uf-arrow-c-o-down" /></Button>
</Dropdown>
</FilterDropDown>}
</div>
case 'dropdown':
return <Select
return <div className={`${clsPrefix} filter-wrap`}><Select
{...this.props}
/>
/>{filterDropdown == 'show' && <FilterDropDown
onSelectDropdown={onSelectDropdown}
>
</FilterDropDown>}</div>
case 'date':
return <DatePicker
return <div className={`${clsPrefix} filter-wrap`}><DatePicker
{...this.props}
/>
/>{filterDropdown == 'show' && <FilterDropDown
onSelectDropdown={onSelectDropdown}
>
</FilterDropDown>}
</div>
default:
break;
}
@ -59,5 +50,8 @@ class FilterType extends Component {
);
}
}
FilterType.propTypes = propTypes;
FilterType.defaultProps = {
filterDropdown: 'show'
}
export default FilterType;

6
src/Table.js
View File

@ -256,7 +256,7 @@ class Table extends Component {
}
getHeader(columns, fixed) {
const { onFilterRowsDropChange, onFilterRowsChange, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop, draggable,
const { filterDelay, onFilterRowsDropChange, onFilterRowsChange, filterable, showHeader, expandIconAsCell, clsPrefix, onDragStart, onDragEnter, onDragOver, onDrop, draggable,
onMouseDown, onMouseMove, onMouseUp, dragborder, onThMouseMove, dragborderKey, minColumnWidth, headerHeight } = this.props;
const rows = this.getHeaderRows(columns);
if (expandIconAsCell && fixed !== 'right') {
@ -291,6 +291,7 @@ class Table extends Component {
filterable={filterable}
onFilterRowsChange={onFilterRowsChange}
onFilterRowsDropChange={onFilterRowsDropChange}
filterDelay={filterDelay}
/>
) : null;
}
@ -338,7 +339,8 @@ class Table extends Component {
width: column.width,
filtertype: column.filterType,
dataindex: column.dataIndex,
datasource: this.props.data
datasource: this.props.data,
filterdropdown: column.filterDropdown
});
}
});

3
src/Table.scss
View File

@ -275,6 +275,9 @@ $table-move-in-color: $bg-color-base;
.filter-text,.filter-dropdown,.filter-date {
font-weight: normal;
}
.filter-wrap{
display: flex;
}
th{
background: $table-head-background-color;
overflow: hidden;

8
src/TableHeader.js
View File

@ -223,15 +223,17 @@ class TableHeader extends Component {
* @description 过滤渲染的组件类型
*/
filterRenderType = (type, dataIndex, index) => {
const { clsPrefix, rows } = this.props;
const { clsPrefix, rows, filterDelay } = this.props;
switch (type) {
//文本输入
case 'text':
return <FilterType
rendertype={type}
clsPrefix={clsPrefix}
className={`${clsPrefix} filter-text`}
onChange={debounce(500, this.handlerFilterTextChange.bind(this, dataIndex))}
onChange={debounce(filterDelay || 300, this.handlerFilterTextChange.bind(this, dataIndex))}
onSelectDropdown={this.handlerFilterDropChange.bind(this, dataIndex)}
filterDropdown={rows[1][index]['filterdropdown']}
/>
//下拉框选择
case 'dropdown':
@ -250,6 +252,7 @@ class TableHeader extends Component {
className={`${clsPrefix} filter-dropdown`}
data={selectDataSource}
onChange={this.handlerFilterTextChange.bind(this, dataIndex)}
onSelectDropdown={this.handlerFilterDropChange.bind(this, dataIndex)}
/>
//日期
case 'date':
@ -258,6 +261,7 @@ class TableHeader extends Component {
className={`${clsPrefix} filter-date`}
onClick={() => { }}
onChange={this.handlerFilterTextChange.bind(this, dataIndex)}
onSelectDropdown={this.handlerFilterDropChange.bind(this, dataIndex)}
/>
default:
//不匹配类型默认文本输入