退拽宽度优化

This commit is contained in:
jonyshi 2018-05-11 16:51:53 +08:00
parent 96250f8832
commit 71d5577fa1
31 changed files with 4126 additions and 51605 deletions

View File

@ -1,116 +0,0 @@
/**
*
* @title 简单表格两种tip选中行背景色文字过长
* 一种是bee-popover实现一种是标签本身的tooltip
* @description
*/
import React, { Component } from "react";
import Popover from 'bee-popover';
import Button from "bee-button";
import Table from "../../src";
function getTitleTip(text){
return(<div>
<h3>{text}</h3>
</div>)
}
const columns = [
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
{ title: "用户名", dataIndex: "a", key: "a", width:80 , className:"rowClassName",
render(text, record, index) {
return(<div style={{position: 'relative'}}>
<Popover
placement="leftTop"
content={getTitleTip(text)}
trigger="hover"
id="leftTop"
>
<span
style={{
position: 'absolute',
top: 5,
left: 0,
width: "80px",
textOverflow:"ellipsis",
overflow:"hidden",
whiteSpace:"nowrap"
}}>{text}</span>
</Popover>
</div>);
}},
{
title: "操作",
dataIndex: "d",
key: "d",
render(text, record, index) {
return (
<div style={{position: 'relative'}} title={text} >
<a
href="#"
tooltip={text}
onClick={() => {
alert('这是第'+index+'列,内容为:'+text);
}}
style={{
position: 'absolute',
top: 5,
left: 0
}}
>
一些操作
</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,
factoryValue: 0,
selectedRow: new Array(data.length)//状态同步
}
}
render() {
return (
<Table
columns={columns}
data={data}
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
});
}}
title={currentData => <div>标题: 这是一个标题</div>}
footer={currentData => <div>表尾: 我是小尾巴</div>}
/>
);
}
}
export default Demo1;

View File

@ -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;

View File

@ -1,143 +0,0 @@
/**
*
* @title 列排序
* @description 点击列的上下按钮即可排序
*
*/
import React, { Component } from 'react';
import Table from '../../src';
import Icon from "bee-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
};
}
toggleSortOrder=(order, column)=> {
let { sortOrder, data, oldData } = this.state;
let ascend_sort = function(key) {
return function(a, b) {
return a.key - b.key;
};
};
let descend_sort = function(key) {
return function(a, b) {
return b.key - a.key;
};
};
if (sortOrder === order) {
// 切换为未排序状态
order = "";
}
if (!oldData) {
oldData = data.concat();
}
if (order === "ascend") {
data = data.sort(function(a, b) {
return column.sorter(a, b);
});
} else if (order === "descend") {
data = data.sort(function(a, b) {
return column.sorter(b, a);
});
} else {
data = oldData.concat();
}
this.setState({
sortOrder: order,
data: data,
oldData: oldData
});
}
renderColumnsDropdown(columns) {
const { sortOrder } = this.state;
const { prefixCls } = this.props;
return columns.map(originColumn => {
let column = Object.assign({}, originColumn);
let sortButton;
if (column.sorter) {
const isAscend = sortOrder === "ascend";
const isDescend = sortOrder === "descend";
sortButton = (
<div className={`${prefixCls}-column-sorter`}>
<span
className={`${prefixCls}-column-sorter-up ${isAscend
? "on"
: "off"}`}
title="↑"
onClick={() => this.toggleSortOrder("ascend", column)}
>
<Icon type="uf-triangle-up" />
</span>
<span
className={`${prefixCls}-column-sorter-down ${isDescend
? "on"
: "off"}`}
title="↓"
onClick={() => this.toggleSortOrder("descend", column)}
>
<Icon type="uf-triangle-down" />
</span>
</div>
);
}
column.title = (
<span>
{column.title}
{sortButton}
</span>
);
return column;
});
}
render() {
let columns = this.renderColumnsDropdown(columns11);
return <Table columns={columns} data={this.state.data} />;
}
}
Demo11.defaultProps = defaultProps11;
export default Demo11;

View File

