优化tableheader代码、注释、文档补全
This commit is contained in:
“jonyshi”
parent
f8d52f44f5
commit
c77fc2fbf2
|
|
@ -16,13 +16,15 @@ react bee-table component for tinper-bee
|
|||
* 多选
|
||||
* 主子表
|
||||
* 固定表头
|
||||
* 交互列
|
||||
* 列拖拽
|
||||
* 拖拽表头进行列交换
|
||||
* 拖拽调整列宽度
|
||||
* 嵌套子表格
|
||||
* 行、列合并
|
||||
|
||||
具体示例代码参考[!这里](http://bee.tinper.org/bee-table/)
|
||||
|
||||
<font color="#dd0000">为了响应大家对bee-table的需求，我们新增加了表格的高级组件 [bee-complex-grid](http://bee.tinper.org/bee-complex-grid/)</font>
|
||||
|
||||
## 安装
|
||||
|
||||
[](https://npmjs.org/package/bee-table)
|
||||
|
|
@ -214,7 +216,8 @@ import multiSelect from "bee-table/lib/multiSelect.js";
|
|||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------ | ---------- | -------- | ---- |
|
||||
| draggable | 当前表格可拖拽 | boolean | false |
|
||||
| draggable | 可拖拽交换列 | boolean | false |
|
||||
| dragborder | 可拖拽改变列宽 | boolean | false |
|
||||
| checkMinSize | 当前表格显示最少列数 | boolean | false |
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,92 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 简单表格、文字过长，两种tip
|
||||
* 【Tooltip】
|
||||
* @description
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Button from "bee-button";
|
||||
import Tooltip from "bee-tooltip";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "用户名", dataIndex: "a", key: "a", width: 80, className: "rowClassName",
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
<span tootip={text} style={{
|
||||
display: "inline-block",
|
||||
width: "60px",
|
||||
textOverflow: "ellipsis",
|
||||
overflow: "hidden",
|
||||
whiteSpace: "nowrap",
|
||||
verticalAlign: "middle",
|
||||
}}>{text}</span>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
},
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: '10%' },
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
render(text, record, index) {
|
||||
return (
|
||||
<div style={{ position: 'relative' }} title={text} >
|
||||
<a
|
||||
href="javascript:;"
|
||||
tooltip={text}
|
||||
onClick={() => {
|
||||
alert('这是第' + index + '列，内容为:' + text);
|
||||
}}
|
||||
>
|
||||
一些操作
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
||||
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, d: "操作", key: "2" },
|
||||
{ a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
|
||||
];
|
||||
|
||||
class Demo1 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data,
|
||||
selectedRowIndex: 0
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
parentNodeId='parent'
|
||||
height={43}
|
||||
headerHeight={42}
|
||||
onRowClick={(record, index, indent) => {
|
||||
this.setState({
|
||||
selectedRowIndex: index
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo1;
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 无数据时显示
|
||||
* @description 无数据时显示效果展示（可自定义）
|
||||
*
|
||||
* import {Table} from 'tinper-bee';
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
|
||||
|
||||
const columns10 = [
|
||||
{
|
||||
title: "Name",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
width: "40%"
|
||||
},
|
||||
{
|
||||
title: "Age",
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
width: "30%"
|
||||
},
|
||||
{
|
||||
title: "Address",
|
||||
dataIndex: "address",
|
||||
key: "address"
|
||||
}
|
||||
];
|
||||
|
||||
const data10 = [
|
||||
|
||||
];
|
||||
|
||||
const emptyFunc = () => <span>这里没有数据！</span>
|
||||
|
||||
class Demo10 extends Component {
|
||||
render() {
|
||||
return <Table columns={columns10} data={data10} emptyText={emptyFunc} />;
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo10;
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 列排序
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
import Icon from "bee-icon";
|
||||
import sort from "../../src/lib/sort.js";
|
||||
let ComplexTable = sort(Table, Icon);
|
||||
const columns11 = [
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 200,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d"
|
||||
}
|
||||
];
|
||||
|
||||
const data11 = [
|
||||
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
|
||||
];
|
||||
|
||||
const defaultProps11 = {
|
||||
prefixCls: "bee-table"
|
||||
};
|
||||
class Demo11 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
sortOrder: "",
|
||||
data: data11
|
||||
};
|
||||
}
|
||||
render() {
|
||||
|
||||
return <ComplexTable columns={columns11} data={this.state.data} />;
|
||||
}
|
||||
}
|
||||
Demo11.defaultProps = defaultProps11;
|
||||
|
||||
|
||||
export default Demo11;
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 全选功能
|
||||
* @description 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据（未使用封装好的全选功能）
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
import multiSelect from "../../src/lib/multiSelect.js";
|
||||
import Checkbox from 'bee-checkbox';
|
||||
|
||||
const columns12 = [
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 200,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d"
|
||||
}
|
||||
];
|
||||
|
||||
const data12 = [
|
||||
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2",_checked:true },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" ,_checked:true},
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" ,_checked:true}
|
||||
];
|
||||
//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
|
||||
let MultiSelectTable = multiSelect(Table, Checkbox);
|
||||
|
||||
class Demo12 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data12
|
||||
};
|
||||
}
|
||||
getSelectedDataFunc = data => {
|
||||
console.log(data);
|
||||
};
|
||||
|
||||
render() {
|
||||
let multiObj = {
|
||||
type: "checkbox"
|
||||
};
|
||||
return (
|
||||
<MultiSelectTable
|
||||
columns={columns12}
|
||||
data={data12}
|
||||
multiSelect={multiObj}
|
||||
getSelectedDataFunc={this.getSelectedDataFunc}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo12;
|
||||
|
|
@ -1,134 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 多列排序、全选功能、合计
|
||||
* @description 多列排序、全选功能、合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）新增回调函数(sorterClick)
|
||||
*
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
import Checkbox from "bee-checkbox";
|
||||
import Button from "bee-button";
|
||||
import Icon from "bee-icon";
|
||||
import multiSelect from "../../src/lib/multiSelect.js";
|
||||
import sort from "../../src/lib/sort.js";
|
||||
import sum from "../../src/lib/sum.js";
|
||||
|
||||
const columns13 = [
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
className:'dfasd',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "功力指数",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 200,
|
||||
sumCol: true,
|
||||
sorter: (a, b) => a.c - b.c,
|
||||
sorterClick:(data,type)=>{//排序的回调函数
|
||||
//type value is up or down
|
||||
console.log("data",data);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 200,
|
||||
sumCol: true,
|
||||
sorter: (a, b) => a.c - b.c,
|
||||
sorterClick:(data,type)=>{//排序的回调函数
|
||||
//type value is up or down
|
||||
console.log("data",data);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "成绩",
|
||||
dataIndex: "e",
|
||||
key: "e",
|
||||
width: 200,
|
||||
sumCol: true,
|
||||
sorter: (a, b) => a.c - b.c,
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 200
|
||||
}
|
||||
];
|
||||
|
||||
const data13 = [
|
||||
{ a: "杨过", b: 675, c: 30, d: "内行",e:100, key: "2" },
|
||||
{ a: "令狐冲", b: 43, c: 41, d: "大侠",e:90, key: "1" },
|
||||
{ a: "令狐冲1", b: 43, c: 81, d: "大侠", e:120,key: "4" },
|
||||
{ a: "令狐冲2", b: 43, c: 81, d: "大侠", e:130,key: "5" },
|
||||
{ a: "郭靖", b: 153, c: 25, d: "大侠",e:90, key: "3" }
|
||||
];
|
||||
|
||||
//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
|
||||
let ComplexTable = multiSelect(sum(sort(Table, Icon)), Checkbox);
|
||||
|
||||
class Demo13 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data13: data13,
|
||||
selectedRow: this.selectedRow,
|
||||
selectDisabled: this.selectDisabled
|
||||
};
|
||||
}
|
||||
getSelectedDataFunc = data => {
|
||||
console.log(data);
|
||||
};
|
||||
selectDisabled = (record, index) => {
|
||||
// console.log(record);
|
||||
if (index === 1) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
selectedRow = (record, index) => {
|
||||
// console.log(record);
|
||||
if (index === 0) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
onClick = () => {
|
||||
this.setState({
|
||||
selectedRow: function() {}
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
let multiObj = {
|
||||
type: "checkbox"
|
||||
};
|
||||
let sortObj = {
|
||||
mode:'multiple'
|
||||
}
|
||||
|
||||
return (
|
||||
<div>
|
||||
<Button className="editable-add-btn" onClick={this.onClick}>
|
||||
change selectedRow
|
||||
</Button>
|
||||
<ComplexTable
|
||||
selectDisabled={this.state.selectDisabled}
|
||||
selectedRow={this.state.selectedRow}
|
||||
columns={columns13}
|
||||
data={this.state.data13}
|
||||
multiSelect={multiObj}
|
||||
sort={sortObj}
|
||||
getSelectedDataFunc={this.getSelectedDataFunc}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default Demo13;
|
||||
|
|
@ -1,314 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 编辑态表格
|
||||
* @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）
|
||||
*
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
import Table from "../../src";
|
||||
import Animate from "bee-animate";
|
||||
import Tooltip from "bee-tooltip";
|
||||
import Button from "bee-button";
|
||||
import Form from "bee-form";
|
||||
import Icon from "bee-icon";
|
||||
import Input from "bee-form-control";
|
||||
import Checkbox from "bee-checkbox";
|
||||
import Datepicker from "bee-datepicker";
|
||||
import Select from "bee-select";
|
||||
import renderInput from "../../build/render/InputRender.js";
|
||||
import renderDate from "../../build/render/DateRender.js";
|
||||
import renderSelect from "../../build/render/SelectRender.js";
|
||||
|
||||
const InputRender = renderInput(Form, Input, Icon);
|
||||
const DateRender = renderDate(Datepicker, Icon);
|
||||
const SelectRender = renderSelect(Select, Icon);
|
||||
|
||||
const format = "YYYY-MM-DD";
|
||||
const format2 = "YYYY-MM";
|
||||
const format3 = "YYYY-MM-DD HH:mm:ss";
|
||||
|
||||
const dateInputPlaceholder = "选择日期";
|
||||
const dateInputPlaceholder2 = "选择年月";
|
||||
const dataSource = [
|
||||
{
|
||||
key: "boyuzhou",
|
||||
value: "jack"
|
||||
},
|
||||
{
|
||||
key: "renhualiu",
|
||||
value: "lucy"
|
||||
},
|
||||
{
|
||||
key: "yuzhao",
|
||||
value: "yiminghe"
|
||||
}
|
||||
];
|
||||
class Demo14 extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
dataSource: [
|
||||
{
|
||||
key: "0",
|
||||
name: "沉鱼",
|
||||
number: "10",
|
||||
age: "y",
|
||||
address: "jack",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
},
|
||||
{
|
||||
key: "1",
|
||||
name: "落雁",
|
||||
number: "100",
|
||||
age: "y",
|
||||
address: "lucy",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
name: "闭月",
|
||||
number: "1000",
|
||||
age: "n",
|
||||
address: "lucy",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
name: "羞花",
|
||||
number: "9999",
|
||||
age: "y",
|
||||
address: "lucy",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
}
|
||||
],
|
||||
count: 4
|
||||
};
|
||||
this.columns = [
|
||||
{
|
||||
title: "普通输入",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
width: "150px",
|
||||
render: (text, record, index) => (
|
||||
<InputRender
|
||||
name="name"
|
||||
placeholder="请输入姓名"
|
||||
value={text}
|
||||
isclickTrigger={true}
|
||||
check={this.check}
|
||||
onChange={this.onInputChange(index, "name")}
|
||||
isRequire={true}
|
||||
method="blur"
|
||||
errorMessage={
|
||||
<Tooltip overlay={"错误提示"}>
|
||||
<Icon type="uf-exc-c" className="" />
|
||||
</Tooltip>
|
||||
}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "货币输入",
|
||||
dataIndex: "number",
|
||||
key: "number",
|
||||
width: "150px",
|
||||
render: (text, record, index) => (
|
||||
<InputRender
|
||||
format="Currency"
|
||||
name="number"
|
||||
placeholder="请输入货币"
|
||||
value={text}
|
||||
isclickTrigger={true}
|
||||
check={this.check}
|
||||
onChange={this.onInputChange(index, "number")}
|
||||
isRequire={true}
|
||||
method="blur"
|
||||
errorMessage={
|
||||
<Tooltip overlay={"错误提示"}>
|
||||
<Icon type="uf-exc-c" className="" />
|
||||
</Tooltip>
|
||||
}
|
||||
reg={/^[0-9]+$/}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "复选",
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
width: "100px",
|
||||
render: (text, record, index) => (
|
||||
<Checkbox
|
||||
checked={record.age}
|
||||
onChange={this.onCheckChange(index, "age")}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "下拉框",
|
||||
dataIndex: "address",
|
||||
key: "address",
|
||||
width: "200px",
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<SelectRender
|
||||
dataSource={dataSource}
|
||||
isclickTrigger={true}
|
||||
value={text}
|
||||
onChange={this.onSelectChange(index, "address")}
|
||||
>
|
||||
<Option value="jack">boyuzhou</Option>
|
||||
<Option value="lucy">renhualiu</Option>
|
||||
<Option value="disabled" disabled>
|
||||
Disabled
|
||||
</Option>
|
||||
<Option value="yiminghe">yuzhao</Option>
|
||||
</SelectRender>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "年月日",
|
||||
dataIndex: "datepicker",
|
||||
key: "datepicker",
|
||||
width: "200px",
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<DateRender
|
||||
value={text}
|
||||
isclickTrigger={true}
|
||||
format={format}
|
||||
onSelect={this.onDateSelect}
|
||||
onChange={this.onDateChange}
|
||||
placeholder={dateInputPlaceholder}
|
||||
/>
|
||||
);
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "年月",
|
||||
dataIndex: "MonthPicker",
|
||||
key: "MonthPicker",
|
||||
width: "200px",
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<DateRender
|
||||
value={text}
|
||||
type="MonthPicker"
|
||||
isclickTrigger={true}
|
||||
format={format2}
|
||||
onSelect={this.onSelect}
|
||||
onChange={this.onChange}
|
||||
placeholder={dateInputPlaceholder2}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
check = (flag, obj) => {
|
||||
console.log(flag);
|
||||
console.log(obj);
|
||||
};
|
||||
|
||||
onInputChange = (index, key) => {
|
||||
return value => {
|
||||
const dataSource = [...this.state.dataSource];
|
||||
dataSource[index][key] = value;
|
||||
this.setState({ dataSource });
|
||||
};
|
||||
};
|
||||
onCheckChange = (index, key) => {
|
||||
return value => {
|
||||
const dataSource = [...this.state.dataSource];
|
||||
dataSource[index][key] = value;
|
||||
this.setState({ dataSource });
|
||||
};
|
||||
};
|
||||
onSelectChange = (index, key) => {
|
||||
return value => {
|
||||
console.log(`selected ${value}`);
|
||||
const dataSource = [...this.state.dataSource];
|
||||
dataSource[index][key] = value;
|
||||
this.setState({ dataSource });
|
||||
};
|
||||
};
|
||||
onDateChange = d => {
|
||||
console.log(d);
|
||||
};
|
||||
onDateSelect = d => {
|
||||
console.log(d);
|
||||
};
|
||||
onDelete = index => {
|
||||
return () => {
|
||||
const dataSource = [...this.state.dataSource];
|
||||
dataSource.splice(index, 1);
|
||||
this.setState({ dataSource });
|
||||
};
|
||||
};
|
||||
handleAdd = () => {
|
||||
const { count, dataSource } = this.state;
|
||||
const newData = {
|
||||
key: count,
|
||||
name: `凤姐 ${count}`,
|
||||
age: 32,
|
||||
address: "jack",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
};
|
||||
this.setState({
|
||||
dataSource: [...dataSource, newData],
|
||||
count: count + 1
|
||||
});
|
||||
};
|
||||
|
||||
getBodyWrapper = body => {
|
||||
return (
|
||||
<Animate
|
||||
transitionName="move"
|
||||
component="tbody"
|
||||
className={body.props.className}
|
||||
>
|
||||
{body.props.children}
|
||||
</Animate>
|
||||
);
|
||||
};
|
||||
getData = () => {
|
||||
console.log(this.state.dataSource);
|
||||
};
|
||||
render() {
|
||||
const { dataSource } = this.state;
|
||||
const columns = this.columns;
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
className="editable-add-btn"
|
||||
type="ghost"
|
||||
onClick={this.handleAdd}
|
||||
>
|
||||
添加一行
|
||||
</Button>
|
||||
<Button
|
||||
style={{marginLeft:"5px"}}
|
||||
className="editable-add-btn"
|
||||
type="ghost"
|
||||
onClick={this.getData}
|
||||
>
|
||||
获取数据
|
||||
</Button>
|
||||
<Table
|
||||
data={dataSource}
|
||||
columns={columns}
|
||||
getBodyWrapper={this.getBodyWrapper}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo14;
|
||||
|
|
@ -1,122 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 表格行/列合并
|
||||
* @description 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。
|
||||
*
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
|
||||
const renderContent = (value, row, index) => {
|
||||
const obj = {
|
||||
children: value,
|
||||
props: {},
|
||||
};
|
||||
if (index === 4) {
|
||||
obj.props.colSpan = 0;
|
||||
}
|
||||
return obj;
|
||||
};
|
||||
|
||||
const columns = [{
|
||||
title: 'Name',
|
||||
key: "name",
|
||||
dataIndex: 'name',
|
||||
render: (text, row, index) => {
|
||||
if (index < 4) {
|
||||
return <a href="#">{text}</a>;
|
||||
}
|
||||
return {
|
||||
children: <a href="#">{text}</a>,
|
||||
props: {
|
||||
colSpan: 5,
|
||||
},
|
||||
};
|
||||
},
|
||||
}, {
|
||||
title: 'Age',
|
||||
key: "Age",
|
||||
dataIndex: 'age',
|
||||
render: renderContent,
|
||||
}, {
|
||||
title: 'Home phone',
|
||||
colSpan: 2,
|
||||
key: "tel",
|
||||
dataIndex: 'tel',
|
||||
render: (value, row, index) => {
|
||||
const obj = {
|
||||
children: value,
|
||||
props: {},
|
||||
};
|
||||
if (index === 2) {
|
||||
obj.props.rowSpan = 2;
|
||||
}
|
||||
if (index === 3) {
|
||||
obj.props.rowSpan = 0;
|
||||
}
|
||||
if (index === 4) {
|
||||
obj.props.colSpan = 0;
|
||||
}
|
||||
return obj;
|
||||
},
|
||||
}, {
|
||||
title: 'Phone',
|
||||
colSpan: 0,
|
||||
key: "phone",
|
||||
dataIndex: 'phone',
|
||||
render: renderContent,
|
||||
}, {
|
||||
title: 'Address',
|
||||
key: "address",
|
||||
dataIndex: 'address',
|
||||
render: renderContent,
|
||||
}];
|
||||
|
||||
const data = [{
|
||||
key: '1',
|
||||
name: 'John Brown',
|
||||
age: 32,
|
||||
tel: '0571-22098909',
|
||||
phone: 18889898989,
|
||||
address: 'New York No. 1 Lake Park',
|
||||
}, {
|
||||
key: '2',
|
||||
name: 'Jim Green',
|
||||
tel: '0571-22098333',
|
||||
phone: 18889898888,
|
||||
age: 42,
|
||||
address: 'London No. 1 Lake Park',
|
||||
}, {
|
||||
key: '3',
|
||||
name: 'Joe Black',
|
||||
age: 32,
|
||||
tel: '0575-22098909',
|
||||
phone: 18900010002,
|
||||
address: 'Sidney No. 1 Lake Park',
|
||||
}, {
|
||||
key: '4',
|
||||
name: 'Jim Red',
|
||||
age: 18,
|
||||
tel: '0575-22098909',
|
||||
phone: 18900010002,
|
||||
address: 'London No. 2 Lake Park',
|
||||
}, {
|
||||
key: '5',
|
||||
name: 'Jake White',
|
||||
age: 18,
|
||||
tel: '0575-22098909',
|
||||
phone: 18900010002,
|
||||
address: 'Dublin No. 2 Lake Park',
|
||||
}];
|
||||
|
||||
class Demo15 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Table columns={columns} data={data}/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default Demo15;
|
||||
|
|
@ -1,130 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 嵌套子表格
|
||||
* @description 通过expandedRowRender参数来实现子表格
|
||||
*
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns16 = [
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width:200,
|
||||
render(text, record, index) {
|
||||
return (
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
alert("这是第" + index + "列，内容为:" + text);
|
||||
}}
|
||||
>
|
||||
一些操作
|
||||
</a>
|
||||
);
|
||||
}
|
||||
},
|
||||
{ title: "用户名", dataIndex: "a", key: "a", width: 250 },
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||
|
||||
];
|
||||
const columns17 = [
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width:200,
|
||||
render(text, record, index) {
|
||||
return (
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
alert("这是第" + index + "列，内容为:" + text);
|
||||
}}
|
||||
>
|
||||
一些操作
|
||||
</a>
|
||||
);
|
||||
}
|
||||
},
|
||||
{ title: "用户名", dataIndex: "a", key: "a", width: 100 },
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||
|
||||
];
|
||||
|
||||
const data16 = [
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
||||
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" },
|
||||
{ a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
|
||||
];
|
||||
|
||||
|
||||
class Demo16 extends Component {
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state={
|
||||
data_obj:{}
|
||||
}
|
||||
}
|
||||
expandedRowRender = (record, index, indent) => {
|
||||
let height = 42 * (this.state.data_obj[record.key].length+ 2);
|
||||
|
||||
return (
|
||||
<Table
|
||||
columns={columns17}
|
||||
style={{height:height}}
|
||||
data={this.state.data_obj[record.key]}
|
||||
|
||||
/>
|
||||
);
|
||||
};
|
||||
getData=(expanded, record)=>{
|
||||
//当点击展开的时候才去请求数据
|
||||
let new_obj = Object.assign({},this.state.data_obj);
|
||||
if(expanded){
|
||||
if(record.key==='1'){
|
||||
new_obj[record.key] = [
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
||||
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" }
|
||||
]
|
||||
this.setState({
|
||||
data_obj:new_obj
|
||||
})
|
||||
}else{
|
||||
new_obj[record.key] = [
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" }
|
||||
]
|
||||
this.setState({
|
||||
data_obj:new_obj
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
haveExpandIcon=(record, index)=>{
|
||||
//控制是否显示行展开icon，该参数只有在和expandedRowRender同时使用才生效
|
||||
if(index == 0){
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns16}
|
||||
data={data16}
|
||||
onExpand={this.getData}
|
||||
expandedRowRender={this.expandedRowRender}
|
||||
scroll={{x:true}}
|
||||
title={currentData => <div>标题: 这是一个标题</div>}
|
||||
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo16;
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title loading属性指定表格是否加载中
|
||||
* @description loading可以传boolean或者obj对象，obj为bee-loading组件的参数类型
|
||||
*
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
import Button from "bee-button";
|
||||
|
||||
const columns17 = [
|
||||
{ title: "用户名", dataIndex: "a", key: "a", width: 100 },
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
render(text, record, index) {
|
||||
return (
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
alert('这是第'+index+'列，内容为:'+text);
|
||||
}}
|
||||
>
|
||||
一些操作
|
||||
</a>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
const data17 = [
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
||||
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" },
|
||||
{ a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
|
||||
];
|
||||
|
||||
class Demo17 extends Component {
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
loading : true
|
||||
}
|
||||
}
|
||||
changeLoading = () => {
|
||||
this.setState({
|
||||
loading : !this.state.loading
|
||||
})
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
className="editable-add-btn"
|
||||
type="ghost"
|
||||
onClick={this.changeLoading}
|
||||
>
|
||||
切换loading
|
||||
</Button>
|
||||
<Table
|
||||
columns={columns17}
|
||||
data={data17}
|
||||
title={currentData => <div>标题: 这是一个标题</div>}
|
||||
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
||||
// loading={this.state.loading}或者是boolean
|
||||
loading={{show:this.state.loading,loadingType:"line"}}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo17;
|
||||
|
|
@ -1,145 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 合并标题后的合计,且支持多字段统计
|
||||
* @description 合计（通过使用的封装好的功能方法实现复杂功能，简单易用！）
|
||||
*
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Button from "bee-button";
|
||||
import Table from "../../src";
|
||||
import sum from "../../src/lib/sum.js";
|
||||
|
||||
let ComplexTable = sum(Table);
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "Name",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
width: 100,
|
||||
fixed: "left"
|
||||
},
|
||||
{
|
||||
title: "Other",
|
||||
children: [
|
||||
{
|
||||
title: "Age",
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
width: 200,
|
||||
sumCol: true,
|
||||
},
|
||||
{
|
||||
title: "Address",
|
||||
children: [
|
||||
{
|
||||
title: "Street",
|
||||
dataIndex: "street",
|
||||
key: "street",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "Block",
|
||||
children: [
|
||||
{
|
||||
title: "Building",
|
||||
dataIndex: "building",
|
||||
key: "building",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "Door No.",
|
||||
dataIndex: "number",
|
||||
key: "number",
|
||||
// width: 100,
|
||||
sumCol: true,
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
// {
|
||||
// title: "Company",
|
||||
// children: [
|
||||
// {
|
||||
// title: "Company Address",
|
||||
// dataIndex: "companyAddress",
|
||||
// key: "companyAddress",
|
||||
// width: 100,
|
||||
// },
|
||||
// {
|
||||
// title: "Company Name",
|
||||
// dataIndex: "companyName",
|
||||
// key: "companyName",
|
||||
// width: 100,
|
||||
// }
|
||||
// ]
|
||||
// },
|
||||
{
|
||||
title: "Gender",
|
||||
dataIndex: "gender",
|
||||
key: "gender",
|
||||
width: 80,
|
||||
fixed: "right"
|
||||
}
|
||||
];
|
||||
|
||||
function getData(){
|
||||
const data = [];
|
||||
for (let i = 0; i < 5; i++) {
|
||||
data.push({
|
||||
key: i,
|
||||
name: "John Brown"+i,
|
||||
age: i + Math.floor(Math.random()*10),
|
||||
street: "Lake Park",
|
||||
building: "C",
|
||||
number: 20 * Math.floor(Math.random()*10),
|
||||
companyAddress: "Lake Street 42",
|
||||
companyName: "SoftLake Co",
|
||||
gender: "M"
|
||||
});
|
||||
}
|
||||
return data;
|
||||
}
|
||||
|
||||
class Demo18 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: getData()
|
||||
};
|
||||
}
|
||||
|
||||
changeData = ()=>{
|
||||
this.setState({
|
||||
data: getData()
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
const {data} = this.state;
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
className="editable-add-btn"
|
||||
type="ghost"
|
||||
onClick={this.changeData}
|
||||
>
|
||||
动态设置数据源
|
||||
</Button>
|
||||
|
||||
<ComplexTable
|
||||
columns={columns}
|
||||
data={data}
|
||||
bordered
|
||||
// scroll={{ x: "130%", y: 140 }}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default Demo18;
|
||||
|
|
@ -1,227 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 编辑态表格
|
||||
* @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）
|
||||
*
|
||||
*/
|
||||
|
||||
import Button from "bee-button";
|
||||
import React from "react";
|
||||
import Table from "../../src";
|
||||
import Animate from "bee-animate";
|
||||
import Tooltip from "bee-tooltip";
|
||||
import Icon from "bee-icon";
|
||||
import Input from "bee-form-control";
|
||||
import Form from "bee-form";
|
||||
import Select from "bee-select";
|
||||
import renderInput from "../../build/render/InputRender.js";
|
||||
import renderSelect from "../../build/render/SelectRender.js";
|
||||
|
||||
const InputRender = renderInput(Form, Input, Icon);
|
||||
const SelectRender = renderSelect(Select, Icon);
|
||||
|
||||
const Option = Select.Option;
|
||||
|
||||
const dataSource = [
|
||||
{
|
||||
key: "boyuzhou",
|
||||
value: "jack"
|
||||
},
|
||||
{
|
||||
key: "renhualiu",
|
||||
value: "lucy"
|
||||
},
|
||||
{
|
||||
key: "yuzhao",
|
||||
value: "yiminghe"
|
||||
}
|
||||
];
|
||||
class Demo19 extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
dataSource: [
|
||||
{
|
||||
key: "0",
|
||||
name: "沉鱼",
|
||||
number: "10",
|
||||
age: "y",
|
||||
address: "jack",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
},
|
||||
{
|
||||
key: "1",
|
||||
name: "落雁",
|
||||
number: "100",
|
||||
age: "y",
|
||||
address: "lucy",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
name: "闭月",
|
||||
number: "1000",
|
||||
age: "n",
|
||||
address: "lucy",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
name: "羞花",
|
||||
number: "9999",
|
||||
age: "y",
|
||||
address: "lucy",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
}
|
||||
],
|
||||
count: 4
|
||||
};
|
||||
this.columns = [
|
||||
{
|
||||
title: "货币输入",
|
||||
dataIndex: "number",
|
||||
key: "number",
|
||||
width: "150px",
|
||||
render: (text, record, index) => (
|
||||
<InputRender
|
||||
format="Currency"
|
||||
name="name"
|
||||
placeholder="请输入姓名"
|
||||
value={text}
|
||||
isclickTrigger={true}
|
||||
check={this.check}
|
||||
onChange={this.onInputChange(index, "name")}
|
||||
isRequire={true}
|
||||
method="blur"
|
||||
errorMessage={
|
||||
<Tooltip overlay={"错误提示"}>
|
||||
<Icon type="uf-exc-c" className="" />
|
||||
</Tooltip>
|
||||
}
|
||||
reg={/^[0-9]+$/}
|
||||
/>
|
||||
)
|
||||
},
|
||||
|
||||
{
|
||||
title:(<div>下拉框的div</div>),
|
||||
dataIndex: "address",
|
||||
key: "address",
|
||||
width: "200px",
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<SelectRender
|
||||
dataSource={dataSource}
|
||||
isclickTrigger={true}
|
||||
value={text}
|
||||
onChange={this.onSelectChange(index, "address")}
|
||||
onFocus={this.handFocus}
|
||||
onBlur={this.onBlur}
|
||||
autofocus
|
||||
>
|
||||
<Option value="jack">boyuzhou</Option>
|
||||
<Option value="lucy">renhualiu</Option>
|
||||
<Option value="disabled" disabled>
|
||||
Disabled
|
||||
</Option>
|
||||
<Option value="yiminghe">yuzhao</Option>
|
||||
</SelectRender>
|
||||
);
|
||||
}
|
||||
}
|
||||
];
|
||||
}
|
||||
check = (flag, obj) => {
|
||||
console.log(flag);
|
||||
console.log(obj);
|
||||
};
|
||||
|
||||
handFocus = (value,e) => {
|
||||
console.log(value+` 获取焦点事件`);
|
||||
};
|
||||
onBlur = (value,e) => {
|
||||
console.log(value+` onBlur`);
|
||||
};
|
||||
|
||||
onInputChange = (index, key) => {
|
||||
return value => {
|
||||
const dataSource = [...this.state.dataSource];
|
||||
dataSource[index][key] = value;
|
||||
this.setState({ dataSource });
|
||||
};
|
||||
};
|
||||
|
||||
onSelectChange = (index, key) => {
|
||||
return value => {
|
||||
console.log(`selected ${value}`);
|
||||
const dataSource = [...this.state.dataSource];
|
||||
dataSource[index][key] = value;
|
||||
this.setState({ dataSource });
|
||||
};
|
||||
};
|
||||
|
||||
handleAdd = () => {
|
||||
const { count, dataSource } = this.state;
|
||||
const newData = {
|
||||
key: count,
|
||||
name: `凤姐 ${count}`,
|
||||
age: 32,
|
||||
address: "jack",
|
||||
datepicker: "2017-06-12",
|
||||
MonthPicker: "2017-02"
|
||||
};
|
||||
this.setState({
|
||||
dataSource: [...dataSource, newData],
|
||||
count: count + 1
|
||||
});
|
||||
};
|
||||
|
||||
getBodyWrapper = body => {
|
||||
return (
|
||||
<Animate
|
||||
transitionName="move"
|
||||
component="tbody"
|
||||
className={body.props.className}
|
||||
>
|
||||
{body.props.children}
|
||||
</Animate>
|
||||
);
|
||||
};
|
||||
getData = () => {
|
||||
console.log(this.state.dataSource);
|
||||
};
|
||||
render() {
|
||||
const { dataSource } = this.state;
|
||||
const columns = this.columns;
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
className="editable-add-btn"
|
||||
type="ghost"
|
||||
onClick={this.handleAdd}
|
||||
>
|
||||
添加一行
|
||||
</Button>
|
||||
<Button
|
||||
style={{marginLeft:"5px"}}
|
||||
className="editable-add-btn"
|
||||
type="ghost"
|
||||
onClick={this.getData}
|
||||
>
|
||||
获取数据
|
||||
</Button>
|
||||
<Table
|
||||
data={dataSource}
|
||||
columns={columns}
|
||||
getBodyWrapper={this.getBodyWrapper}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo19;
|
||||
|
|
@ -1,202 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 增删改表格
|
||||
* @description 这是带有增删改功能的表格（此编辑功能未使用render组件）
|
||||
*
|
||||
*/
|
||||
|
||||
import Button from "bee-button";
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
import Animate from "bee-animate";
|
||||
import Icon from "bee-icon";
|
||||
import Input from "bee-form-control";
|
||||
import Popconfirm from "bee-popconfirm";
|
||||
|
||||
class EditableCell extends React.Component {
|
||||
state = {
|
||||
value: this.props.value,
|
||||
editable: false
|
||||
};
|
||||
handleChange = e => {
|
||||
const value = e;
|
||||
this.setState({ value });
|
||||
};
|
||||
check = () => {
|
||||
this.setState({ editable: false });
|
||||
if (this.props.onChange) {
|
||||
this.props.onChange(this.state.value);
|
||||
}
|
||||
};
|
||||
edit = () => {
|
||||
this.setState({ editable: true });
|
||||
};
|
||||
handleKeydown = event => {
|
||||
if (event.keyCode == 13) {
|
||||
this.check();
|
||||
}
|
||||
};
|
||||
render() {
|
||||
const { value, editable } = this.state;
|
||||
return (
|
||||
<div className="editable-cell">
|
||||
{editable ? (
|
||||
<div className="editable-cell-input-wrapper">
|
||||
<Input
|
||||
value={value}
|
||||
onChange={this.handleChange}
|
||||
onKeyDown={this.handleKeydown}
|
||||
/>
|
||||
<Icon
|
||||
type="uf-correct"
|
||||
className="editable-cell-icon-check"
|
||||
onClick={this.check}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<div className="editable-cell-text-wrapper">
|
||||
{value || " "}
|
||||
<Icon
|
||||
type="uf-pencil"
|
||||
className="editable-cell-icon"
|
||||
onClick={this.edit}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class Demo2 extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.columns = [
|
||||
{
|
||||
title: "姓名",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
width: "30%",
|
||||
render: (text, record, index) => (
|
||||
<EditableCell
|
||||
value={text}
|
||||
onChange={this.onCellChange(index, "name")}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "age",
|
||||
key: "age"
|
||||
},
|
||||
{
|
||||
title: "你懂的",
|
||||
dataIndex: "address",
|
||||
key: "address"
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "operation",
|
||||
key: "operation",
|
||||
render: (text, record, index) => {
|
||||
return this.state.dataSource.length > 1 ? (
|
||||
<Popconfirm content="确认删除?" id="aa" onClose={this.onDelete(index)}>
|
||||
<Icon type="uf-del" />
|
||||
</Popconfirm>
|
||||
) : null;
|
||||
}
|
||||
}
|
||||
];
|
||||
|
||||
this.state = {
|
||||
dataSource: [
|
||||
{
|
||||
key: "0",
|
||||
name: "沉鱼",
|
||||
age: "18",
|
||||
address: "96, 77, 89"
|
||||
},
|
||||
{
|
||||
key: "1",
|
||||
name: "落雁",
|
||||
age: "16",
|
||||
address: "90, 70, 80"
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
name: "闭月",
|
||||
age: "17",
|
||||
address: "80, 60, 80"
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
name: "羞花",
|
||||
age: "20",
|
||||
address: "120, 60, 90"
|
||||
}
|
||||
],
|
||||
count: 4
|
||||
};
|
||||
}
|
||||
onCellChange = (index, key) => {
|
||||
return value => {
|
||||
const dataSource = [...this.state.dataSource];
|
||||
dataSource[index][key] = value;
|
||||
this.setState({ dataSource });
|
||||
};
|
||||
};
|
||||
onDelete = (index) => {
|
||||
return () => {
|
||||
const dataSource = [...this.state.dataSource];
|
||||
dataSource.splice(index, 1);
|
||||
this.setState({ dataSource });
|
||||
}
|
||||
};
|
||||
handleAdd = () => {
|
||||
const { count, dataSource } = this.state;
|
||||
const newData = {
|
||||
key: count,
|
||||
name: `凤姐 ${count}`,
|
||||
age: 32,
|
||||
address: `100 100 100`
|
||||
};
|
||||
this.setState({
|
||||
dataSource: [...dataSource, newData],
|
||||
count: count + 1
|
||||
});
|
||||
};
|
||||
|
||||
getBodyWrapper = body => {
|
||||
return (
|
||||
<Animate
|
||||
transitionName="move"
|
||||
component="tbody"
|
||||
className={body.props.className}
|
||||
>
|
||||
{body.props.children}
|
||||
</Animate>
|
||||
);
|
||||
};
|
||||
render() {
|
||||
const { dataSource } = this.state;
|
||||
const columns = this.columns;
|
||||
return (
|
||||
<div>
|
||||
<Button
|
||||
className="editable-add-btn"
|
||||
type="ghost"
|
||||
onClick={this.handleAdd}
|
||||
>
|
||||
添加
|
||||
</Button>
|
||||
<Table
|
||||
data={dataSource}
|
||||
columns={columns}
|
||||
getBodyWrapper={this.getBodyWrapper}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo2;
|
||||
|
|
@ -1,58 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 简单表格选中行的背景色、表头表尾
|
||||
* @description
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Button from "bee-button";
|
||||
import Tooltip from "bee-tooltip";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns = [
|
||||
{ title: "用户名", dataIndex: "a", key: "a", width:80 , className:"rowClassName"},
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "令狐冲", b: "男", c: 41, key: "1" },
|
||||
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
|
||||
{ a: "郭靖", b: "男", c: 25, key: "3" }
|
||||
];
|
||||
|
||||
class Demo26 extends Component {
|
||||
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data,
|
||||
selectedRowIndex: 0
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
rowClassName={(record,index,indent)=>{
|
||||
if (this.state.selectedRowIndex == index) {
|
||||
return 'selected';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}}
|
||||
onRowClick={(record,index,indent)=>{
|
||||
this.setState({
|
||||
selectedRowIndex: index
|
||||
});
|
||||
}}
|
||||
title={currentData => <div>标题: 这是一个标题</div>}
|
||||
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo26;
|
||||
|
|
@ -1,109 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 根据列进行过滤
|
||||
* @description 点击表格右侧按钮，进行表格列的数据过滤。可以自定义设置显示某列，通过ifshow属性控制，默认为true都显示。afterFilter为过滤之后的回调函数
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
import filterColumn from '../../src/lib/filterColumn';
|
||||
import sum from '../../src/lib/sum';
|
||||
import Icon from "bee-icon";
|
||||
import Checkbox from 'bee-checkbox';
|
||||
import Popover from 'bee-popover';
|
||||
|
||||
const data21 = [
|
||||
{ a: "杨过", b: "男", c: 30,d:'内行',e: "操作", key: "2" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠',e: "操作", key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠',e: "操作", key: "3" }
|
||||
];
|
||||
|
||||
const FilterColumnTable = filterColumn(Table, Popover, Icon);
|
||||
|
||||
const defaultProps21 = {
|
||||
prefixCls: "bee-table"
|
||||
};
|
||||
|
||||
class Demo21 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state ={
|
||||
columns21: [
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "a",
|
||||
key: "a"
|
||||
// width: 100
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
// width: 100
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
ifshow:false,
|
||||
// width: 200,
|
||||
// sumCol: true,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d"
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "e",
|
||||
key: "e",
|
||||
render(text, record, index){
|
||||
return (
|
||||
<div title={text} >
|
||||
<a href="#"
|
||||
tooltip={text}
|
||||
onClick={() => {
|
||||
alert('这是第'+index+'列，内容为:'+text);
|
||||
}}
|
||||
// style={{
|
||||
// position: 'absolute',
|
||||
// top: 5,
|
||||
// left: 0
|
||||
// }}
|
||||
>
|
||||
一些操作
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
]};
|
||||
}
|
||||
afterFilter = (optData,columns)=>{
|
||||
if(optData.key == 'b'){
|
||||
if(optData.ifshow){
|
||||
columns[2].ifshow = false;
|
||||
}else{
|
||||
columns[2].ifshow = true;
|
||||
}
|
||||
this.setState({
|
||||
columns21 :columns,
|
||||
showFilterPopover:true
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
|
||||
return <FilterColumnTable columns={this.state.columns21} data={data21} afterFilter={this.afterFilter} showFilterPopover={this.state.showFilterPopover}/>;
|
||||
}
|
||||
}
|
||||
Demo21.defaultProps = defaultProps21;
|
||||
|
||||
|
||||
export default Demo21;
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 列的拖拽，交换表头的顺序
|
||||
* @description 点击列的表头，进行左右拖拽
|
||||
*/
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
import dragColumn from '../../src/lib/dragColumn';
|
||||
|
||||
import Icon from "bee-icon";
|
||||
|
||||
const columns22 = [
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 200,
|
||||
sumCol: true,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 200,
|
||||
}
|
||||
];
|
||||
|
||||
const data22 = [
|
||||
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
|
||||
];
|
||||
|
||||
const DragColumnTable = dragColumn(Table);
|
||||
|
||||
const defaultProps22 = {
|
||||
prefixCls: "bee-table"
|
||||
};
|
||||
|
||||
class Demo22 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
render() {
|
||||
return <DragColumnTable columns={columns22} data={data22} bordered
|
||||
|
||||
draggable={true}
|
||||
/>;
|
||||
}
|
||||
}
|
||||
Demo22.defaultProps = defaultProps22;
|
||||
|
||||
|
||||
export default Demo22;
|
||||
|
|
@ -1,181 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 动态设置固、取消固定列
|
||||
* @description 动态设置固、取消固定列
|
||||
* @description 动态固定列设置 一个table动态设置一个方向【fixed: "left"，fixed: "right"】。
|
||||
*
|
||||
*/
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
import Icon from 'bee-icon';
|
||||
import Menu from 'bee-menus';
|
||||
import Dropdown from 'bee-dropdown';
|
||||
|
||||
|
||||
const { Item } = Menu;
|
||||
// const columns24 = [
|
||||
// {
|
||||
// title: "Full Name",
|
||||
// width: 100,
|
||||
// dataIndex: "name",
|
||||
// key: "name",
|
||||
// fixed: "left",
|
||||
// },
|
||||
// { title: "Age", width: 100, dataIndex: "age", key: "age", fixed: "left" },
|
||||
// { title: "Column 1", dataIndex: "address", key: "1" },
|
||||
// { title: "Column 2", dataIndex: "address2", key: "2" },
|
||||
// { title: "Column 3", dataIndex: "address", key: "3" },
|
||||
// { title: "Column 4", dataIndex: "address", key: "4" },
|
||||
// { title: "Column 24", dataIndex: "address", key: "24" },
|
||||
// { title: "Column 6", dataIndex: "address", key: "6" },
|
||||
// { title: "Column 7", dataIndex: "address", key: "7" },
|
||||
// { title: "Column 8", dataIndex: "address", key: "8" }
|
||||
// ];
|
||||
|
||||
|
||||
const columns24 = [
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: 100,
|
||||
fixed: "left",
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 100,
|
||||
fixed: "left",
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 150
|
||||
},
|
||||
{
|
||||
title: "对手",
|
||||
dataIndex: "e",
|
||||
key: "e",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "帮派",
|
||||
dataIndex: "f",
|
||||
key: "f",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "武功类型",
|
||||
dataIndex: "g",
|
||||
key: "g",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "师傅",
|
||||
dataIndex: "k",
|
||||
key: "k",
|
||||
// width: 100
|
||||
},
|
||||
{
|
||||
title: "攻击系数",
|
||||
dataIndex: "h",
|
||||
key: "h",
|
||||
width: 100
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
const data24 = [
|
||||
{ a: "杨过", b: "男", c: 30,d:'内行',e:'黄荣',f:'古墓派',g:'剑术',k:'小龙女',h:'0.5', key: "1" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'剑客',e:'自己',f:'无',g:'剑术',k:'无',h:'0.5', key: "2" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠',e:'黄荣',f:'朝廷',g:'内容',k:'外侵势力',h:'0.6', key: "3" }
|
||||
];
|
||||
|
||||
class Demo24 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
// let columns = [];
|
||||
// Object.assign(columns,columns24);
|
||||
// columns.forEach(da=>da.onHeadCellClick=this.onHeadCellClick);
|
||||
this.state = {
|
||||
columns:columns24
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
onSelect = ({key,item})=>{
|
||||
console.log(`${key} selected`); //获取key
|
||||
let currentObject = item.props.data; //获取选中对象的数据
|
||||
let {columns} = this.state;
|
||||
let fixedCols = [];
|
||||
let nonColums = [];
|
||||
columns.find(da=>{
|
||||
if(da.key == key){
|
||||
da.fixed?delete da.fixed:da.fixed = 'left';
|
||||
}
|
||||
da.fixed?fixedCols.push(da):nonColums.push(da);
|
||||
});
|
||||
|
||||
columns = [...fixedCols,...nonColums]
|
||||
|
||||
this.setState({
|
||||
columns
|
||||
});
|
||||
}
|
||||
//表头增加下拉菜单
|
||||
renderColumnsDropdown(columns) {
|
||||
const icon ='uf-arrow-down';
|
||||
|
||||
return columns.map((originColumn,index) => {
|
||||
let column = Object.assign({}, originColumn);
|
||||
let menuInfo = [], title='锁定';
|
||||
if(originColumn.fixed){
|
||||
title = '解锁'
|
||||
}
|
||||
menuInfo.push({
|
||||
info:title,
|
||||
key:originColumn.key,
|
||||
index:index
|
||||
});
|
||||
const menu = (
|
||||
<Menu onSelect={this.onSelect} >{
|
||||
menuInfo.map(da=>{ return <Item key={da.key} data={da} >{da.info}</Item> })
|
||||
}
|
||||
</Menu>)
|
||||
column.title = (
|
||||
<span className='title-con drop-menu'>
|
||||
{column.title}
|
||||
<Dropdown
|
||||
trigger={['click']}
|
||||
overlay={menu}
|
||||
animation="slide-up"
|
||||
>
|
||||
<Icon type={icon}/>
|
||||
</Dropdown>
|
||||
|
||||
</span>
|
||||
);
|
||||
return column;
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
let {columns} = this.state;
|
||||
columns = this.renderColumnsDropdown(columns);
|
||||
return <div className="demo24">
|
||||
<Table columns={columns} data={data24} scroll={{ x: "110%", y: 240 }}/>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo24;
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
th{
|
||||
.drop-menu{
|
||||
.uf{
|
||||
font-size: 12px;
|
||||
visibility: hidden;
|
||||
margin-left: 15px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
&:hover{
|
||||
.uf{
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
@ -1,221 +0,0 @@
|
|||
/**
|
||||
* @title 根据列进行过滤、拖拽交换列综合使用案例
|
||||
* @description 新增属性【checkMinSize 当前表格显示最少列数 】 1. 当所有列都设置了width属性后，需要给table增加checkMinSize属性 2. 所有列不设置width。
|
||||
*/
|
||||
|
||||
/**注：
|
||||
* 在使用过滤列的时候，如果每一列都设置了width属性，勾选的时候回出现重复列问题。当表格的宽度小于合计宽度的时候，就会出现此问题。
|
||||
* 必须有个别列不设置width属性，即可避免此问题。
|
||||
*/
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
import multiSelect from '../../src/lib/multiSelect';
|
||||
import filterColumn from '../../src/lib/filterColumn';
|
||||
import dragColumn from "../../src/lib/dragColumn";
|
||||
|
||||
import sum from '../../src/lib/sum';
|
||||
import Icon from "bee-icon";
|
||||
import Checkbox from 'bee-checkbox';
|
||||
import Popover from 'bee-popover';
|
||||
|
||||
//Cloumns1
|
||||
function getCloumns(){
|
||||
const column = [
|
||||
{
|
||||
title: "序号",
|
||||
dataIndex: "index",
|
||||
key: "index",
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: "订单编号",
|
||||
dataIndex: "orderCode",
|
||||
key: "orderCode",
|
||||
width: 100,
|
||||
},
|
||||
{
|
||||
title: "供应商名称",
|
||||
dataIndex: "supplierName",
|
||||
key: "supplierName",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "类型",
|
||||
dataIndex: "type_name",
|
||||
key: "type_name",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "采购组织",
|
||||
dataIndex: "purchasing",
|
||||
key: "purchasing",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "采购组",
|
||||
dataIndex: "purchasingGroup",
|
||||
key: "purchasingGroup",
|
||||
width: 300
|
||||
},
|
||||
{
|
||||
title: "凭证日期",
|
||||
dataIndex: "voucherDate",
|
||||
key: "voucherDate",
|
||||
width: 100,
|
||||
|
||||
},
|
||||
{
|
||||
title: "审批状态",
|
||||
dataIndex: "approvalState_name",
|
||||
key: "approvalState_name",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "确认状态",
|
||||
dataIndex: "confirmState_name",
|
||||
key: "confirmState_name",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "关闭状态",
|
||||
dataIndex: "closeState_name",
|
||||
key: "closeState_name",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width:100,
|
||||
fixed: "right",
|
||||
render(text, record, index) {
|
||||
return (
|
||||
<div className='operation-btn'>
|
||||
<a href="#"
|
||||
tooltip={text}
|
||||
onClick={() => {
|
||||
alert('这是第'+index+'列，内容为:'+text);
|
||||
}}
|
||||
>
|
||||
一些操作
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
}
|
||||
];
|
||||
return column;
|
||||
}
|
||||
|
||||
const dataList = [
|
||||
{
|
||||
index: 1,
|
||||
orderCode:"2343",
|
||||
supplierName: "xxx",
|
||||
type_name: "123",
|
||||
purchasing:'内行',
|
||||
purchasingGroup:"323",
|
||||
voucherDate:"kkkk",
|
||||
approvalState_name:"vvvv",
|
||||
confirmState_name:"aaaa",
|
||||
closeState_name:"vnnnnn",
|
||||
d:"操作",
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
index: 2,
|
||||
_checked:true,
|
||||
orderCode:"222",
|
||||
supplierName: "22xxx",
|
||||
type_name: "1223",
|
||||
purchasing:'内行2',
|
||||
purchasingGroup:"3223",
|
||||
voucherDate:"222kk",
|
||||
approvalState_name:"22vvvv",
|
||||
confirmState_name:"2aaaa",
|
||||
closeState_name:"2vnnnnn",
|
||||
d:"2操作",
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
index: 3,
|
||||
orderCode:"222",
|
||||
supplierName: "22xxx",
|
||||
_disabled:true,
|
||||
type_name: "1223",
|
||||
purchasing:'内行2',
|
||||
purchasingGroup:"3223",
|
||||
voucherDate:"222kk",
|
||||
approvalState_name:"22vvvv",
|
||||
confirmState_name:"2aaaa",
|
||||
closeState_name:"2vnnnnn",
|
||||
d:"3操作",
|
||||
key: "3"
|
||||
},
|
||||
{
|
||||
index: 4,
|
||||
orderCode:"222",
|
||||
supplierName: "22xxx",
|
||||
type_name: "1223",
|
||||
purchasing:'内行2',
|
||||
purchasingGroup:"3223",
|
||||
voucherDate:"222kk",
|
||||
approvalState_name:"22vvvv",
|
||||
confirmState_name:"2aaaa",
|
||||
closeState_name:"2vnnnnn",
|
||||
d:"4操作",
|
||||
key: "4"
|
||||
},
|
||||
]
|
||||
|
||||
const DragColumnTable = filterColumn(dragColumn(multiSelect(Table, Checkbox)),Popover);
|
||||
|
||||
const defaultProps25 = {
|
||||
prefixCls: "bee-table"
|
||||
};
|
||||
|
||||
class Demo25 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
getSelectedDataFunc=(data)=>{
|
||||
console.log("data",data);
|
||||
}
|
||||
|
||||
getCloumnsScroll=(columns)=>{
|
||||
let sum = 0;
|
||||
columns.forEach((da)=>{
|
||||
sum += da.width;
|
||||
})
|
||||
console.log("sum",sum);
|
||||
return (sum);
|
||||
}
|
||||
|
||||
selectedRow=(record, index)=>{
|
||||
|
||||
}
|
||||
|
||||
render() {
|
||||
let columns = getCloumns();
|
||||
|
||||
return <div className="demo25">
|
||||
<DragColumnTable
|
||||
columns={columns}
|
||||
data={dataList}
|
||||
getSelectedDataFunc={this.getSelectedDataFunc}
|
||||
bordered
|
||||
checkMinSize={7}
|
||||
draggable={true}
|
||||
multiSelect={{type: "checkbox"}}
|
||||
scroll={{x:"130%", y: 100}}
|
||||
selectedRow={this.selectedRow}
|
||||
// scroll={{x:this.getCloumnsScroll(columns), y: 150}}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
Demo25.defaultProps = defaultProps25;
|
||||
|
||||
|
||||
export default Demo25;
|
||||
|
|
@ -1,107 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 按条件和值过滤
|
||||
* @description 可以根据输入项目以及判断条件对表格内的数据进行过滤
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
|
||||
|
||||
const columns26 = [
|
||||
{ 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" }
|
||||
];
|
||||
|
||||
const data26 = [
|
||||
{
|
||||
key: "1",
|
||||
name: "John Brown",
|
||||
age: 32,
|
||||
date: "2018-09-19",
|
||||
address: "朝阳区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
date: "2018-09-18",
|
||||
address: "朝阳区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
date: "2018-09-18",
|
||||
address: "东城区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "4",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
date: "2018-09-18",
|
||||
address: "东城区",
|
||||
mark: "无"
|
||||
}, {
|
||||
key: "5",
|
||||
name: "John Brown",
|
||||
age: 32,
|
||||
date: "2018-09-18",
|
||||
address: "海淀区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "6",
|
||||
name: "Jim Green",
|
||||
age: 48,
|
||||
date: "2018-09-18",
|
||||
address: "海淀区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "7",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
date: "2018-09-18",
|
||||
address: "海淀区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "8",
|
||||
name: "Jim Green",
|
||||
age: 38,
|
||||
date: "2018-09-18",
|
||||
address: "海淀区",
|
||||
mark: "无"
|
||||
}
|
||||
];
|
||||
|
||||
class Demo26 extends Component {
|
||||
handlerFilterChange = (key, val, condition) => {
|
||||
console.log('参数：key=', key, ' value=', val, 'condition=', condition);
|
||||
}
|
||||
|
||||
handlerFilterClear = (key) => {
|
||||
console.log('清除条件', key);
|
||||
}
|
||||
render() {
|
||||
return <Table
|
||||
onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()
|
||||
onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()
|
||||
filterDelay={500}//输入文本多少ms触发回调函数，默认300ms
|
||||
filterable={true}//是否开启过滤数据功能
|
||||
bordered
|
||||
columns={columns26}
|
||||
data={data26} />;
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo26;
|
||||
|
|
@ -1,211 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 组合过滤和其他功能使用
|
||||
* @description 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等
|
||||
*
|
||||
*/
|
||||
|
||||
/**
|
||||
* @description
|
||||
*/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
import multiSelect from '../../src/lib/MultiSelect';
|
||||
import sort from '../../src/lib/sort';
|
||||
import Checkbox from 'bee-checkbox';
|
||||
import Icon from 'bee-icon';
|
||||
import Menu from 'bee-menus';
|
||||
import Dropdown from 'bee-dropdown';
|
||||
|
||||
|
||||
const { Item } = Menu;
|
||||
const SubMenu = Menu.SubMenu;
|
||||
const MenuItemGroup = Menu.ItemGroup;
|
||||
|
||||
|
||||
const dataList = [
|
||||
{ "key": "1", value: "库存明细", id: "a" },
|
||||
{ "key": "2", value: "订单明细", id: "v" },
|
||||
{ "key": "3", value: "发货明细", id: "c" }
|
||||
]
|
||||
|
||||
const data27 = [
|
||||
{
|
||||
key: "1",
|
||||
name: "John Brown",
|
||||
age: 32,
|
||||
date: "2018-09-19",
|
||||
address: "朝阳区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
date: "2018-09-18",
|
||||
address: "朝阳区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
date: "2018-09-18",
|
||||
address: "东城区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "4",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
date: "2018-09-18",
|
||||
address: "东城区",
|
||||
mark: "无"
|
||||
}, {
|
||||
key: "5",
|
||||
name: "John Brown",
|
||||
age: 32,
|
||||
date: "2018-09-18",
|
||||
address: "海淀区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "6",
|
||||
name: "Jim Green",
|
||||
age: 48,
|
||||
date: "2018-09-18",
|
||||
address: "海淀区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "7",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
date: "2018-09-18",
|
||||
address: "海淀区",
|
||||
mark: "无"
|
||||
},
|
||||
{
|
||||
key: "8",
|
||||
name: "Jim Green",
|
||||
age: 38,
|
||||
date: "2018-09-18",
|
||||
address: "海淀区",
|
||||
mark: "无"
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
const MultiSelectTable = multiSelect(Table, Checkbox);
|
||||
const ComplexTable = sort(MultiSelectTable, Icon);
|
||||
class Demo27 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
dropdownvalue: []
|
||||
}
|
||||
}
|
||||
handlerFilterChange = (key, val, condition) => {
|
||||
console.log('参数：key=', key, ' value=', val, 'condition=', condition);
|
||||
}
|
||||
|
||||
handlerFilterClear = (key) => {
|
||||
console.log('清除条件', key);
|
||||
}
|
||||
getSelectedDataFunc = data => {
|
||||
console.log(data);
|
||||
}
|
||||
onClick = (item) => {
|
||||
console.log(item);
|
||||
}
|
||||
|
||||
render() {
|
||||
const menu1 = (
|
||||
<Menu onClick={this.onClick} style={{ width: 240 }} mode="vertical" >
|
||||
<SubMenu key="sub1" title={<span><span>组织 1</span></span>}>
|
||||
<MenuItemGroup title="Item 1">
|
||||
<Menu.Item key="1">选项 1</Menu.Item>
|
||||
<Menu.Item key="2">选项 2</Menu.Item>
|
||||
</MenuItemGroup>
|
||||
<MenuItemGroup title="Iteom 2">
|
||||
<Menu.Item key="3">选项 3</Menu.Item>
|
||||
<Menu.Item key="4">选项 4</Menu.Item>
|
||||
</MenuItemGroup>
|
||||
</SubMenu>
|
||||
</Menu>)
|
||||
let multiObj = {
|
||||
type: "checkbox"
|
||||
};
|
||||
let columns27 = [
|
||||
{
|
||||
title: "", width: 40, dataIndex: "key", key: "key", render: (text, record, index) => {
|
||||
return <Dropdown
|
||||
trigger={['click']}
|
||||
overlay={menu1}
|
||||
animation="slide-up"
|
||||
>
|
||||
<Icon style={{ "visibility": "hidden" }} type="uf-eye" />
|
||||
</Dropdown>
|
||||
}
|
||||
},
|
||||
{
|
||||
title: "姓名",
|
||||
width: 180,
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
filterType: "text",//输入框类型
|
||||
filterDropdown: "show",//显示条件
|
||||
filterDropdownType: "string"//字符条件
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
width: 180,
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
filterType: "number",//输入框类型
|
||||
filterDropdown: "show",//显示条件
|
||||
filterDropdownType: "number"//字符条件
|
||||
},
|
||||
{
|
||||
title: "日期",
|
||||
width: 190,
|
||||
dataIndex: "date",
|
||||
key: "date",
|
||||
filterType: "date",//输入框类型
|
||||
filterDropdown: "show",//显示条件
|
||||
filterDropdownType: "string"//字符条件
|
||||
},
|
||||
{
|
||||
title: "时间范围",
|
||||
width: 290,
|
||||
dataIndex: "mark",
|
||||
key: "mark",
|
||||
filterType: "daterange",//输入框类型
|
||||
filterDropdown: "show",//显示条件
|
||||
filterDropdownType: "number"//字符条件
|
||||
},
|
||||
{
|
||||
title: "地址",
|
||||
width: 100,
|
||||
dataIndex: "address",
|
||||
key: "address",
|
||||
filterType: "dropdown",//输入框类型
|
||||
filterDropdown: "show",//显示条件
|
||||
filterDropdownType: "number"//字符条件
|
||||
}
|
||||
];
|
||||
return <ComplexTable
|
||||
onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()
|
||||
onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()
|
||||
filterDelay={500}//输入文本多少ms触发回调函数，默认500ms
|
||||
filterable={true}//是否开启过滤数据功能
|
||||
getSelectedDataFunc={this.getSelectedDataFunc}
|
||||
bordered
|
||||
multiSelect={multiObj}
|
||||
columns={columns27}
|
||||
data={data27} />;
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo27;
|
||||
|
|
@ -1,82 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 列排序,后端排序
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
import Icon from "bee-icon";
|
||||
import sort from "../../src/lib/sort.js";
|
||||
let ComplexTable = sort(Table, Icon);
|
||||
const columns11 = [
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 200,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d"
|
||||
},
|
||||
{
|
||||
title: "分数",
|
||||
dataIndex: "e",
|
||||
key: "e",
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
];
|
||||
|
||||
const data11 = [
|
||||
{ a: "杨过", b: "男", c: 30,d:'内行', e:139,key: "2" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', e:109, key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', e:159, key: "3" }
|
||||
];
|
||||
|
||||
const defaultProps = {
|
||||
prefixCls: "bee-table"
|
||||
};
|
||||
class Demo28 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
sortOrder: "",
|
||||
data: data11
|
||||
};
|
||||
}
|
||||
/**
|
||||
* 后端获取数据
|
||||
*/
|
||||
sortFun = (sortParam)=>{
|
||||
console.info(sortParam);
|
||||
//将参数传递给后端排序
|
||||
}
|
||||
render() {
|
||||
let sortObj = {
|
||||
mode:'multiple',
|
||||
backSource:true,
|
||||
sortFun:this.sortFun
|
||||
}
|
||||
return <ComplexTable columns={columns11} data={this.state.data} sort={sortObj}/>;
|
||||
}
|
||||
}
|
||||
Demo28.defaultProps = defaultProps;
|
||||
|
||||
|
||||
export default Demo28;
|
||||
|
|
@ -1,120 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 表头分组并自定义表头高度
|
||||
* @description columns[n] 可以内嵌 children，以渲染分组表头。
|
||||
* 自定义表头高度需要传headerHeight，注：修改th的padding top和bottom置为0，否则会有影响
|
||||
*
|
||||
*/
|
||||
|
||||
import Button from "bee-button";
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
|
||||
const { ColumnGroup, Column } = Table;
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "Name",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
width: 100,
|
||||
fixed: "left"
|
||||
},
|
||||
{
|
||||
title: "Other",
|
||||
width:600,
|
||||
children: [
|
||||
{
|
||||
title: "Age",
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "Address",
|
||||
children: [
|
||||
{
|
||||
title: "Street",
|
||||
dataIndex: "street",
|
||||
key: "street",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "Block",
|
||||
children: [
|
||||
{
|
||||
title: "Building",
|
||||
dataIndex: "building",
|
||||
key: "building",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "Door No.",
|
||||
dataIndex: "number",
|
||||
key: "number",
|
||||
width: 100
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
width:400,
|
||||
children: [
|
||||
{
|
||||
title: "Company Address",
|
||||
dataIndex: "companyAddress",
|
||||
key: "companyAddress",
|
||||
width:200,
|
||||
},
|
||||
{
|
||||
title: "Company Name",
|
||||
dataIndex: "companyName",
|
||||
key: "companyName",
|
||||
width:200,
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
title: "Gender",
|
||||
dataIndex: "gender",
|
||||
key: "gender",
|
||||
width: 60,
|
||||
fixed: "right"
|
||||
}
|
||||
];
|
||||
|
||||
const data = [];
|
||||
for (let i = 0; i < 20; i++) {
|
||||
data.push({
|
||||
key: i,
|
||||
name: "John Brown",
|
||||
age: i + 1,
|
||||
street: "Lake Park",
|
||||
building: "C",
|
||||
number: 2035,
|
||||
companyAddress: "Lake Street 42",
|
||||
companyName: "SoftLake Co",
|
||||
gender: "M"
|
||||
});
|
||||
}
|
||||
|
||||
class Demo3 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
className={'demo3'}
|
||||
columns={columns}
|
||||
data={data}
|
||||
headerHeight={40} //自定义表头高度
|
||||
bordered
|
||||
scroll={{ y: 240 }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo3;
|
||||
|
|
@ -1,6 +0,0 @@
|
|||
.demo3{
|
||||
.u-table-thead th {
|
||||
padding-top: 0px;
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,131 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 树形数据展示
|
||||
* @description 通过在data中配置children数据，来自动生成树形数据
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
|
||||
|
||||
const columns4 = [
|
||||
{
|
||||
title: "Name",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
width: "40%"
|
||||
},
|
||||
{
|
||||
title: "Age",
|
||||
dataIndex: "age",
|
||||
key: "age",
|
||||
width: "30%"
|
||||
},
|
||||
{
|
||||
title: "Address",
|
||||
dataIndex: "address",
|
||||
key: "address"
|
||||
}
|
||||
];
|
||||
|
||||
const data4 = [
|
||||
{
|
||||
key: 1,
|
||||
name: "John Brown sr.",
|
||||
age: 60,
|
||||
address: "New York No. 1 Lake Park",
|
||||
children: [
|
||||
{
|
||||
key: 11,
|
||||
name: "John Brown",
|
||||
age: 42,
|
||||
address: "New York No. 2 Lake Park"
|
||||
},
|
||||
{
|
||||
key: 12,
|
||||
name: "John Brown jr.",
|
||||
age: 30,
|
||||
address: "New York No. 3 Lake Park",
|
||||
children: [
|
||||
{
|
||||
key: 121,
|
||||
name: "Jimmy Brown",
|
||||
age: 16,
|
||||
address: "New York No. 3 Lake Park"
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 13,
|
||||
name: "Jim Green sr.",
|
||||
age: 72,
|
||||
address: "London No. 1 Lake Park",
|
||||
children: [
|
||||
{
|
||||
key: 131,
|
||||
name: "Jim Green",
|
||||
age: 42,
|
||||
address: "London No. 2 Lake Park",
|
||||
children: [
|
||||
{
|
||||
key: 1311,
|
||||
name: "Jim Green jr.",
|
||||
age: 25,
|
||||
address: "London No. 3 Lake Park"
|
||||
},
|
||||
{
|
||||
key: 1312,
|
||||
name: "Jimmy Green sr.",
|
||||
age: 18,
|
||||
address: "London No. 4 Lake Park"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
name: "Joe Black",
|
||||
age: 32,
|
||||
address: "Sidney No. 1 Lake Park"
|
||||
}
|
||||
];
|
||||
class Demo4 extends Component {
|
||||
|
||||
constructor(props){
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data4,
|
||||
factoryValue: 0,
|
||||
selectedRow: new Array(data4.length)//状态同步
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return <Table
|
||||
rowClassName={(record,index,indent)=>{
|
||||
if (this.state.selectedRow[index]) {
|
||||
return 'selected';
|
||||
} else {
|
||||
return '';
|
||||
}
|
||||
}}
|
||||
onRowClick={(record,index,indent)=>{
|
||||
let selectedRow = new Array(this.state.data.length);
|
||||
selectedRow[index] = true;
|
||||
this.setState({
|
||||
factoryValue: record,
|
||||
selectedRow: selectedRow
|
||||
});
|
||||
}}
|
||||
|
||||
columns={columns4} data={data4} />;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
export default Demo4;
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 固定列
|
||||
* @description 固定列到表格的某侧
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
|
||||
|
||||
|
||||
const columns5 = [
|
||||
{
|
||||
title: "Full Name",
|
||||
width: 100,
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
fixed: "left"
|
||||
},
|
||||
{ title: "Age", width: 100, dataIndex: "age", key: "age", fixed: "left" },
|
||||
{ title: "Column 1", dataIndex: "address", key: "1" },
|
||||
{ title: "Column 2", dataIndex: "address", key: "2" },
|
||||
{ title: "Column 3", dataIndex: "address", key: "3" },
|
||||
{ title: "Column 4", dataIndex: "address", key: "4" },
|
||||
{ title: "Column 5", dataIndex: "address", key: "5" },
|
||||
{ title: "Column 6", dataIndex: "address", key: "6" },
|
||||
{ title: "Column 7", dataIndex: "address", key: "7" },
|
||||
{ title: "Column 8", dataIndex: "address", key: "8" }
|
||||
];
|
||||
|
||||
const data5 = [
|
||||
{
|
||||
key: "1",
|
||||
name: "John Brown",
|
||||
age: 32,
|
||||
address: "New York Park"
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
address: "London Park"
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
address: "London Park"
|
||||
},
|
||||
{
|
||||
key: "4",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
address: "London Park"
|
||||
}
|
||||
];
|
||||
|
||||
class Demo5 extends Component {
|
||||
render() {
|
||||
return <Table columns={columns5} data={data5}scroll={{ x: "130%", y: 140 }}/>;
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo5;
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 固定表头
|
||||
* @description 方便一页内展示大量数据。需要指定 column 的 width 属性，否则列头和内容可能不对齐。(还可以设置scroll来支持横向或纵向滚动)
|
||||
*
|
||||
*/
|
||||
|
||||
|
||||
import React, { Component } from 'react';
|
||||
import Table from '../../src';
|
||||
import dragColumn from "../../src/lib/dragColumn";;
|
||||
const DragColumnTable = dragColumn(Table);
|
||||
|
||||
const columns6 = [
|
||||
{
|
||||
title: "Full Name",
|
||||
width: 100,
|
||||
dataIndex: "name",
|
||||
key: "name"
|
||||
},
|
||||
{ title: "Age", width: 100, dataIndex: "age", key: "age"},
|
||||
{ title: "Address", dataIndex: "address", key: "1" }
|
||||
];
|
||||
|
||||
const data6 = [
|
||||
{
|
||||
key: "1",
|
||||
name: "John Brown",
|
||||
age: 32,
|
||||
address: "New York Park"
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
address: "London Park"
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
address: "London Park"
|
||||
},
|
||||
{
|
||||
key: "4",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
address: "London Park"
|
||||
},{
|
||||
key: "11",
|
||||
name: "John Brown",
|
||||
age: 32,
|
||||
address: "New York Park"
|
||||
},
|
||||
{
|
||||
key: "12",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
address: "London Park"
|
||||
},
|
||||
{
|
||||
key: "13",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
address: "London Park"
|
||||
},
|
||||
{
|
||||
key: "14",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
address: "London Park"
|
||||
}
|
||||
];
|
||||
|
||||
class Demo6 extends Component {
|
||||
render() {
|
||||
return <DragColumnTable columns={columns6} data={data6} scroll={{y: 150 }} dragborder={true} />;
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo6;
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 主子表
|
||||
* @description 主表点击子表联动
|
||||
*
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns7 = [
|
||||
{ title: "班级", dataIndex: "a", key: "a" },
|
||||
{ title: "人数", dataIndex: "b", key: "b" },
|
||||
{ title: "班主任", dataIndex: "c", key: "c" },
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d"
|
||||
}
|
||||
];
|
||||
|
||||
const data7 = [
|
||||
{ a: "02级一班", b: "2", c: "欧阳锋", d: "大侠", key: "1" },
|
||||
{ a: "03级二班", b: "3", c: "归海一刀", d: "大侠", key: "2" },
|
||||
{ a: "05级三班", b: "1", c: "一拳超人", d: "愣头青", key: "3" }
|
||||
];
|
||||
|
||||
const columns7_1 = [
|
||||
{ title: "姓名", dataIndex: "a", key: "a" },
|
||||
{ title: "班级", dataIndex: "b", key: "b" },
|
||||
{ title: "系别", dataIndex: "c", key: "c" }
|
||||
];
|
||||
|
||||
class Demo7 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
children_data: []
|
||||
};
|
||||
}
|
||||
|
||||
rowclick = (record, index) => {
|
||||
if (record.a === "02级一班") {
|
||||
this.setState({
|
||||
children_data: [
|
||||
{ a: "郭靖", b: "02级一班", c: "文学系", key: "1" },
|
||||
{ a: "黄蓉", b: "02级一班", c: "文学系", key: "2" }
|
||||
]
|
||||
});
|
||||
} else if (record.a === "03级二班") {
|
||||
this.setState({
|
||||
children_data: [
|
||||
{ a: "杨过", b: "03级二班", c: "外语系", key: "1" },
|
||||
{ a: "小龙女", b: "03级二班", c: "外语系", key: "2" },
|
||||
{ a: "傻姑", b: "03级二班", c: "外语系", key: "3" }
|
||||
]
|
||||
});
|
||||
} else if (record.a === "05级三班") {
|
||||
this.setState({
|
||||
children_data: [{ a: "金圣叹", b: "05级三班", c: "美术系", key: "1" }]
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Table
|
||||
columns={columns7}
|
||||
data={data7}
|
||||
onRowClick={this.rowclick}
|
||||
title={currentData => <div>标题: 我是主表</div>}
|
||||
/>
|
||||
<Table
|
||||
style={{ marginTop: 40 }}
|
||||
columns={columns7_1}
|
||||
data={this.state.children_data}
|
||||
title={currentData => <div>标题: 我是子表</div>}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo7;
|
||||
|
|
@ -1,73 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 表格+分页
|
||||
* @description 点击分页联动表格
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
|
||||
import Table from "../../src";
|
||||
import Pagination from "bee-pagination";
|
||||
|
||||
const columns8 = [
|
||||
{ title: "姓名", dataIndex: "a", key: "a", width: 100 },
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d"
|
||||
}
|
||||
];
|
||||
|
||||
const pageData = {
|
||||
1: [
|
||||
{ a: "杨过", b: "男", c: 30, d: "内行", key: "2" },
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "大侠", key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25, d: "大侠", key: "3" }
|
||||
],
|
||||
2: [
|
||||
{ a: "芙蓉姐姐", b: "女", c: 23, d: "大侠", key: "1" },
|
||||
{ a: "芙蓉妹妹", b: "女", c: 23, d: "内行", key: "2" }
|
||||
]
|
||||
};
|
||||
|
||||
class Demo8 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: pageData[1],
|
||||
activePage: 1
|
||||
};
|
||||
}
|
||||
|
||||
handleSelect(eventKey) {
|
||||
this.setState({
|
||||
data: pageData[eventKey],
|
||||
activePage: eventKey
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<Table columns={columns8} data={this.state.data} />
|
||||
<Pagination
|
||||
first
|
||||
last
|
||||
prev
|
||||
next
|
||||
maxButtons={5}
|
||||
boundaryLinks
|
||||
activePage={this.state.activePage}
|
||||
onSelect={this.handleSelect.bind(this)}
|
||||
onDataNumSelect={this.dataNumSelect}
|
||||
showJump={true}
|
||||
total={100}
|
||||
dataNum={2}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
export default Demo8;
|
||||
|
|
@ -1,163 +0,0 @@
|
|||
/**
|
||||
*
|
||||
* @title 表格+搜索
|
||||
* @description 搜索刷新表格数据
|
||||
*
|
||||
*
|
||||
* import {Table} from 'tinper-bee';
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
|
||||
import Table from "../../src";
|
||||
import Icon from "bee-icon";
|
||||
import InputGroup from "bee-input-group";
|
||||
import FormControl from "bee-form-control";
|
||||
|
||||
class Search extends Component {
|
||||
state = {
|
||||
searchValue: "",
|
||||
empty: false
|
||||
};
|
||||
|
||||
/**
|
||||
* 搜索
|
||||
*/
|
||||
handleSearch = () => {
|
||||
let { onSearch } = this.props;
|
||||
this.setState({
|
||||
empty: true
|
||||
});
|
||||
onSearch && onSearch(this.state.searchValue);
|
||||
};
|
||||
|
||||
/**
|
||||
* 捕获回车
|
||||
* @param e
|
||||
*/
|
||||
handleKeyDown = e => {
|
||||
if (e.keyCode === 13) {
|
||||
this.handleSearch();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 输入框改变
|
||||
* @param e
|
||||
*/
|
||||
handleChange = (e) => {
|
||||
this.setState({
|
||||
searchValue: e
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 清空输入框
|
||||
*/
|
||||
emptySearch = () => {
|
||||
let { onEmpty } = this.props;
|
||||
this.setState({
|
||||
searchValue: "",
|
||||
empty: false
|
||||
});
|
||||
onEmpty && onEmpty();
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<InputGroup simple className="search-component">
|
||||
<FormControl
|
||||
onChange={this.handleChange}
|
||||
value={this.state.searchValue}
|
||||
onKeyDown={this.handleKeyDown}
|
||||
placeholder="请输入用户名"
|
||||
type="text"
|
||||
/>
|
||||
{this.state.empty ? (
|
||||
<Icon
|
||||
type="uf-close-c"
|
||||
onClick={this.emptySearch}
|
||||
className="empty-search"
|
||||
/>
|
||||
) : null}
|
||||
|
||||
<InputGroup.Button onClick={this.handleSearch} shape="border">
|
||||
<Icon type="uf-search" />
|
||||
</InputGroup.Button>
|
||||
</InputGroup>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
const columns9 = [
|
||||
{
|
||||
title: "姓名",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d"
|
||||
}
|
||||
];
|
||||
|
||||
const userData = [
|
||||
{ a: "杨过", b: "男", c: 30, d: "内行", key: "2" },
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "大侠", key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25, d: "大侠", key: "3" }
|
||||
];
|
||||
|
||||
class Demo9 extends Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: userData
|
||||
};
|
||||
}
|
||||
|
||||
handleSearch = value => {
|
||||
if (value === "") {
|
||||
return this.setState({
|
||||
data: userData
|
||||
});
|
||||
}
|
||||
let regExp = new RegExp(value, "ig");
|
||||
let data = userData.filter(item => regExp.test(item.a));
|
||||
this.setState({
|
||||
data
|
||||
});
|
||||
};
|
||||
|
||||
handleEmpty = () => {
|
||||
this.setState({
|
||||
data: userData
|
||||
});
|
||||
};
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div>
|
||||
<div className="clearfix">
|
||||
<Search onSearch={this.handleSearch} onEmpty={this.handleEmpty} />
|
||||
</div>
|
||||
<Table columns={columns9} data={this.state.data} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo9;
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -2421,6 +2421,9 @@ i.uf {
|
|||
/*
|
||||
* 选择时删除文本阴影，及设置默认选中颜色
|
||||
*/
|
||||
::-moz-selection {
|
||||
background: rgb(187,222,251);
|
||||
text-shadow: none; }
|
||||
::selection {
|
||||
background: rgb(187,222,251);
|
||||
text-shadow: none; }
|
||||
|
|
@ -5284,7 +5287,7 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
|
|||
.u-panel .u-panel-body {
|
||||
padding: 15px 15px;
|
||||
position: relative; }
|
||||
.u-panel .u-panel-body .u-panel-copy {
|
||||
.u-panel .u-panel-body .uf {
|
||||
position: absolute;
|
||||
right: 25px;
|
||||
top: 30px;
|
||||
|
|
@ -5294,7 +5297,7 @@ a, .mdl-accordion, .mdl-button, .mdl-card, .mdl-checkbox, .mdl-dropdown-menu,
|
|||
margin: 8px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer; }
|
||||
.u-panel .u-panel-body .u-panel-copy:hover {
|
||||
.u-panel .u-panel-body .uf:hover {
|
||||
color: #a8a7a7; }
|
||||
|
||||
.u-panel-default {
|
||||
|
|
@ -6670,8 +6673,7 @@ input.u-button[type="submit"] {
|
|||
border-radius: 0 500px 500px 0; }
|
||||
|
||||
.u-pagination {
|
||||
font-size: 14px;
|
||||
position: relative; }
|
||||
font-size: 14px; }
|
||||
.u-pagination-list {
|
||||
float: left;
|
||||
margin: 5px; }
|
||||
|
|
@ -6809,15 +6811,6 @@ input.u-button[type="submit"] {
|
|||
margin: 5px; }
|
||||
.u-pagination-total span {
|
||||
padding: 0 5px; }
|
||||
.u-pagination.u-pagination-disabled .u-pagination-disabled-mask {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 46px;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
z-index: 2;
|
||||
cursor: not-allowed; }
|
||||
|
||||
.pagination-state {
|
||||
float: left;
|
||||
|
|
@ -6924,29 +6917,15 @@ input.u-button[type="submit"] {
|
|||
margin: 0 5px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
vertical-align: middle; }
|
||||
font-size: 14px; }
|
||||
.u-checkbox.disabled .u-checkbox-label {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.5; }
|
||||
.u-checkbox input[type='checkbox'] {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
height: 100%; }
|
||||
display: none;
|
||||
cursor: pointer; }
|
||||
.u-checkbox input[disabled] {
|
||||
cursor: not-allowed; }
|
||||
.u-checkbox input[type='checkbox']:focus + .u-checkbox-label:before {
|
||||
border-color: #1e88e5; }
|
||||
.u-checkbox.is-checked .u-checkbox-label:before {
|
||||
box-shadow: inset 0 0 0 10px rgb(30,136,229);
|
||||
border-color: rgb(30,136,229); }
|
||||
|
|
@ -6998,37 +6977,22 @@ input.u-button[type="submit"] {
|
|||
box-shadow: inset 0 0 0 10px rgb(76,175,80);
|
||||
border-color: rgb(76,175,80); }
|
||||
|
||||
.u-checkbox.u-checkbox-success input[type='checkbox']:focus + .u-checkbox-label:before {
|
||||
border-color: rgb(76,175,80); }
|
||||
|
||||
.u-checkbox.u-checkbox-warning.is-checked .u-checkbox-label:before {
|
||||
box-shadow: inset 0 0 0 10px rgb(255,152,0);
|
||||
border-color: rgb(255,152,0); }
|
||||
|
||||
.u-checkbox.u-checkbox-warning input[type='checkbox']:focus + .u-checkbox-label:before {
|
||||
border-color: rgb(255,152,0); }
|
||||
|
||||
.u-checkbox.u-checkbox-danger.is-checked .u-checkbox-label:before {
|
||||
box-shadow: inset 0 0 0 10px rgb(244,67,54);
|
||||
border-color: rgb(244,67,54); }
|
||||
|
||||
.u-checkbox.u-checkbox-danger input[type='checkbox']:focus + .u-checkbox-label:before {
|
||||
border-color: rgb(244,67,54); }
|
||||
|
||||
.u-checkbox.u-checkbox-dark.is-checked .u-checkbox-label:before {
|
||||
box-shadow: inset 0 0 0 10px rgb(97,97,97);
|
||||
border-color: rgb(97,97,97); }
|
||||
|
||||
.u-checkbox.u-checkbox-dark input[type='checkbox']:focus + .u-checkbox-label:before {
|
||||
border-color: rgb(97,97,97); }
|
||||
|
||||
.u-checkbox.u-checkbox-info.is-checked .u-checkbox-label:before {
|
||||
box-shadow: inset 0 0 0 10px rgb(0,188,212);
|
||||
border-color: rgb(0,188,212); }
|
||||
|
||||
.u-checkbox.u-checkbox-info input[type='checkbox']:focus + .u-checkbox-label:before {
|
||||
border-color: rgb(0,188,212); }
|
||||
|
||||
/* FormGroup */
|
||||
/* Navlayout */
|
||||
/* keyframes 定义 */
|
||||
|
|
@ -7566,8 +7530,7 @@ ul {
|
|||
zoom: 1;
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
padding: 0 0 0 8px;
|
||||
top: -3px; }
|
||||
padding: 0 0 0 8px; }
|
||||
.u-select-selection--multiple .u-select-selection-choice-remove:before {
|
||||
display: block;
|
||||
font-family: "uf"; }
|
||||
|
|
@ -8631,7 +8594,15 @@ ul {
|
|||
.u-table-thead .filter-wrap .filter-btns {
|
||||
min-width: 58px; }
|
||||
.u-table-thead th {
|
||||
background: #f7f7f7; }
|
||||
background: #f7f7f7;
|
||||
background-clip: padding-box;
|
||||
-moz-user-select: -moz-none;
|
||||
-webkit-user-select: none;
|
||||
/*
|
||||
Introduced in IE 10.
|
||||
*/
|
||||
-ms-user-select: none;
|
||||
user-select: none; }
|
||||
.u-table-thead th .bee-table-column-sorter {
|
||||
position: relative;
|
||||
margin-left: 4px;
|
||||
|
|
@ -10348,16 +10319,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 */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -11,9 +11,11 @@ import multiSelect from "tinper-bee/lib/multiSelect.js";
|
|||
|
||||
### multiSelect
|
||||
|
||||
全选功能
|
||||
> 选中功能组件
|
||||
|
||||
#### Table新增参数
|
||||
<font color="#ccc">
|
||||
|
||||
#### <font color="#ccc">multiSelect 废弃部分的API</font>
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------- | -------------------------- | -------- | -------- |
|
||||
|
|
@ -24,6 +26,19 @@ import multiSelect from "tinper-bee/lib/multiSelect.js";
|
|||
| selectDisabled | 设置某一行数据无法被选中，使用类似于rowClassName | Function(record, index):bool | 无 |
|
||||
| selectedRow | 设置某一行数据是否被选中，使用类似于rowClassName | Function(record, index):bool | 无 |
|
||||
|
||||
</font>
|
||||
|
||||
#### multiSelect 新增API
|
||||
|
||||
> data 数据中新增参数
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------------- | -------------------------- | -------- | -------- |
|
||||
| _checked | 设置当前数据是否选中 | boolean | true/false |
|
||||
| _disabled | 禁用当前选中数据 | boolean | true/false
|
||||
| getSelectedDataFunc | 返回当前选中的数据数组 | Function | 无 |
|
||||
|
||||
|
||||
|
||||
#### 使用
|
||||
|
||||
|
|
@ -84,11 +99,8 @@ const SumTable = sum(Table);
|
|||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------ | ---------- | -------- | ---- |
|
||||
| dragborder | 显示拖拽边框 | boolean | false |
|
||||
| draggable | 是否可拖拽 | boolean | false |
|
||||
| onDragStart | 拖拽开始回调函数 | function | () => {} |
|
||||
| onDragEnter |拖拽进入回调函数 | function | () => {} |
|
||||
| onDragOver | 拖拽划过回调函数 | function | () => {} |
|
||||
| dragborder | 拖拽调整列宽度 | boolean | false |
|
||||
| draggable | 拖拽交换列 | boolean | false |
|
||||
| onDrop | 拖拽释放回调函数 | function | () => {} |
|
||||
|
||||
#### 使用
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
import React, { Component } from "react";
|
||||
import ReactDOM from 'react-dom';
|
||||
import PropTypes from "prop-types";
|
||||
import shallowequal from "shallowequal";
|
||||
import { throttle, debounce } from "throttle-debounce";
|
||||
import { tryParseInt, ObjectAssign ,Event,EventUtil} from "./utils";
|
||||
import { debounce } from "throttle-debounce";
|
||||
import { Event,EventUtil} from "./utils";
|
||||
import FilterType from "./FilterType";
|
||||
|
||||
const propTypes = {
|
||||
|
|
@ -22,6 +21,7 @@ class TableHeader extends Component {
|
|||
};
|
||||
this.minWidth = 80;//确定最小宽度就是80
|
||||
this.table = null;
|
||||
this._thead = null;//当前对象
|
||||
}
|
||||
|
||||
static defaultProps = {
|
||||
|
|
@ -29,9 +29,12 @@ class TableHeader extends Component {
|
|||
};
|
||||
|
||||
/**
|
||||
* 动态绑定th line 事件
|
||||
* type 为false 为增加事件
|
||||
* eventSource 为false 给 th 内部的div增加事件
|
||||
*
|
||||
* 动态绑定th line 事件方法
|
||||
* @param {*} events
|
||||
* @param {*} type type 为false 为增加事件
|
||||
* @param {*} eventSource 为false 给 th 内部的div增加事件
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
thEventListen(events,type,eventSource){
|
||||
let {ths,cols} = this.table;
|
||||
|
|
@ -54,7 +57,6 @@ class TableHeader extends Component {
|
|||
EventUtil.removeHandler(_dataSource,_event.key,_event.fun);
|
||||
}else{
|
||||
EventUtil.addHandler(_dataSource,_event.key,_event.fun);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -62,6 +64,12 @@ class TableHeader extends Component {
|
|||
}
|
||||
|
||||
|
||||
/**
|
||||
* 当前对象上绑定全局事件，用于拖拽区域以外时的事件处理
|
||||
* @param {*} events
|
||||
* @param {*} type
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
bodyEventListen(events,type){
|
||||
for (let i = 0; i < events.length; i++) {
|
||||
const _event = events[i];
|
||||
|
|
@ -78,13 +86,15 @@ class TableHeader extends Component {
|
|||
this.initEvent();
|
||||
}
|
||||
|
||||
componentDidMount(){
|
||||
this.initTable();
|
||||
this.initEvent();
|
||||
}
|
||||
// componentDidMount(){
|
||||
// this.initTable();
|
||||
// this.initEvent();
|
||||
// }
|
||||
|
||||
/**
|
||||
* 拖拽列宽的事件处理
|
||||
* 初始化拖拽列宽的事件处理
|
||||
* @returns
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
initEvent(){
|
||||
let events = [
|
||||
|
|
@ -103,7 +113,8 @@ class TableHeader extends Component {
|
|||
}
|
||||
|
||||
/**
|
||||
* 移除拖拽宽度的事件
|
||||
* 移除当前全局事件对象
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
removeDragBorderEvent(){
|
||||
let events = [
|
||||
|
|
@ -117,11 +128,13 @@ class TableHeader extends Component {
|
|||
|
||||
/**
|
||||
* 获取table的属性存放在this.table 中。(公用方法)
|
||||
* @returns
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
initTable(){
|
||||
if(!this.props.dragborder && !this.props.draggable)return;
|
||||
let el = ReactDOM.findDOMNode(this);
|
||||
let tableDome = el.parentNode;
|
||||
// let el = ReactDOM.findDOMNode(this);
|
||||
let tableDome = this._thead.parentNode;
|
||||
let table = {};
|
||||
if(tableDome && tableDome.nodeName && tableDome.nodeName.toUpperCase() == "TABLE"){
|
||||
table.table = tableDome;
|
||||
|
|
@ -145,7 +158,10 @@ class TableHeader extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
//---拖拽列宽代码逻辑----start-----
|
||||
/**
|
||||
* 调整列宽的move事件
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
onLineMouseMove = (e) => {
|
||||
const { clsPrefix ,dragborder,contentDomWidth,scrollbarWidth,contentTable,headerScroll} = this.props;
|
||||
Event.stopPropagation(e);
|
||||
|
|
@ -194,6 +210,10 @@ class TableHeader extends Component {
|
|||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 调整列宽的down事件
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
onLineMouseDown = (e) => {
|
||||
Event.stopPropagation(e);
|
||||
let event = Event.getEvent(e);
|
||||
|
|
@ -209,16 +229,22 @@ class TableHeader extends Component {
|
|||
this.drag.minWidth = currentObj.style.minWidth != ""?parseInt(currentObj.style.minWidth):defaultWidth;
|
||||
};
|
||||
|
||||
/**
|
||||
* 调整列宽的up事件
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
onLineMouseUp = (event) => {
|
||||
|
||||
this.clearDragBorder(event);
|
||||
};
|
||||
|
||||
/**
|
||||
* 调整列宽到区域以外的up事件
|
||||
*/
|
||||
bodyonLineMouseMove = (event) => {
|
||||
this.clearDragBorder(event);
|
||||
};
|
||||
|
||||
clearDragBorder(){
|
||||
// if (!this.props.dragborder || !this.props.draggable) return;
|
||||
if(!this.drag || !this.drag.option)return;
|
||||
let {rows} = this.props;
|
||||
let data = {rows:rows[0],cols:this.table.cols,currIndex:this.drag.currIndex};
|
||||
|
|
@ -233,6 +259,10 @@ class TableHeader extends Component {
|
|||
|
||||
//---拖拽列宽代码逻辑----start-----
|
||||
|
||||
/**
|
||||
* 调整交换列down事件
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
dragAbleMouseDown = (e) => {
|
||||
// Event.stopPropagation(e);
|
||||
let event = Event.getEvent(e);
|
||||
|
|
@ -247,7 +277,10 @@ class TableHeader extends Component {
|
|||
this.removeDragBorderEvent();//清理掉拖拽列宽的事件
|
||||
this.addDragAbleEvent(); //添加拖拽交换列的事件
|
||||
}
|
||||
|
||||
/**
|
||||
* 调整交换列up事件
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
dragAbleMouseUp = (e) => {
|
||||
this.currentDome.setAttribute('draggable',false);//添加交换列效果
|
||||
this.removeDragAbleEvent();
|
||||
|
|
@ -256,20 +289,22 @@ class TableHeader extends Component {
|
|||
this.thEventListen([{key:'mousedown',fun:this.dragAbleMouseDown}],'remove',true);//表示把事件添加到th元素上
|
||||
this.initEvent();
|
||||
}
|
||||
|
||||
/**
|
||||
* 拖拽交换列的事件处理
|
||||
* 添加换列的事件监听
|
||||
*/
|
||||
addDragAbleEvent (){
|
||||
let events = [
|
||||
{key:'dragstart',fun:this.onDragStart},//用户开始拖动元素时触发
|
||||
{key:'dragover', fun:this.onDragOver},//当某被拖动的对象在另一对象容器范围内拖动时触发此事件
|
||||
{key:'drop', fun:this.onDrop}, //在一个拖动过程中，释放鼠标键时触发此事件
|
||||
// {key:'dragenter', fun:this.onDragEnter} //当被鼠标拖动的对象进入其容器范围内时触发此事件
|
||||
];
|
||||
this.thEventListen(events,'',true);
|
||||
// this.bodyEventListen([{key:'mouseup',fun:this.bodyonDragMouseMove}]);
|
||||
}
|
||||
|
||||
/**
|
||||
* 删除换列的事件监听
|
||||
*/
|
||||
removeDragAbleEvent(){
|
||||
let events = [
|
||||
{key:'dragstart',fun:this.onDragStart},
|
||||
|
|
@ -280,6 +315,9 @@ class TableHeader extends Component {
|
|||
this.thEventListen(events,'remove',true);
|
||||
}
|
||||
|
||||
/**
|
||||
* 开始调整交换列的事件
|
||||
*/
|
||||
onDragStart = (e) => {
|
||||
let event = Event.getEvent(e);
|
||||
if (!this.props.draggable) return;
|
||||
|
|
@ -299,17 +337,6 @@ class TableHeader extends Component {
|
|||
event.preventDefault();
|
||||
};
|
||||
|
||||
/**
|
||||
* 当被鼠标拖动的对象进入其容器范围内时触发此事件。【目标事件】
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
// onDragEnter = (e) => {
|
||||
// if (!this.props.draggable) return;
|
||||
// if(this.drag.option === 'border'){return;}
|
||||
// let data = this.getCurrentEventData(e);
|
||||
// if (!this.currentObj || this.currentObj.key == data.key) return;
|
||||
// };
|
||||
|
||||
/**
|
||||
* 在一个拖动过程中，释放鼠标键时触发此事件。【目标事件】
|
||||
* @memberof TableHeader
|
||||
|
|
@ -325,6 +352,12 @@ class TableHeader extends Component {
|
|||
this.props.onDrop(event,{dragSource:this.currentObj,dragTarg:data});
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取当前th上的对象数据
|
||||
* @param {*} e
|
||||
* @returns
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
getCurrentEventData(e){
|
||||
let event = Event.getEvent(e);
|
||||
let th = this.getThDome(event.target)
|
||||
|
|
@ -343,9 +376,9 @@ class TableHeader extends Component {
|
|||
}
|
||||
|
||||
/**
|
||||
*根据拖拽，获取当前的Th属性
|
||||
* 根据当前鼠标点击的节点，进行递归遍历，最终找到th
|
||||
* @param {*} element
|
||||
* @returns
|
||||
* @returns <th />对象
|
||||
* @memberof TableHeader
|
||||
*/
|
||||
getThDome(element){
|
||||
|
|
@ -490,30 +523,14 @@ class TableHeader extends Component {
|
|||
|
||||
|
||||
render() {
|
||||
const {
|
||||
clsPrefix,
|
||||
rowStyle,
|
||||
onDragStart,
|
||||
onDragOver,
|
||||
onDrop,
|
||||
draggable,
|
||||
dragborder,
|
||||
rows,
|
||||
filterable,
|
||||
onFilterRowsChange,
|
||||
onMouseDown,
|
||||
onMouseMove,
|
||||
onMouseUp,
|
||||
onMouseOut,
|
||||
contentWidthDiff,
|
||||
fixed,
|
||||
lastShowIndex,
|
||||
contentTable
|
||||
const { clsPrefix, rowStyle,draggable,
|
||||
dragborder, rows,filterable,fixed,lastShowIndex,
|
||||
} = this.props;
|
||||
|
||||
let attr = dragborder ? { id: `u-table-drag-thead-${this.theadKey}` } : {};
|
||||
|
||||
return (
|
||||
<thead className={`${clsPrefix}-thead`} {...attr} data-theader-fixed='scroll' >
|
||||
<thead className={`${clsPrefix}-thead`} {...attr} data-theader-fixed='scroll' ref={_thead=>this._thead = _thead} >
|
||||
{rows.map((row, index) => (
|
||||
<tr key={index} style={rowStyle} className={(filterable && index == rows.length - 1)?'filterable':''}>
|
||||
{row.map((da, columIndex, arr) => {
|
||||
|
|
@ -578,5 +595,4 @@ class TableHeader extends Component {
|
|||
}
|
||||
|
||||
TableHeader.propTypes = propTypes;
|
||||
|
||||
export default TableHeader;
|
||||
|
|
|
|||
|
|
@ -174,14 +174,15 @@ export function getColChildrenLength(columns,chilrenLen){
|
|||
|
||||
|
||||
function addHandler(element,type,handler){
|
||||
|
||||
let event = null;
|
||||
if(element.addEventListener){//检测是否为DOM2级方法
|
||||
element.addEventListener(type, handler, false);
|
||||
event = element.addEventListener(type, handler, false);
|
||||
}else if (element.attachEvent){//检测是否为IE级方法
|
||||
element.attachEvent("on" + type, handler);
|
||||
event = element.attachEvent("on" + type, handler);
|
||||
} else {//检测是否为DOM0级方法
|
||||
element["on" + type] = handler;
|
||||
event = element["on" + type] = handler;
|
||||
}
|
||||
return event;
|
||||
}
|
||||
|
||||
function removeHandler(element, type, handler){
|
||||
|
|
|
|||
Loading…
Reference in New Issue