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

merge

This commit is contained in:
wanghaoo 2018-09-27 15:23:11 +08:00
parent c430e72eb5 bc513b776e
commit 9b10d04d85
15 changed files with 380 additions and 86 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

10
README.md
View File

@ -101,6 +101,11 @@ class Demo extends Component {
| footerScroll | 表尾和body是否公用同一个横向滚动条。（ 如果footer中也是一个table组件，并且也具有滚动条，那么也需要加入footerScroll参数。 ） | bool | false |
| loading | 表格是否加载中 | bool|object(详情可以参考上面示例) | false |
| haveExpandIcon | 控制是否显示行展开icon.**注：该参数只有在和expandedRowRender同时使用才生效** | Function(record, index):bool | () =>false |
| filterable | 是否开启根据条件来过滤数据 | bool | false
| filterDelay | 触发过滤输入的时候的ms延迟时间 | number | 300
| onFilterRowsChange | 触发过滤输入操作以及其他的回调 | (key,val) => () | ()=>()
| onFilterRowsDropChange | 过滤下拉条件的回调 | (key,val)=>() | () => ()
*注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*
@ -119,7 +124,10 @@ class Demo extends Component {
|render|cell的render函数有三个参数：这个单元格的文本，这行的记录，这行的索引，它返回一个对象：{children：value，props：{colSpan：1，rowSpan：1}} ==>'children'是这个单元格的文本，props是这个单元格的一些设置|-|
|onCellClick|单击列的单元格时调用|Function(row, event)|-|
|onHeadCellClick|单击表头的单元格时调用|Function(row, event)|row 当前行的数据|
| order | 设置排序 | string（"descend"、"ascend"） | -|
| order | 设置排序 | string（"descend"、"ascend"） | - |
| filterType | 过滤下拉的类型.可选`text`,`dropdown`,`date` | string | text |
| filterDropdown | 是否显示过滤下拉.可选`show`,`hide` | string | show |
| format | 设置日期类的格式 | string | YYYY-MM-DD |
## 如何引用

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 vendored
View File

@ -8443,7 +8443,7 @@ ul {
padding-right: 0px; }
.u-table-fixed-header .u-table-body-inner {
height: 100%;
overflow: scroll; }
overflow: auto; }
.u-table-fixed-header .u-table-scroll .u-table-header {
overflow-x: scroll;
padding-bottom: 20px;

2
dist/demo.css.map vendored
View File

File diff suppressed because one or more lines are too long

245
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

8
docs/api.md
View File

@ -48,6 +48,11 @@ import 'bee-table/build/Table.css';
| footerScroll | 表尾和body是否公用同一个横向滚动条。（ 如果footer中也是一个table组件，并且也具有滚动条，那么也需要加入footerScroll参数。 ） | bool | false |
| loading | 表格是否加载中 | bool|object(详情可以参考上面示例) | false |
| haveExpandIcon | 控制是否显示行展开icon.**注：该参数只有在和expandedRowRender同时使用才生效** | Function(record, index):bool | () =>false |
| filterable | 是否开启根据条件来过滤数据 | bool | false
| filterDelay | 触发过滤输入的时候的ms延迟时间 | number | 300
| onFilterRowsChange | 触发过滤输入操作以及其他的回调 | (key,val) => () | ()=>()
| onFilterRowsDropChange | 过滤下拉条件的回调 | (key,val)=>() | () => ()
*注意: data参数中的key值必需，否则会导致部分功能出现问题！建议使用唯一的值，如id*
@ -67,6 +72,9 @@ import 'bee-table/build/Table.css';
|render|cell的render函数有三个参数：这个单元格的文本，这行的记录，这行的索引，它返回一个对象：{children：value，props：{colSpan：1，rowSpan：1}} ==>'children'是这个单元格的文本，props是这个单元格的一些设置，可以设置单元格行/列合并|-|
|onCellClick|单击列的单元格时调用|Function(row, event)|-|
| order | 设置排序 | string（"descend"、"ascend"） | -|
| filterType | 过滤下拉的类型.可选`text`,`dropdown`,`date` | string | text |
| filterDropdown | 是否显示过滤下拉.可选`show`,`hide` | string | show |
| format | 设置日期类的格式 | string | YYYY-MM-DD |
{% include "mixin.md"%}

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-filter" /></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-filterno" /></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
});
}

9
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';
this.drag.x = x;
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']}