@ -1,165 +0,0 @@
/**
*
* @title 全选功能
* @description 点击表格左列按钮即可选中并且在选中的回调函数中能获取到选中的数据未使用封装好的全选功能
*
*/
import React, { Component } from 'react';
import Table from '../../src';
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" },
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
];
const defaultProps12 = {
prefixCls: "bee-table",
multiSelect: {
type: "checkbox",
param: "key"
}
};
class Demo12 extends Component {
constructor(props) {
super(props);
this.state = {
checkedAll:false,
checkedArray: [
false,
false,
false,
],
data: data12
};
}
onAllCheckChange = () => {
let self = this;
let checkedArray = [];
let listData = self.state.data.concat();
let selIds = [];
// let id = self.props.multiSelect.param;
for (var i = 0; i < self.state.checkedArray.length; i++) {
checkedArray[i] = !self.state.checkedAll;
}
// if (self.state.checkedAll) {
// selIds = [];
// } else {
// for (var i = 0; i < listData.length; i++) {
// selIds[i] = listData[i][id];
// }
// }
self.setState({
checkedAll: !self.state.checkedAll,
checkedArray: checkedArray,
// selIds: selIds
});
// self.props.onSelIds(selIds);
};
onCheckboxChange = (text, record, index) => {
let self = this;
let allFlag = false;
// let selIds = self.state.selIds;
// let id = self.props.postId;
let checkedArray = self.state.checkedArray.concat();
// if (self.state.checkedArray[index]) {
// selIds.remove(record[id]);
// } else {
// selIds.push(record[id]);
// }
checkedArray[index] = !self.state.checkedArray[index];
for (var i = 0; i < self.state.checkedArray.length; i++) {
if (!checkedArray[i]) {
allFlag = false;
break;
} else {
allFlag = true;
}
}
self.setState({
checkedAll: allFlag,
checkedArray: checkedArray,
// selIds: selIds
});
// self.props.onSelIds(selIds);
};
renderColumnsMultiSelect(columns) {
const { data,checkedArray } = this.state;
const { multiSelect } = this.props;
let select_column = {};
let indeterminate_bool = false;
// let indeterminate_bool1 = true;
if (multiSelect && multiSelect.type === "checkbox") {
let i = checkedArray.length;
while(i--){
if(checkedArray[i]){
indeterminate_bool = true;
break;
}
}
let defaultColumns = [
{
title: (
<Checkbox
className="table-checkbox"
checked={this.state.checkedAll}
indeterminate={indeterminate_bool&&!this.state.checkedAll}
onChange={this.onAllCheckChange}
/>
),
key: "checkbox",
dataIndex: "checkbox",
width: "5%",
render: (text, record, index) => {
return (
<Checkbox
className="table-checkbox"
checked={this.state.checkedArray[index]}
onChange={this.onCheckboxChange.bind(this, text, record, index)}
/>
);
}
}
];
columns = defaultColumns.concat(columns);
}
return columns;
}
render() {
let columns = this.renderColumnsMultiSelect(columns12);
return <Table columns={columns} data={data12} />;
}
}
Demo12.defaultProps = defaultProps12;
export default Demo12;

View File

@ -1,130 +0,0 @@
/**
*
* @title 列排序全选功能合计
* @description 列排序全选功能合计通过使用的封装好的功能方法实现复杂功能简单易用
*
*/
import React, { Component } from "react";
import Table from "../../src";
import Checkbox from "bee-checkbox";
import Button from "bee-button";
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",
width: 200
},
{
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 data13 = [
{ a: "杨过", b: "男", c: 30, d: "内行", key: "2" },
{ a: "令狐冲", b: "男", c: 41, d: "大侠", key: "1" },
{ a: "郭靖", b: "男", c: 25, d: "大侠", key: "3" }
];
const data13_1 = [
{ a: "杨过", b: "男", c: 30, d: "内行", key: "2" },
{ a: "杨过", b: "男", c: 30, d: "内行", key: "22" },
{ a: "杨过", b: "男", c: 30, d: "内行", key: "222" },
{ a: "令狐冲", b: "男", c: 41, d: "大侠", key: "1" },
{ a: "郭靖", b: "男", c: 25, d: "大侠", key: "3" }
];
//拼接成复杂功能的table组件不能在render中定义需要像此例子声明在组件的外侧不然操作state会导致功能出现异常
let ComplexTable = multiSelect(sum(sort(Table)));
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() {}
});
};
onClick1 = () => {
this.setState({
selectDisabled: (record, index) => {
// console.log(record);
if (index === 2) {
return true;
}
return false;
}
});
};
render() {
let multiObj = {
type: "checkbox"
};
return (
<div>
<Button className="editable-add-btn" onClick={this.onClick}>
change selectedRow
</Button>
<Button
className="editable-add-btn"
style={{ marginLeft: "5px" }}
onClick={this.onClick1}
>
change selectDisabled
</Button>
<ComplexTable
selectDisabled={this.state.selectDisabled}
selectedRow={this.state.selectedRow}
columns={columns13}
data={this.state.data13}
multiSelect={multiObj}
getSelectedDataFunc={this.getSelectedDataFunc}
/>
</div>
);
}
}
export default Demo13;

