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

add:添加过滤行功能的清除按钮以及下拉条件的清除.

This commit is contained in:
kvkens 2018-09-26 22:01:13 +08:00
parent d52c9c26ca
commit 9287420466
12 changed files with 2077 additions and 1494 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -39,3 +39,5 @@ jspm_packages
coverage
.*.swp
package-lock.json
demo/.DS_Store
demo/demolist/.DS_Store

BIN
demo/.DS_Store vendored
View File

Binary file not shown.

BIN
demo/demolist/.DS_Store vendored
View File

Binary file not shown.

22
demo/demolist/Demo26.js
View File

@ -12,9 +12,9 @@ import Table from '../../src';
const columns26 = [
{ 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: 120, dataIndex: "address", key: "address", filterType: "dropdown" },
{ 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" }
];
@ -23,7 +23,7 @@ const data26 = [
key: "1",
name: "John Brown",
age: 32,
date: "2018-09-18 09:46:44",
date: "2018-09-19",
address: "朝阳区",
mark: "无"
},
@ -31,7 +31,7 @@ const data26 = [
key: "2",
name: "Jim Green",
age: 40,
date: "2018-09-18 09:46:44",
date: "2018-09-18",
address: "朝阳区",
mark: "无"
},
@ -39,7 +39,7 @@ const data26 = [
key: "3",
name: "Jim Green",
age: 40,
date: "2018-09-18 09:46:44",
date: "2018-09-18",
address: "东城区",
mark: "无"
},
@ -47,14 +47,14 @@ const data26 = [
key: "4",
name: "Jim Green",
age: 40,
date: "2018-09-18 09:46:44",
date: "2018-09-18",
address: "东城区",
mark: "无"
}, {
key: "5",
name: "John Brown",
age: 32,
date: "2018-09-18 09:46:44",
date: "2018-09-18",
address: "海淀区",
mark: "无"
},
@ -62,7 +62,7 @@ const data26 = [
key: "6",
name: "Jim Green",
age: 48,
date: "2018-09-18 09:46:44",
date: "2018-09-18",
address: "海淀区",
mark: "无"
},
@ -70,7 +70,7 @@ const data26 = [
key: "7",
name: "Jim Green",
age: 40,
date: "2018-09-18 09:46:44",
date: "2018-09-18",
address: "海淀区",
mark: "无"
},
@ -78,7 +78,7 @@ const data26 = [
key: "8",
name: "Jim Green",
age: 38,
date: "2018-09-18 09:46:44",
date: "2018-09-18",
address: "海淀区",
mark: "无"
}

2
demo/index.js
View File

File diff suppressed because one or more lines are too long

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

3370
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

40
src/FilterDropDown.js
View File

@ -6,10 +6,38 @@ import Icon from 'bee-icon';
const { Item } = Menu;
class FilterDropDown extends Component {
constructor() {
super();
this.state = {
selectValue: []
}
}
onSelectDropdown = (s) => {
let { onSelectDropdown } = this.props;
if (onSelectDropdown) {
this.setState({
selectValue: s.key
}, () => {
onSelectDropdown(s);
});
}
}
onClickClear = () => {
let { onClickClear } = this.props;
if (onClickClear) {
this.setState({
selectValue: []
}, () => {
onClickClear();
});
}
}
render() {
let { isShowCondition } = this.props;
let dropmenu = (
<Menu
onSelect={this.props.onSelectDropdown}
onSelect={this.onSelectDropdown}
selectedKeys={this.state.selectValue}
>
<Item key="1">等于</Item>
<Item key="2">包含</Item>
@ -20,14 +48,16 @@ class FilterDropDown extends Component {
<Item key="7">以开始</Item>
</Menu>
);
return (
<Dropdown
return (<div>
{isShowCondition == 'show' && <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>
<Button shape="border" style={{ marginLeft: "3px", minWidth: "0px", width: "24px", padding: 0 }}><Icon style={{ padding: 0 }} type="uf-treearrow-down" /></Button>
</Dropdown>}
<Button onClick={this.onClickClear} shape="border" style={{ marginLeft: "1px", minWidth: "0px", width: "24px", padding: 0, "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" }}><Icon style={{ padding: 0, "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" }} type="uf-close" /></Button>
</div>
);
}
}

121
src/FilterType.js
View File

@ -10,11 +10,117 @@ const propTypes = {
};
class FilterType extends Component {
constructor() {
super();
this.state = {
text: "",
selectValue: "",
dateValue: "",
open: false
}
}
//清除文本
clearText = () => {
this.setState({
text: ""
}, () => {
this.changeText("");
});
}
//设置文本
changeText = (val) => {
let { onChange } = this.props;
if (onChange) {
onChange(val);
this.setState({
text: val
});
}
}
//设置下拉值
changeSelect = (val) => {
let { onChange } = this.props;
if (onChange) {
onChange(val);
this.setState({
selectValue: val
});
}
}
//清除下拉值
clearSelectValue = () => {
this.setState({
selectValue: ""
}, () => {
this.changeSelect("");
});
}
//清除日期值
clearDateValue = () => {
this.setState({
dateValue: ""
}, () => {
this.changeDate("");
});
}
//设置日期值
changeDate = (val) => {
let { onChange } = this.props;
if (onChange) {
onChange(val);
this.setState({
dateValue: val,
open: false
});
}
}
//组件渲染
renderControl = (rendertype) => {
let { filterDropdown, className, onChange, onSelectDropdown, clsPrefix } = this.props;
switch (rendertype) {
case 'text':
return <div className={`${clsPrefix} filter-wrap`}><FormControl
ref={el => this.text = el}
value={this.state.text}
className={className}
onChange={this.changeText}
/>
<FilterDropDown
onSelectDropdown={onSelectDropdown}
onClickClear={this.clearText}
isShowClear={this.state.text}
isShowCondition={filterDropdown}
>
</FilterDropDown>
</div>
case 'dropdown':
return <div className={`${clsPrefix} filter-wrap`}><Select
{...this.props}
value={this.state.selectValue}
onChange={this.changeSelect}
/><FilterDropDown
onSelectDropdown={onSelectDropdown}
onClickClear={this.clearSelectValue}
isShowCondition={filterDropdown}
isShowClear={this.state.selectValue}
>
</FilterDropDown></div>
case 'date':
return <div className={`${clsPrefix} filter-wrap`}><DatePicker
{...this.props}
value={this.state.dateValue}
onChange={this.changeDate}
open={this.state.open}
/>{filterDropdown == 'show' && <FilterDropDown
onSelectDropdown={onSelectDropdown}
onClickClear={this.clearDateValue}
isShowCondition={filterDropdown}
isShowClear={this.state.dateValue}
>
</FilterDropDown>}
</div>
case 'bool':
return <div className={`${clsPrefix} filter-wrap`}><Switch
className={className}
onChange={onChange}
/>
@ -23,21 +129,6 @@ class FilterType extends Component {
>
</FilterDropDown>}
</div>
case 'dropdown':
return <div className={`${clsPrefix} filter-wrap`}><Select
{...this.props}
/>{filterDropdown == 'show' && <FilterDropDown
onSelectDropdown={onSelectDropdown}
>
</FilterDropDown>}</div>
case 'date':
return <div className={`${clsPrefix} filter-wrap`}><DatePicker
{...this.props}
/>{filterDropdown == 'show' && <FilterDropDown
onSelectDropdown={onSelectDropdown}
>
</FilterDropDown>}
</div>
default:
break;
}

1
src/Table.js
View File

@ -343,6 +343,7 @@ class Table extends Component {
filtertype: column.filterType,
dataindex: column.dataIndex,
datasource: this.props.data,
format: column.format,
filterdropdown: column.filterDropdown
});
}

7
src/TableHeader.js
View File

@ -185,10 +185,10 @@ class TableHeader extends Component {
let currentDom = document.getElementById("u-table-drag-thead-" + this.theadKey).getElementsByTagName("th")[this.drag.currIndex];
currentDom.style.width = newWidth + "px";
// this.contentTableWidth = newTableWidth;
contentTableDom.style.width = newTableWidth+'px';
contentTableDom.style.width = newTableWidth + 'px';
this.drag.x = x;
let contentColDomArr = contentTableDom.querySelectorAll('colgroup col')
contentColDomArr[this.drag.currIndex].style.width = newWidth+"px" ;
contentColDomArr[this.drag.currIndex].style.width = newWidth + "px";
//固定表头时，表头和表体分开，拖拽时表体的宽度也需要一起联动
const siblingDom = contentTableDom.parentNode.nextElementSibling;
if (siblingDom) {
@ -261,8 +261,9 @@ class TableHeader extends Component {
case 'date':
return <FilterType
rendertype={type}
className={`${clsPrefix} filter-date`}
className={`filter-date`}
onClick={() => { }}
format={rows[1][index]['format'] || "YYYY-MM-DD"}
onChange={this.handlerFilterTextChange.bind(this, dataIndex)}
onSelectDropdown={this.handlerFilterDropChange.bind(this, dataIndex)}
filterDropdown={rows[1][index]['filterdropdown']}