Merge branch 'master' of github.com:tinper-bee/bee-table
This commit is contained in:
jonyshi
commit
dcde67d791
|
|
@ -2,7 +2,8 @@
|
|||
*
|
||||
* @title 基本表格
|
||||
* @parent 基础 Basic
|
||||
* @description 鼠标hover行时呼出操作按钮。单元格数据过长时，可结合Tooltip组件使用。
|
||||
* @description 单元格数据过长时，可结合Tooltip组件使用。
|
||||
* demo0101
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
|
|
@ -11,9 +12,8 @@ import Table from "../../src";
|
|||
|
||||
const columns = [
|
||||
{
|
||||
title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
|
||||
title: "员工编号", dataIndex: "a", key: "a", width: 120, className: "rowClassName",
|
||||
fixed:'left',
|
||||
textAlign:'center',
|
||||
render: (text, record, index) => {
|
||||
return (
|
||||
<Tooltip inverse overlay={text}>
|
||||
|
|
@ -29,15 +29,16 @@ const columns = [
|
|||
);
|
||||
}
|
||||
},
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width: 500,textAlign:'center'},
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 500,textAlign:'center'},
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 200,textAlign:'center' }
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width:100 },
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 100 },
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 100 },
|
||||
{ title: "职级", dataIndex: "e", key: "e", width: 100 }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", e: "T2", key: "3" }
|
||||
];
|
||||
|
||||
class Demo01 extends Component {
|
||||
|
|
@ -53,24 +54,11 @@ class Demo01 extends Component {
|
|||
console.log('内容：' , this.currentRecord);
|
||||
}
|
||||
|
||||
onRowHover=(index,record)=>{
|
||||
this.currentIndex = index;
|
||||
this.currentRecord = record;
|
||||
}
|
||||
|
||||
getHoverContent=()=>{
|
||||
return <div className="opt-btns"><Button size="sm" onClick={this.handleClick}>一些操作</Button> </div>
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
parentNodeId='parent'
|
||||
bordered = {true}
|
||||
hoverContent={this.getHoverContent}
|
||||
onRowHover={this.onRowHover}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
*
|
||||
* @title 默认无数据展示
|
||||
* @parent 基础 Basic
|
||||
* @description 无数据时显示效果展示（可自定义）
|
||||
*
|
||||
* @description 无数据时默认展示图标，可在`emptyText`方法中自定义展示内容。
|
||||
* demo0102
|
||||
*/
|
||||
|
||||
|
||||
|
|
@ -33,11 +33,18 @@ const columns02 = [
|
|||
|
||||
const data02 = [];
|
||||
|
||||
const emptyFunc = () => <Icon type="uf-nodata"></Icon>
|
||||
// 在此自定义无数据时的展示内容
|
||||
const emptyFunc = () => 'No Data';
|
||||
|
||||
class Demo02 extends Component {
|
||||
render() {
|
||||
return <Table className="demo02" columns={columns02} data={data02} emptyText={emptyFunc} />;
|
||||
return (
|
||||
<Table
|
||||
columns={columns02}
|
||||
data={data02}
|
||||
// emptyText={emptyFunc}
|
||||
/>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +0,0 @@
|
|||
.demo02 {
|
||||
.u-table-placeholder i{
|
||||
font-size: 60px;
|
||||
line-height: 60px;
|
||||
}
|
||||
}
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
* @title 固定表头
|
||||
* @parent 基础 Basic
|
||||
* @description 设置`scroll.y`指定滚动区域的高度，达到固定表头效果
|
||||
* demo0103
|
||||
*/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* @title 隔行换色
|
||||
* @parent 基础 Basic
|
||||
* @description 可自定义斑马线颜色
|
||||
*
|
||||
* demo0104
|
||||
*/
|
||||
|
||||
|
||||
|
|
@ -11,64 +11,92 @@ import React, { Component } from 'react';
|
|||
import Table from '../../src';
|
||||
|
||||
const columns04 = [
|
||||
{
|
||||
title: "员工姓名",
|
||||
width: 100,
|
||||
dataIndex: "name",
|
||||
key: "name"
|
||||
{title: "序号",dataIndex: "index",key: "index",width: 80,
|
||||
render(text, record, index) {
|
||||
return index + 1;
|
||||
}
|
||||
},
|
||||
{ title: "年龄", width: 100, dataIndex: "age", key: "age"},
|
||||
{ title: "住址", dataIndex: "address", key: "1" }
|
||||
{title: "订单编号",dataIndex: "orderCode",key: "orderCode",width: 200},
|
||||
{title: "供应商名称",dataIndex: "supplierName",key: "supplierName",width: 200},
|
||||
{title: "类型",dataIndex: "type_name",key: "type_name",width: 200},
|
||||
{title: "采购组织",dataIndex: "purchasing",key: "purchasing",width: 200},
|
||||
{title: "采购组",dataIndex: "purchasingGroup",key: "purchasingGroup",width: 200},
|
||||
{title: "凭证日期",dataIndex: "voucherDate",key: "voucherDate",width: 200}
|
||||
];
|
||||
|
||||
const data04 = [
|
||||
{
|
||||
key: "1",
|
||||
name: "John Brown",
|
||||
age: 32,
|
||||
address: "New York Park"
|
||||
orderCode:"NU0391025",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "1",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年03月18日",
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
address: "London Park"
|
||||
orderCode:"NU0391026",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "2",
|
||||
purchasing:'组织a',
|
||||
purchasingGroup:"bb",
|
||||
voucherDate:"2018年02月05日",
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
address: "London Park"
|
||||
orderCode:"NU0391027",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "3",
|
||||
purchasing:'组织b',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年07月01日",
|
||||
key: "3"
|
||||
},
|
||||
{
|
||||
key: "4",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
address: "London Park"
|
||||
},{
|
||||
key: "11",
|
||||
name: "John Brown",
|
||||
age: 32,
|
||||
address: "New York Park"
|
||||
orderCode:"NU0391028",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "4",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"cc",
|
||||
voucherDate:"2019年03月01日",
|
||||
key: "4"
|
||||
},
|
||||
{
|
||||
key: "12",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
address: "London Park"
|
||||
orderCode:"NU0391029",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "5",
|
||||
purchasing:'组织d',
|
||||
purchasingGroup:"ss",
|
||||
voucherDate:"2019年02月14日",
|
||||
key: "5"
|
||||
},
|
||||
{
|
||||
key: "13",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
address: "London Park"
|
||||
orderCode:"NU0391030",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "1",
|
||||
purchasing:'组织e',
|
||||
purchasingGroup:"zz",
|
||||
voucherDate:"2019年02月18日",
|
||||
key: "6"
|
||||
},
|
||||
{
|
||||
key: "14",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
address: "London Park"
|
||||
}
|
||||
orderCode:"NU0391031",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "2",
|
||||
purchasing:'组织f',
|
||||
purchasingGroup:"qq",
|
||||
voucherDate:"2019年01月01日",
|
||||
key: "7"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391032",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "3",
|
||||
purchasing:'组织g',
|
||||
purchasingGroup:"pp",
|
||||
voucherDate:"2019年01月31日",
|
||||
key: "8"
|
||||
},
|
||||
];
|
||||
|
||||
class Demo04 extends Component {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* @title 表格 Loading 加载
|
||||
* @parent 基础 Basic
|
||||
* @description loading可以传boolean或者object对象，object为bee-loading组件的参数类型
|
||||
*
|
||||
* demo0105
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
|
|
|
|||
|
|
@ -1,8 +1,9 @@
|
|||
/**
|
||||
*
|
||||
* @title 基本表格
|
||||
* @title 单元格内容居中
|
||||
* @parent 基础 Basic
|
||||
* @description 鼠标hover行时呼出操作按钮。单元格数据过长时，可结合Tooltip组件使用。
|
||||
* @description 在columns数据中设置`textAlign:'center'`，可实现单元格内容居中展示的效果。默认是居左显示。
|
||||
* demo0106
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
|
|
@ -11,7 +12,7 @@ import Table from "../../src";
|
|||
|
||||
const columns = [
|
||||
{
|
||||
title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName",
|
||||
title: "员工编号", dataIndex: "a", key: "a", width: 120, className: "rowClassName",
|
||||
fixed:'left',
|
||||
textAlign:'center',
|
||||
render: (text, record, index) => {
|
||||
|
|
@ -29,18 +30,19 @@ const columns = [
|
|||
);
|
||||
}
|
||||
},
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width: 500,textAlign:'center'},
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 500,textAlign:'center'},
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 200,textAlign:'center' }
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width:100,textAlign:'center'},
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 100,textAlign:'center'},
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 100,textAlign:'center' },
|
||||
{ title: "职级", dataIndex: "e", key: "e", width: 100,textAlign:'center' }
|
||||
];
|
||||
|
||||
const data = [
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", e: "M1", key: "1" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", e: "T1", key: "2" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", e: "T2", key: "3" }
|
||||
];
|
||||
|
||||
class Demo01 extends Component {
|
||||
class Demo06 extends Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
|
@ -53,26 +55,15 @@ class Demo01 extends Component {
|
|||
console.log('内容：' , this.currentRecord);
|
||||
}
|
||||
|
||||
onRowHover=(index,record)=>{
|
||||
this.currentIndex = index;
|
||||
this.currentRecord = record;
|
||||
}
|
||||
|
||||
getHoverContent=()=>{
|
||||
return <div className="opt-btns"><Button size="sm" onClick={this.handleClick}>一些操作</Button> </div>
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Table
|
||||
columns={columns}
|
||||
data={data}
|
||||
height={40}
|
||||
hoverContent={this.getHoverContent}
|
||||
onRowHover={this.onRowHover}
|
||||
bordered
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export default Demo01;
|
||||
export default Demo06;
|
||||
|
|
@ -3,6 +3,7 @@
|
|||
* @title 横向滚动条
|
||||
* @parent 滚动 Scroll View
|
||||
* @description 设置`scroll`属性支持横向或纵向滚动，x/y的取值可以是正整数、百分比、布尔值
|
||||
* demo0201
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
|
|
|
|||
|
|
@ -3,75 +3,104 @@
|
|||
* @title 纵向滚动条
|
||||
* @parent 滚动 Scroll View
|
||||
* @description 设置`scroll`属性支持横向或纵向滚动，x/y的取值可以是正整数、百分比、布尔值
|
||||
* demo0202
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
|
||||
const columns12 = [
|
||||
{
|
||||
title: "Full Name",
|
||||
width: 100,
|
||||
dataIndex: "name",
|
||||
key: "name"
|
||||
const columns = [
|
||||
{title: "序号",dataIndex: "index",key: "index",width: 80,
|
||||
render(text, record, index) {
|
||||
return index + 1;
|
||||
}
|
||||
},
|
||||
{ title: "Age", width: 100, dataIndex: "age", key: "age"},
|
||||
{ title: "Address", dataIndex: "address", key: "1" }
|
||||
{title: "订单编号",dataIndex: "orderCode",key: "orderCode",width: 200},
|
||||
{title: "供应商名称",dataIndex: "supplierName",key: "supplierName",width: 200},
|
||||
{title: "类型",dataIndex: "type_name",key: "type_name",width: 200},
|
||||
{title: "采购组织",dataIndex: "purchasing",key: "purchasing",width: 200},
|
||||
{title: "采购组",dataIndex: "purchasingGroup",key: "purchasingGroup",width: 200},
|
||||
{title: "凭证日期",dataIndex: "voucherDate",key: "voucherDate",width: 200}
|
||||
];
|
||||
|
||||
const data12 = [
|
||||
const data = [
|
||||
{
|
||||
key: "1",
|
||||
name: "John Brown",
|
||||
age: 32,
|
||||
address: "New York Park"
|
||||
orderCode:"NU0391025",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "1",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年03月18日",
|
||||
key: "1"
|
||||
},
|
||||
{
|
||||
key: "2",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
address: "London Park"
|
||||
orderCode:"NU0391026",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "2",
|
||||
purchasing:'组织a',
|
||||
purchasingGroup:"bb",
|
||||
voucherDate:"2018年02月05日",
|
||||
key: "2"
|
||||
},
|
||||
{
|
||||
key: "3",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
address: "London Park"
|
||||
orderCode:"NU0391027",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "3",
|
||||
purchasing:'组织b',
|
||||
purchasingGroup:"aa",
|
||||
voucherDate:"2018年07月01日",
|
||||
key: "3"
|
||||
},
|
||||
{
|
||||
key: "4",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
address: "London Park"
|
||||
},{
|
||||
key: "11",
|
||||
name: "John Brown",
|
||||
age: 32,
|
||||
address: "New York Park"
|
||||
orderCode:"NU0391028",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "4",
|
||||
purchasing:'组织c',
|
||||
purchasingGroup:"cc",
|
||||
voucherDate:"2019年03月01日",
|
||||
key: "4"
|
||||
},
|
||||
{
|
||||
key: "12",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
address: "London Park"
|
||||
orderCode:"NU0391029",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "5",
|
||||
purchasing:'组织d',
|
||||
purchasingGroup:"ss",
|
||||
voucherDate:"2019年02月14日",
|
||||
key: "5"
|
||||
},
|
||||
{
|
||||
key: "13",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
address: "London Park"
|
||||
orderCode:"NU0391030",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "1",
|
||||
purchasing:'组织e',
|
||||
purchasingGroup:"zz",
|
||||
voucherDate:"2019年02月18日",
|
||||
key: "6"
|
||||
},
|
||||
{
|
||||
key: "14",
|
||||
name: "Jim Green",
|
||||
age: 40,
|
||||
address: "London Park"
|
||||
}
|
||||
orderCode:"NU0391031",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "2",
|
||||
purchasing:'组织f',
|
||||
purchasingGroup:"qq",
|
||||
voucherDate:"2019年01月01日",
|
||||
key: "7"
|
||||
},
|
||||
{
|
||||
orderCode:"NU0391032",
|
||||
supplierName: "xx供应商",
|
||||
type_name: "3",
|
||||
purchasing:'组织g',
|
||||
purchasingGroup:"pp",
|
||||
voucherDate:"2019年01月31日",
|
||||
key: "8"
|
||||
},
|
||||
];
|
||||
class Demo12 extends Component {
|
||||
render() {
|
||||
return (
|
||||
<Table bordered columns={columns12} data={data12} scroll={{y:150 }} />
|
||||
<Table columns={columns} data={data} scroll={{y:150 }} />
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
* @title 渲染本地数据
|
||||
* @parent 数据操作 Data Opetation
|
||||
* @description 可自定义页头和页脚。
|
||||
* demo0301
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
* @title 渲染远程数据
|
||||
* @parent 数据操作 Data Opetation
|
||||
* @description 可通过 ajax 请求方式，从服务端读取并展现数据。也可自行接入其他数据处理方式。
|
||||
* demo0302
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
* @parent 列渲染 Custom Render
|
||||
* @description columns[n] 可以内嵌 children，以渲染分组表头。
|
||||
* 自定义表头高度需要传headerHeight，注：修改th的padding top和bottom置为0，否则会有影响
|
||||
*
|
||||
* demo0402
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
* @title 数据关联
|
||||
* @parent 列渲染 Custom Render
|
||||
* @description 数据行关联自定义菜单显示
|
||||
* demo0404
|
||||
*/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* @title 列合计（总计）
|
||||
* @parent 列渲染 Custom Render
|
||||
* @description 给需要计算合计的列（columns），设置sumCol值为true即可，支持动态设置数据源。
|
||||
*
|
||||
* demo0405
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* @title 编辑态表格
|
||||
* @parent 编辑 Editor
|
||||
* @description 这是带有多种不同格式的编辑态表格（编辑态是通过使用不同的render来达到不同编辑格式）
|
||||
*
|
||||
* demo0501
|
||||
*/
|
||||
|
||||
import React from "react";
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
*
|
||||
* @title 单元格编辑
|
||||
* @description 可以对单元格进行编辑的表格，示例中给出输入框+必填校验、下拉框编辑模式，以及输入模式的必填校验。
|
||||
*
|
||||
* demo0502
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import Table from "../../src";
|
||||
|
|
@ -80,7 +80,7 @@ class StringEditCell extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
const SELECT_SOURCE = ["普通", "精良", "稀有", "传奇", "远古传奇", "太古传奇"];
|
||||
const SELECT_SOURCE = ["xx供应商", "yy供应商", "zz供应商", "aa供应商", "bb供应商"];
|
||||
|
||||
class SelectEditCell extends Component {
|
||||
constructor(props, context) {
|
||||
|
|
@ -137,11 +137,11 @@ class SelectEditCell extends Component {
|
|||
}
|
||||
|
||||
const dataSource = [
|
||||
{ name: "全能法戒", quality: "远古传奇", level: 70, key: "1" },
|
||||
{ name: "绝命", quality: "太古传奇", level: 70, key: "2" },
|
||||
{ name: "蚀刻符印", quality: "太古传奇", level: 70, key: "3" },
|
||||
{ name: "虹光", quality: "传奇", level: 70, key: "4" },
|
||||
{ name: "复仇者护腕", quality: "传奇", level: 70, key: "5" }
|
||||
{ name: "NU03910001", quality: "xx供应商", level: 70, key: "1" },
|
||||
{ name: "NU03910002", quality: "yy供应商", level: 75, key: "2" },
|
||||
{ name: "NU03910003", quality: "zz供应商", level: 50, key: "3" },
|
||||
{ name: "NU03910004", quality: "aa供应商", level: 70, key: "4" },
|
||||
{ name: "NU03910005", quality: "bb供应商", level: 60, key: "5" }
|
||||
];
|
||||
|
||||
class Demo501 extends Component {
|
||||
|
|
@ -149,19 +149,19 @@ class Demo501 extends Component {
|
|||
super(props);
|
||||
this.columns = [
|
||||
{
|
||||
title: "装备名称",
|
||||
title: "订单编号",
|
||||
dataIndex: "name",
|
||||
key: "name",
|
||||
render: (text, record, index) => (
|
||||
<StringEditCell
|
||||
value={text}
|
||||
colName={"装备名称"}
|
||||
colName={"订单编号"}
|
||||
onChange={this.onCellChange(index, "name")}
|
||||
/>
|
||||
)
|
||||
},
|
||||
{
|
||||
title: "品质",
|
||||
title: "供应商名称",
|
||||
dataIndex: "quality",
|
||||
key: "quality",
|
||||
render: (text, record, index) => (
|
||||
|
|
@ -172,7 +172,7 @@ class Demo501 extends Component {
|
|||
)
|
||||
},
|
||||
{
|
||||
title: "需求等级",
|
||||
title: "采购数量",
|
||||
dataIndex: "level",
|
||||
key: "level"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* @title 左侧固定列
|
||||
* @parent 列操作-锁定 Fixed
|
||||
* @description 固定列到表格的左侧
|
||||
*
|
||||
* demo0601
|
||||
*/
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* @title 右侧固定列
|
||||
* @parent 列操作-锁定 Fixed
|
||||
* @description 固定列到表格的右侧
|
||||
*
|
||||
* demo0602
|
||||
*/
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* @title 动态设置列锁定、解除锁定
|
||||
* @parent 列操作-锁定 Fixed
|
||||
* @description 动态设置columns中数据的fixed属性值【fixed: "left"，fixed: "right"】。
|
||||
*
|
||||
* demo0603
|
||||
*/
|
||||
import React, { Component } from 'react';
|
||||
import {Icon,Menu,Dropdown} from "tinper-bee";
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* @title 按条件、值过滤
|
||||
* @parent 列操作-过滤 Filter
|
||||
* @description 可以根据输入项目以及判断条件对表格内的数据进行过滤。可在控制台查看序列化后的参数字符串。
|
||||
*
|
||||
* demo0701
|
||||
*/
|
||||
|
||||
import React, { Component } from 'react';
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* @title 复杂表格中行过滤
|
||||
* @parent 列操作-过滤 Filter
|
||||
* @description 在过滤数据行的基础上增加列拖拽、动态菜单显示、下拉条件动态传入自定义等
|
||||
*
|
||||
* demo0702
|
||||
*/
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* @title 列过滤面板
|
||||
* @parent 列操作-隐藏 Hide
|
||||
* @description 点击表头右侧按钮，设置显示或隐藏表格列。可以自定义设置显示某列，通过ifshow属性控制，默认值为true（显示表格所有列）。afterFilter方法为列过滤后触发的回调函数。
|
||||
*
|
||||
* demo0802
|
||||
*/
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
* @title 列排序
|
||||
* @parent 列操作-排序 Sort
|
||||
* @description column中增加sorter: (a, b) => a.c - b.c 这里的a,b代表前后两个数据，c代表比较当前对象的字段名称
|
||||
*
|
||||
* demo0901
|
||||
*/
|
||||
|
||||
|
||||
|
|
@ -14,35 +14,42 @@ import sort from "../../src/lib/sort.js";
|
|||
let ComplexTable = sort(Table, Icon);
|
||||
const columns11 = [
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: 100
|
||||
title: "单据编号",
|
||||
dataIndex: "num",
|
||||
key: "num",
|
||||
width: 120,
|
||||
fixed: "left"
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
title: "单据日期",
|
||||
dataIndex: "date",
|
||||
key: "date",
|
||||
width: 200,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d"
|
||||
title: "供应商",
|
||||
dataIndex: "supplier",
|
||||
key: "supplier",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "联系人",
|
||||
dataIndex: "contact",
|
||||
key: "contact",
|
||||
},
|
||||
{
|
||||
title: "整单数量",
|
||||
dataIndex: "total",
|
||||
key: "total",
|
||||
width: 150,
|
||||
sorter: (a, b) => a.total - b.total
|
||||
}
|
||||
];
|
||||
|
||||
const data11 = [
|
||||
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
|
||||
{ num: "NU0391001", date: "2019-03-01", supplier: 'xx供应商',contact:'Tom', total:30 ,key: "1" },
|
||||
{ num: "NU0391002", date: "2018-11-02", supplier: 'yy供应商',contact:'Jack', total:41 ,key: "2" },
|
||||
{ num: "NU0391003", date: "2019-05-03", supplier: 'zz供应商',contact:'Jane', total:25 ,key: "3" }
|
||||
];
|
||||
|
||||
const defaultProps11 = {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
* @title 后端列排序
|
||||
* @parent 列操作-排序 Sort
|
||||
* @description 可在控制台中查看序列化后的参数字符串，将参数传递给后端即可进行列排序
|
||||
* demo0902
|
||||
*/
|
||||
|
||||
|
||||
|
|
@ -11,43 +12,89 @@ import Table from '../../src';
|
|||
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 columns11 = [
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: 100
|
||||
title: "单据编号",
|
||||
dataIndex: "num",
|
||||
key: "num",
|
||||
width: 120,
|
||||
fixed: "left"
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
title: "单据日期",
|
||||
dataIndex: "date",
|
||||
key: "date",
|
||||
width: 200,
|
||||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
dataIndex: "d",
|
||||
key: "d"
|
||||
title: "供应商",
|
||||
dataIndex: "supplier",
|
||||
key: "supplier",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "分数",
|
||||
dataIndex: "e",
|
||||
key: "e",
|
||||
sorter: (a, b) => a.c - b.c
|
||||
title: "联系人",
|
||||
dataIndex: "contact",
|
||||
key: "contact",
|
||||
},
|
||||
{
|
||||
title: "整单数量",
|
||||
dataIndex: "total",
|
||||
key: "total",
|
||||
width: 150,
|
||||
sorter: (a, b) => a.total - b.total
|
||||
},
|
||||
{
|
||||
title: "金额",
|
||||
dataIndex: "money",
|
||||
key: "money",
|
||||
width: 100,
|
||||
sorter: (a, b) => a.money - b.money
|
||||
}
|
||||
];
|
||||
|
||||
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" }
|
||||
{ num: "NU0391001", date: "2019-03-01", supplier: 'xx供应商',contact:'Tom', total:30 ,money: 100,key: "1" },
|
||||
{ num: "NU0391002", date: "2018-11-02", supplier: 'yy供应商',contact:'Jack', total:41 ,money: 50,key: "2" },
|
||||
{ num: "NU0391003", date: "2019-05-03", supplier: 'zz供应商',contact:'Jane', total:25 ,money: 200,key: "3" }
|
||||
];
|
||||
|
||||
const defaultProps = {
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* @title 多列排序
|
||||
* @parent 列操作-排序 Sort
|
||||
* @description 结合多列排序、全选功能、合计功能的表格示例。新增排序后触发的回调函数sorterClick。
|
||||
*
|
||||
* demo0903
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
|
|
@ -15,14 +15,14 @@ import sum from "../../src/lib/sum.js";
|
|||
|
||||
const columns13 = [
|
||||
{
|
||||
title: "名字",
|
||||
title: "订单编号",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
className:'dfasd',
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "功力指数",
|
||||
title: "金额",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 200,
|
||||
|
|
@ -34,7 +34,7 @@ const columns13 = [
|
|||
}
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
title: "整单数量",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 200,
|
||||
|
|
@ -46,7 +46,7 @@ const columns13 = [
|
|||
}
|
||||
},
|
||||
{
|
||||
title: "成绩",
|
||||
title: "日销售量",
|
||||
dataIndex: "e",
|
||||
key: "e",
|
||||
width: 200,
|
||||
|
|
@ -54,7 +54,7 @@ const columns13 = [
|
|||
sorter: (a, b) => a.c - b.c,
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
title: "供应商",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 200
|
||||
|
|
@ -62,11 +62,11 @@ const columns13 = [
|
|||
];
|
||||
|
||||
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" }
|
||||
{ a: "NU0391001", b: 675, c: 30, d: "xx供应商",e:100, key: "2" },
|
||||
{ a: "NU0391002", b: 43, c: 41, d: "yy供应商",e:90, key: "1" },
|
||||
{ a: "NU0391003", b: 43, c: 81, d: "zz供应商", e:120,key: "4" },
|
||||
{ a: "NU0391004", b: 43, c: 81, d: "aa供应商", e:130,key: "5" },
|
||||
{ a: "NU0391005", b: 153, c: 25, d: "bb供应商",e:90, key: "3" }
|
||||
];
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
* @title 拖拽改变列顺序
|
||||
* @parent 列操作-拖拽 Drag
|
||||
* @description 点击选择表头并左右拖拽，可以改变表格列顺序。onDrop方法是拖拽交换列后触发的回调函数。注意：固定列不可以交换。
|
||||
* demo1001
|
||||
*/
|
||||
import React, { Component } from 'react';
|
||||
import {Icon} from "tinper-bee";
|
||||
|
|
@ -12,19 +13,19 @@ import dragColumn from '../../src/lib/dragColumn';
|
|||
|
||||
const columns = [
|
||||
{
|
||||
title: "名字",
|
||||
title: "订单编号",
|
||||
dataIndex: "a",
|
||||
key: "a",
|
||||
width: 100
|
||||
},
|
||||
{
|
||||
title: "性别",
|
||||
title: "单据日期",
|
||||
dataIndex: "b",
|
||||
key: "b",
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: "年龄",
|
||||
title: "供应商",
|
||||
dataIndex: "c",
|
||||
key: "c",
|
||||
width: 200,
|
||||
|
|
@ -32,7 +33,7 @@ const columns = [
|
|||
sorter: (a, b) => a.c - b.c
|
||||
},
|
||||
{
|
||||
title: "武功级别",
|
||||
title: "联系人",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
width: 200,
|
||||
|
|
@ -40,9 +41,9 @@ const columns = [
|
|||
];
|
||||
|
||||
const data = [
|
||||
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" }
|
||||
{ a: "NU0391001", b: "2019-03-01", c: 'xx供应商',d:'Tom', key: "2" },
|
||||
{ a: "NU0391002", b: "2018-11-02", c: 'yy供应商',d:'Jack', key: "1" },
|
||||
{ a: "NU0391003", b: "2019-05-03", c: 'zz供应商',d:'Jane', key: "3" }
|
||||
];
|
||||
|
||||
const DragColumnTable = dragColumn(Table);
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
* @title 拖拽改变列宽度
|
||||
* @parent 列操作-拖拽 Drag
|
||||
* @description onDropBorder方法为调整列宽后触发的回调函数。注：不支持tree结构的表头、合并表头的table。
|
||||
* demo1002
|
||||
*/
|
||||
import React, { Component } from 'react';
|
||||
import {Icon} from "tinper-bee";
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* @title 嵌套子表格
|
||||
* @parent 扩展行 Expanded Row
|
||||
* @description 通过expandedRowRender参数来实现子表格
|
||||
*
|
||||
* demo1101
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* @title 树型表格数据展示
|
||||
* @parent 扩展行 Expanded Row
|
||||
* @description 通过在data中配置children数据，来自动生成树形表格
|
||||
*
|
||||
* demo1102
|
||||
*/
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
* @title 自定义表格标题、表尾、选中行颜色
|
||||
* @parent 扩展行 Expanded Row
|
||||
* @description 可根据业务场景设置不同的`title`和`footer`。选中行颜色可用rowClassName作为选择器自定义css样式。
|
||||
* demo1103
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
* @title 紧凑型、宽松型
|
||||
* @parent 扩展行 Expanded Row
|
||||
* @description 设置`size`属性使用紧凑型表格(`sm`)或宽松型表格(`lg`)。
|
||||
* demo1105
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@
|
|||
*
|
||||
* @title 自定义行高
|
||||
* @parent 扩展行 Expanded Row
|
||||
* @description 设置`height`属性自定义表体行高，设置`headerHeight`属性自定义表头高度。
|
||||
* @description 设置`height`属性自定义表体行高，设置`headerHeight`属性自定义表头高度。鼠标hover行时呼出操作按钮。
|
||||
* demo1106
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
* @title 图片在表格中的展示
|
||||
* @parent 扩展行 Expanded Row
|
||||
* @description 根据图片高度自动撑开行高，可结合图片查看器使用 http://design.yonyoucloud.com/tinper-bee/bee-viewer
|
||||
* demo1107
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* @title 自定义行、列合并
|
||||
* @parent 扩展行 Expanded Row
|
||||
* @description 表头只支持列合并，使用 column 里的 colSpan 进行设置。表格支持行/列合并，使用 render 里的单元格属性 colSpan 或者 rowSpan 设值为 0 时，设置的表格不会渲染。
|
||||
*
|
||||
* demo1108
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
|
|
|
|||
|
|
@ -2,8 +2,8 @@
|
|||
*
|
||||
* @title 多选表格
|
||||
* @parent 行操作-选择
|
||||
* @description 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据。支持多选、全选和禁止选择。
|
||||
*
|
||||
* @description 支持多选、全选和禁止选择。getSelectedDataFunc方法是选中行的回调函数，返回当前选中的数据数组。给data数据添加_checked参数可设置当前数据是否选中，添加_disabled参数可禁止选择当前数据。
|
||||
* demo1301
|
||||
*/
|
||||
|
||||
|
||||
|
|
@ -13,39 +13,19 @@ import {Checkbox} from "tinper-bee";
|
|||
import Table from '../../src';
|
||||
import multiSelect from "../../src/lib/multiSelect.js";
|
||||
|
||||
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 columns = [
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName"},
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 500 },
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 200 }
|
||||
];
|
||||
|
||||
const data12 = [
|
||||
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2",_checked:true },
|
||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" ,_checked:false},
|
||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" ,_checked:false},
|
||||
{ a: "郭靖1", b: "男", c: 25,d:'大侠', key: "4" ,_disabled:true},
|
||||
{ a: "郭靖2", b: "男", c: 25,d:'大侠', key: "5" ,_checked:false}
|
||||
const data = [
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1",_checked:true },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2",_checked:false },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3",_checked:false },
|
||||
{ a: "ASVAL_201903280010", b: "小王", c: "女", d: "财务二科", key: "4",_disabled:true },
|
||||
{ a: "ASVAL_201903200021", b: "小李", c: "男", d: "财务一科", key: "5",_checked:false}
|
||||
];
|
||||
//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
|
||||
let MultiSelectTable = multiSelect(Table, Checkbox);
|
||||
|
|
@ -54,7 +34,7 @@ class Demo12 extends Component {
|
|||
constructor(props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
data: data12
|
||||
data: data
|
||||
};
|
||||
}
|
||||
/**
|
||||
|
|
@ -85,8 +65,8 @@ class Demo12 extends Component {
|
|||
};
|
||||
return (
|
||||
<MultiSelectTable
|
||||
columns={columns12}
|
||||
data={data12}
|
||||
columns={columns}
|
||||
data={data}
|
||||
multiSelect={multiObj}
|
||||
rowClassName={(record,index,indent)=>{
|
||||
if (record._checked) {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
* @title 万行以上数据渲染
|
||||
* @parent 无限滚动 Infinite-scroll
|
||||
* @description 万行数据渲染
|
||||
* demo1401
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* @title 嵌套子表格滚动加载
|
||||
* @parent 无限滚动 Infinite-scroll
|
||||
* @description 通过expandedRowRender参数来实现子表格
|
||||
*
|
||||
* demo1402
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
* @title 多功能表格滚动加载
|
||||
* @parent 无限滚动 Infinite-scroll
|
||||
* @description
|
||||
* demo1403
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
* @title 层级树大数据场景
|
||||
* @parent 无限滚动 Infinite-scroll
|
||||
* @description
|
||||
* demo1404
|
||||
*/
|
||||
import React, { Component } from "react";
|
||||
import {Tooltip} from "tinper-bee";
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
* @title 表格+分页
|
||||
* @parent 分页 Pagination
|
||||
* @description 点击分页联动表格
|
||||
* demo1601
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
|
|
@ -9,26 +10,22 @@ import {Pagination} from "tinper-bee";
|
|||
|
||||
import Table from "../../src";
|
||||
|
||||
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 columns = [
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName"},
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 500 },
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 200 }
|
||||
];
|
||||
|
||||
const pageData = {
|
||||
1: [
|
||||
{ a: "杨过", b: "男", c: 30, d: "内行", key: "2" },
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "大侠", key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25, d: "大侠", key: "3" }
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
|
||||
],
|
||||
2: [
|
||||
{ a: "芙蓉姐姐", b: "女", c: 23, d: "大侠", key: "1" },
|
||||
{ a: "芙蓉妹妹", b: "女", c: 23, d: "内行", key: "2" }
|
||||
{ a: "ASVAL_201903280010", b: "小王", c: "女", d: "财务二科", key: "4" },
|
||||
{ a: "ASVAL_201903200021", b: "小李", c: "男", d: "财务一科", key: "5" },
|
||||
]
|
||||
};
|
||||
|
||||
|
|
@ -51,7 +48,7 @@ class Demo8 extends Component {
|
|||
render() {
|
||||
return (
|
||||
<div className="demo8">
|
||||
<Table columns={columns8} data={this.state.data} />
|
||||
<Table columns={columns} data={this.state.data} />
|
||||
<Pagination
|
||||
first
|
||||
last
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
* @title 表格+搜索
|
||||
* @parent 搜索 search
|
||||
* @description 搜索刷新表格数据
|
||||
*
|
||||
* demo1602
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
|
|
@ -86,36 +86,17 @@ class Search extends Component {
|
|||
}
|
||||
}
|
||||
|
||||
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 columns = [
|
||||
{ title: "员工编号", dataIndex: "a", key: "a", width: 300, className: "rowClassName"},
|
||||
{ title: "员工姓名", dataIndex: "b", key: "b", width: 500 },
|
||||
{ title: "性别", dataIndex: "c", key: "c", width: 500 },
|
||||
{ title: "部门", dataIndex: "d", key: "d", width: 200 }
|
||||
];
|
||||
|
||||
const userData = [
|
||||
{ a: "杨过", b: "男", c: 30, d: "内行", key: "2" },
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "大侠", key: "1" },
|
||||
{ a: "郭靖", b: "男", c: 25, d: "大侠", key: "3" }
|
||||
{ a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
|
||||
{ a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
|
||||
{ a: "ASVAL_201903120002", b: "小红", c: "女", d: "财务一科", key: "3" }
|
||||
];
|
||||
|
||||
class Demo9 extends Component {
|
||||
|
|
@ -151,7 +132,7 @@ class Demo9 extends Component {
|
|||
<div className="clearfix">
|
||||
<Search onSearch={this.handleSearch} onEmpty={this.handleEmpty} />
|
||||
</div>
|
||||
<Table columns={columns9} data={this.state.data} />
|
||||
<Table columns={columns} data={this.state.data} />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
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
|
|
@ -9,6 +9,7 @@ import addEventListener from 'tinper-bee-core/lib/addEventListener';
|
|||
import ColumnManager from './ColumnManager';
|
||||
import createStore from './createStore';
|
||||
import Loading from 'bee-loading';
|
||||
import Icon from 'bee-icon';
|
||||
import { Event,EventUtil,closest} from "./utils";
|
||||
|
||||
const propTypes = {
|
||||
|
|
@ -78,7 +79,7 @@ const defaultProps = {
|
|||
scroll: {},
|
||||
rowRef: () => null,
|
||||
getBodyWrapper: body => body,
|
||||
emptyText: () => 'No Data',
|
||||
emptyText: () => <Icon type="uf-nodata" className="table-nodata"></Icon>,
|
||||
columns:[],
|
||||
minColumnWidth: 80,
|
||||
locale:{},
|
||||
|
|
|
|||
|
|
@ -247,6 +247,7 @@ $icon-color:#505F79;
|
|||
border-bottom: 1px solid $table-border-color;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
.table-nodata{ font-size:48px; }
|
||||
}
|
||||
|
||||
&-expand-icon-col {
|
||||
|
|
|
|||
Loading…
Reference in New Issue