View File

@ -1,308 +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 Tooltip from "bee-tooltip";
import Icon from "bee-icon";
import Input from "bee-form-control";
import Checkbox from "bee-checkbox";
import Select from "bee-select";
import InputRender from "../../build/render/InputRender.js";
import DateRender from "../../build/render/DateRender.js";
import SelectRender from "../../build/render/SelectRender.js";
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>
}
reg={/^[0-9]+$/}
/>
)
},
{
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>
}
/>
)
},
{
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;

View File

@ -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;

View File

@ -1,103 +0,0 @@
/**
*
* @title 嵌套子表格
* @description 通过expandedRowRender参数来实现子表格
*
*/
import React, { Component } from "react";
import Table from "../../src";
import multiSelect from "../../src/lib/multiSelect.js";
const columns16 = [
{ 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 data16 = [
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" },
{ a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
];
// let Table1 = multiSelect(Table)
class Demo16 extends Component {
constructor(props){
super(props);
this.state={
data_obj:{}
}
}
expandedRowRender = (record, index, indent) => {
return (
<Table
columns={columns16}
data={this.state.data_obj[record.key]}
title={currentData => <div>标题: 这是一个标题</div>}
footer={currentData => <div>表尾: 我是小尾巴</div>}
/>
);
};
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}
title={currentData => <div>标题: 这是一个标题</div>}
footer={currentData => <div>表尾: 我是小尾巴</div>}
/>
);
}
}
export default Demo16;

View File

@ -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;

View File

@ -1,142 +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"
},
{
title: "Company Name",
dataIndex: "companyName",
key: "companyName"
}
]
},
{
title: "Gender",
dataIndex: "gender",
key: "gender",
width: 60,
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
/>
</div>
);
}
}
export default Demo18;

View File

@ -1,246 +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 Tooltip from "bee-tooltip";
import Icon from "bee-icon";
import Input from "bee-form-control";
import Checkbox from "bee-checkbox";
import Select from "bee-select";
import InputRender from "../../build/render/InputRender.js";
import DateRender from "../../build/render/DateRender.js";
import SelectRender from "../../build/render/SelectRender.js";
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 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>
}
/>
)
},
{
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 });
};
};
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 Demo19;

View File

@ -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.target.value;
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;

View File

@ -1,68 +0,0 @@
/**
*
* @title 根据列进行过滤
* @description 点击表格右侧按钮进行表格列的数据过滤
*
*/
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";
const columns21 = [
{
title: "名字",
dataIndex: "a",
key: "a",
// width: 100
},
{
title: "性别",
dataIndex: "b",
key: "b",
// width: 100
},
{
title: "年龄",
dataIndex: "c",
key: "c",
// width: 200,
sumCol: true,
sorter: (a, b) => a.c - b.c
},
{
title: "武功级别",
dataIndex: "d",
key: "d"
}
];
const data21 = [
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
];
const FilterColumnTable = filterColumn(sum(Table));
const defaultProps21 = {
prefixCls: "bee-table"
};
class Demo21 extends Component {
constructor(props) {
super(props);
}
render() {
return <FilterColumnTable columns={columns21} data={data21} />;
}
}
Demo21.defaultProps = defaultProps21;
export default Demo21;

View File

@ -1,67 +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;

View File

@ -1,86 +0,0 @@
/**
*
* @title 动态设置固取消固定列
* @description 动态设置固取消固定列
*
*/
import React, { Component } from 'react';
import Table from '../../src';
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" , fixed: "left" },
{ title: "Column 2", dataIndex: "address", 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 data24 = [
{
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 Demo24 extends Component {
constructor(props) {
super(props);
let columns = [];
Object.assign(columns,columns24);
columns.forEach(da=>da.onHeadCellClick=this.onHeadCellClick);
this.state = {
columns
}
}
onHeadCellClick=(data,event)=>{
const {columns:_columns} = this.state;
let columns = [];
Object.assign(columns,_columns);
let currObj = columns.find(da=>da.key == data.key);
currObj.fixed?delete currObj.fixed:currObj.fixed = "left";
this.setState({
columns
});
}
render() {
const {columns} = this.state;
return <Table columns={columns} data={data24} scroll={{ x: "130%", y: 140 }}/>;
}
}
export default Demo24;

View File

@ -1,113 +0,0 @@
/**
*
* @title 表头分组
* @description columns[n] 可以内嵌 children以渲染分组表头
*
*/
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",
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",
children: [
{
title: "Company Address",
dataIndex: "companyAddress",
key: "companyAddress"
},
{
title: "Company Name",
dataIndex: "companyName",
key: "companyName"
}
]
},
{
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
columns={columns}
data={data}
bordered
scroll={{ x: "130%", y: 240 }}
/>
);
}
}
export default Demo3;

View File

@ -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;

View File

@ -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;

View File

@ -1,80 +0,0 @@
/**
*
* @title 固定表头
* @description 方便一页内展示大量数据需要指定 column width 属性否则列头和内容可能不对齐(还可以设置scroll来支持横向或纵向滚动)
*
*/
import React, { Component } from 'react';
import Table from '../../src';
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 <Table columns={columns6} data={data6} scroll={{ y: 150 }} />;
}
}
export default Demo6;

View File

@ -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;

View File

@ -1,72 +0,0 @@
/**
*
* @title 表格+分页
* @description 点击分页联动表格
*
*import {Table} from 'tinper-bee';
*/
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
boundaryLinks
items={2}
maxButtons={5}
activePage={this.state.activePage}
onSelect={this.handleSelect.bind(this)}
/>
</div>
);
}
}
export default Demo8;

View File

@ -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.target.value
});
};
/**
* 清空输入框
*/
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

5
dist/demo.css vendored
View File

@ -7866,7 +7866,8 @@ ul {
position: absolute;
top: 0px;
left: 0px;
height: 10px; }
height: 10px;
border: 1px solid; }
.u-table table {
width: 100%;
border-collapse: collapse;
@ -8033,7 +8034,7 @@ ul {
.u-table-thead-th .th-drag-gap {
background: transparent; }
.u-table-thead-th .th-drag-gap-hover {
background: red; }
background: #000; }
.u-table-thead-th:last-child-drag-gap {
border: none; }

2
dist/demo.css.map vendored

File diff suppressed because one or more lines are too long

52909
dist/demo.js vendored

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -221,7 +221,7 @@ class Table extends Component{
getHeader(columns, fixed) {
const { showHeader, expandIconAsCell, clsPrefix ,onDragStart,onDragEnter,onDragOver,onDrop,draggable,
onMouseDown,onMouseMove,onMouseUp,dragborder} = this.props;
onMouseDown,onMouseMove,onMouseUp,dragborder,onThMouseMove} = this.props;
const rows = this.getHeaderRows(columns);
if (expandIconAsCell && fixed !== 'right') {
rows[0].unshift({
@ -234,7 +234,7 @@ class Table extends Component{
const trStyle = fixed ? this.getHeaderRowStyle(columns, rows) : null;
let drop = draggable?{onDragStart,onDragOver,onDrop,onDragEnter,draggable}:{};
let dragBorder = dragborder?{onMouseDown,onMouseMove,onMouseUp,dragborder}:{};
let dragBorder = dragborder?{onMouseDown,onMouseMove,onMouseUp,dragborder,onThMouseMove}:{};
return showHeader ? (
<TableHeader
{...drop}
@ -462,7 +462,7 @@ class Table extends Component{
renderDragHideTable=()=>{
const {columns,} = this.props;
let sum = 0;
return(<div className={`${this.props.clsPrefix}-hiden-drag`} >
return(<div id="u-table-drag-hide-table" className={`${this.props.clsPrefix}-hiden-drag`} >
{
columns.map((da,i)=>{
sum += da.width?da.width:0;
@ -537,7 +537,9 @@ class Table extends Component{
) : null;
return (
<table className={` ${tableClassName} table table-bordered `} style={tableStyle}>
{this.getColGroup(columns, fixed)}
{/* {
this.props.dragborder?"":this.getColGroup(columns, fixed)
} */}
{hasHead ? this.getHeader(columns, fixed) : null}
{tableBody}
</table>

View File

@ -27,13 +27,14 @@ $table-move-in-color: $bg-color-base;
}
&-hiden-drag{
position: relative;
// z-index: 9999;
&-li{
position: absolute;
top: 0px;
left: 0px;
height: 10px;
// border: 1px solid;
border: 1px solid;
}
}
table {
@ -293,7 +294,7 @@ $table-move-in-color: $bg-color-base;
background:transparent;
}
.th-drag-gap-hover{
background: red;
background: #000;
}
}
&-th:last-child {

View File

@ -56,37 +56,58 @@ class TableHeader extends Component{
onMouseMove=(event,data)=>{
console.log("onMouseMove----" ,this.border);
if(this.border)return;
const {clsPrefix} = this.props;
if(this.border){
let x = (event.pageX - this.drag.initPageLeftX) + this.drag.initLeft;
}else{
// if(this.border){
// console.log("xxxx-------000");
// let x = (event.pageX - this.drag.initPageLeftX) + this.drag.initLeft;
// console.log("xxxx-------" ,x);
// }else{
event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`;
}
// }
}
onMouseOut=(event,data)=>{
if(this.border)return;
const {clsPrefix} = this.props;
event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap`;
}
onMouseDown=(event,data)=>{
this.border = true;
const {clsPrefix} = this.props;
event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`;
// event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap-hover`;
this.drag.initPageLeftX = event.pageX;
this.drag.initLeft = tryParseInt(event.target.style.left);
this.drag.x = this.drag.initLeft;
this.drag.currIndex = this.props.rows[0].findIndex(da=>da.key==data.key);
console.log("--onThMouseMove---"+this.border);
}
onMouseUp=(event,data)=>{
this.border = false;
const {clsPrefix} = this.props;
event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap`;
let endx = (event.pageX-this.dragBorderObj.initPageLeftX);
// event.target.offsetWidth
}
onThMouseUp=(event,data)=>{
this.border = false;
const {clsPrefix} = this.props;
// event.target.className = `${clsPrefix}-thead-th-drag-gap th-drag-gap`;
}
onThMouseMove=(event,data)=>{
if(!this.border)return;
let x = (event.pageX - this.drag.initPageLeftX) + this.drag.initLeft-0;
//设置hiden的left
let currentHideDom = document.getElementById("u-table-drag-hide-table").getElementsByTagName("div")[this.drag.currIndex];
currentHideDom.style.left = (this.drag.initPageLeftX+x-15)+"px";
//设置当前的宽度
// event.target.style.width = (data.width+x)+"px";
let currentDom = document.getElementById("u-table-drag-thead").getElementsByTagName("th")[this.drag.currIndex];
currentDom.style.width = (data.width+x)+"px";
//设置他的后一个的宽度
let currentLastDom = document.getElementById("u-table-drag-thead").getElementsByTagName("div")[this.drag.currIndex+1];
let _x = x<0?(-1*x):x;
currentLastDom.style.left = (this.drag.initPageLeftX+x)+"px";
}
render() {
@ -94,7 +115,7 @@ class TableHeader extends Component{
onMouseDown,onMouseMove,onMouseUp,dragborder,onMouseOut
} = this.props;
return (
<thead className={`${clsPrefix}-thead`}>
<thead className={`${clsPrefix}-thead`} id="u-table-drag-thead">
{
rows.map((row, index) => (
<tr key={index} style={rowStyle}>
@ -118,7 +139,9 @@ class TableHeader extends Component{
// onDragEnter={(event)=>{this.onDragGapEnter(event,da)}}
// onMouseDown={(event)=>{onMouseDown(event,da)}}
style={{width:da.width}}
onMouseMove={(event)=>{this.onThMouseMove(event,da)}}
onMouseUp={(event)=>{this.onThMouseUp(event,da)}}
// onMouseUp={(event)=>{onMouseUp(event,da)}}
// {...da}
className={`${da.className} ${clsPrefix}-thead-th `}

View File

@ -124,11 +124,23 @@ export default function dragColumn(Table) {
}
onThMouseMove=(event,data,left)=>{
const {columns:_columns} = this.state;
let columns = [];
Object.assign(columns,_columns);
let currObj = columns.find((_da,i)=>_da.key == data.key);
if(currObj.width){
currObj.width = (currObj.width + left);
}
console.log("currObj.width---",currObj.width + " _ " + left);
this.setState({
columns
})
}
render() {
const {data,dragborder,draggable,className} = this.props;
const {columns} = this.state;
return (<Table {...this.props} columns={columns} data={data} className={`${className} u-table-drag-border`}
onDragStart={this.onDragStart} onDragOver={this.onDragOver} onDrop={this.onDrop}
onDragEnter={this.onDragEnter}
@ -138,6 +150,8 @@ export default function dragColumn(Table) {
onMouseDown={this.onMouseDown}
onMouseMove={this.onMouseMove}
onMouseUp={this.onMouseUp}
onThMouseMove={this.onThMouseMove}
/>)
}
};