示例分类顺序调整
This commit is contained in:
yangchch6
parent
b02dc956a3
commit
610f501f30
|
|
@ -1,12 +1,12 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 基本用法
|
* @title 基本表格
|
||||||
* 【Tooltip】
|
* 【Tooltip】
|
||||||
* @description
|
* @description
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import {Button,Tooltip,Popconfirm} from "tinper-bee";
|
import {Button,Tooltip} from "tinper-bee";
|
||||||
import Table from "../../src";
|
import Table from "../../src";
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
|
|
@ -29,29 +29,13 @@ const columns = [
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 500},
|
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 500},
|
||||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
{ title: "年龄", dataIndex: "c", key: "c", width: 200 }
|
||||||
{
|
|
||||||
title: "操作",
|
|
||||||
dataIndex: "d",
|
|
||||||
key: "d",
|
|
||||||
render(text, record, index) {
|
|
||||||
return (
|
|
||||||
<div style={{ position: 'relative' }} title={text} >
|
|
||||||
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
|
|
||||||
<a href="javascript:;" tooltip={text}>
|
|
||||||
一些操作
|
|
||||||
</a>
|
|
||||||
</Popconfirm>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
];
|
];
|
||||||
|
|
||||||
const data = [
|
const data = [
|
||||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
{ a: "令狐冲", b: "男", c: 41, key: "1" },
|
||||||
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, d: "操作", key: "2" },
|
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
|
||||||
{ a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
|
{ a: "郭靖", b: "男", c: 25, key: "3" }
|
||||||
];
|
];
|
||||||
|
|
||||||
class Demo1 extends Component {
|
class Demo1 extends Component {
|
||||||
|
|
@ -63,6 +47,19 @@ class Demo1 extends Component {
|
||||||
selectedRowIndex: 0
|
selectedRowIndex: 0
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
handleClick = () => {
|
||||||
|
console.log('这是第' , this.currentIndex , '行');
|
||||||
|
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() {
|
render() {
|
||||||
return (
|
return (
|
||||||
|
|
@ -73,6 +70,8 @@ class Demo1 extends Component {
|
||||||
parentNodeId='parent'
|
parentNodeId='parent'
|
||||||
height={40}
|
height={40}
|
||||||
headerHeight={40}
|
headerHeight={40}
|
||||||
|
hoverContent={this.getHoverContent}
|
||||||
|
onRowHover={this.onRowHover}
|
||||||
onRowClick={(record, index, indent) => {
|
onRowClick={(record, index, indent) => {
|
||||||
this.setState({
|
this.setState({
|
||||||
selectedRowIndex: index
|
selectedRowIndex: index
|
||||||
|
|
@ -1,46 +1,47 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 无数据时显示
|
* @title 默认无数据展示
|
||||||
* @description 无数据时显示效果展示（可自定义）
|
* @description 无数据时显示效果展示（可自定义）
|
||||||
*
|
*
|
||||||
* import {Table} from 'tinper-bee';
|
* import {Table} from 'tinper-bee';
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import Table from '../../src';
|
import Table from '../../src';
|
||||||
|
import Icon from 'bee-icon';
|
||||||
|
|
||||||
const columns10 = [
|
|
||||||
{
|
const columns10 = [
|
||||||
title: "Name",
|
{
|
||||||
dataIndex: "name",
|
title: "Name",
|
||||||
key: "name",
|
dataIndex: "name",
|
||||||
width: "40%"
|
key: "name",
|
||||||
},
|
width: "40%"
|
||||||
{
|
},
|
||||||
title: "Age",
|
{
|
||||||
dataIndex: "age",
|
title: "Age",
|
||||||
key: "age",
|
dataIndex: "age",
|
||||||
width: "30%"
|
key: "age",
|
||||||
},
|
width: "30%"
|
||||||
{
|
},
|
||||||
title: "Address",
|
{
|
||||||
dataIndex: "address",
|
title: "Address",
|
||||||
key: "address"
|
dataIndex: "address",
|
||||||
}
|
key: "address"
|
||||||
];
|
}
|
||||||
|
];
|
||||||
const data10 = [
|
|
||||||
|
const data10 = [
|
||||||
];
|
|
||||||
|
];
|
||||||
const emptyFunc = () => <span>这里没有数据！</span>
|
|
||||||
|
const emptyFunc = () => <Icon type="uf-nodata"></Icon>
|
||||||
class Demo10 extends Component {
|
|
||||||
render() {
|
class Demo10 extends Component {
|
||||||
return <Table columns={columns10} data={data10} emptyText={emptyFunc} />;
|
render() {
|
||||||
}
|
return <Table className="demo02" columns={columns10} data={data10} emptyText={emptyFunc} />;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export default Demo10;
|
export default Demo10;
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
.demo02 {
|
||||||
|
.u-table-placeholder i{
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,81 +1,81 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 固定表头
|
* @title 固定表头
|
||||||
* @description 当滚动纵向滚动条时，表头固定。还可以设置scroll来支持横向或纵向滚动
|
* @description 当滚动纵向滚动条时，表头固定。还可以设置scroll来支持横向或纵向滚动
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import Table from '../../src';
|
import Table from '../../src';
|
||||||
import dragColumn from "../../src/lib/dragColumn";;
|
import dragColumn from "../../src/lib/dragColumn";;
|
||||||
const DragColumnTable = dragColumn(Table);
|
const DragColumnTable = dragColumn(Table);
|
||||||
|
|
||||||
const columns6 = [
|
const columns6 = [
|
||||||
{
|
{
|
||||||
title: "Full Name",
|
title: "Full Name",
|
||||||
width: 100,
|
width: 100,
|
||||||
dataIndex: "name",
|
dataIndex: "name",
|
||||||
key: "name"
|
key: "name"
|
||||||
},
|
},
|
||||||
{ title: "Age", width: 100, dataIndex: "age", key: "age"},
|
{ title: "Age", width: 100, dataIndex: "age", key: "age"},
|
||||||
{ title: "Address", dataIndex: "address", key: "1" }
|
{ title: "Address", dataIndex: "address", key: "1" }
|
||||||
];
|
];
|
||||||
|
|
||||||
const data6 = [
|
const data6 = [
|
||||||
{
|
{
|
||||||
key: "1",
|
key: "1",
|
||||||
name: "John Brown",
|
name: "John Brown",
|
||||||
age: 32,
|
age: 32,
|
||||||
address: "New York Park"
|
address: "New York Park"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "2",
|
key: "2",
|
||||||
name: "Jim Green",
|
name: "Jim Green",
|
||||||
age: 40,
|
age: 40,
|
||||||
address: "London Park"
|
address: "London Park"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "3",
|
key: "3",
|
||||||
name: "Jim Green",
|
name: "Jim Green",
|
||||||
age: 40,
|
age: 40,
|
||||||
address: "London Park"
|
address: "London Park"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "4",
|
key: "4",
|
||||||
name: "Jim Green",
|
name: "Jim Green",
|
||||||
age: 40,
|
age: 40,
|
||||||
address: "London Park"
|
address: "London Park"
|
||||||
},{
|
},{
|
||||||
key: "11",
|
key: "11",
|
||||||
name: "John Brown",
|
name: "John Brown",
|
||||||
age: 32,
|
age: 32,
|
||||||
address: "New York Park"
|
address: "New York Park"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "12",
|
key: "12",
|
||||||
name: "Jim Green",
|
name: "Jim Green",
|
||||||
age: 40,
|
age: 40,
|
||||||
address: "London Park"
|
address: "London Park"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "13",
|
key: "13",
|
||||||
name: "Jim Green",
|
name: "Jim Green",
|
||||||
age: 40,
|
age: 40,
|
||||||
address: "London Park"
|
address: "London Park"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "14",
|
key: "14",
|
||||||
name: "Jim Green",
|
name: "Jim Green",
|
||||||
age: 40,
|
age: 40,
|
||||||
address: "London Park"
|
address: "London Park"
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
class Demo6 extends Component {
|
class Demo6 extends Component {
|
||||||
render() {
|
render() {
|
||||||
return <DragColumnTable columns={columns6} data={data6} scroll={{y: 150 }} dragborder={true} />;
|
return <DragColumnTable columns={columns6} data={data6} scroll={{y: 150 }} dragborder={true} />;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Demo6;
|
export default Demo6;
|
||||||
|
|
@ -0,0 +1,79 @@
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @title 隔行换色
|
||||||
|
* @description 可自定义斑马线颜色
|
||||||
|
*
|
||||||
|
*/
|
||||||
|
|
||||||
|
|
||||||
|
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 Demo04 extends Component {
|
||||||
|
render() {
|
||||||
|
return <Table className="demo04" columns={columns6} data={data6} />;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Demo04;
|
||||||
|
|
@ -0,0 +1,8 @@
|
||||||
|
.demo04 {
|
||||||
|
&.u-table tr:nth-child(2n){
|
||||||
|
background: #f7f9fb;
|
||||||
|
}
|
||||||
|
&.u-table tr.u-table-row-hover, .u-table tr:hover{
|
||||||
|
background: #ebecf0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,73 +1,73 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title loading表格
|
* @title 表格 Loading 加载
|
||||||
* @description loading可以传boolean或者obj对象，obj为bee-loading组件的参数类型
|
* @description loading可以传boolean或者obj对象，obj为bee-loading组件的参数类型
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import Table from "../../src";
|
import Table from "../../src";
|
||||||
import {Button,Popconfirm} from "tinper-bee";
|
import {Button,Popconfirm} from "tinper-bee";
|
||||||
|
|
||||||
const columns17 = [
|
const columns17 = [
|
||||||
{ title: "用户名", dataIndex: "a", key: "a", width: 100 },
|
{ title: "用户名", dataIndex: "a", key: "a", width: 100 },
|
||||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
||||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||||
{
|
{
|
||||||
title: "操作",
|
title: "操作",
|
||||||
dataIndex: "d",
|
dataIndex: "d",
|
||||||
key: "d",
|
key: "d",
|
||||||
render(text, record, index) {
|
render(text, record, index) {
|
||||||
return (
|
return (
|
||||||
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
|
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
|
||||||
<a href="javascript:;">
|
<a href="javascript:;">
|
||||||
一些操作
|
一些操作
|
||||||
</a>
|
</a>
|
||||||
</Popconfirm>
|
</Popconfirm>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
const data17 = [
|
const data17 = [
|
||||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
||||||
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" },
|
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" },
|
||||||
{ a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
|
{ a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
|
||||||
];
|
];
|
||||||
|
|
||||||
class Demo17 extends Component {
|
class Demo17 extends Component {
|
||||||
constructor(props){
|
constructor(props){
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
loading : true
|
loading : true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
changeLoading = () => {
|
changeLoading = () => {
|
||||||
this.setState({
|
this.setState({
|
||||||
loading : !this.state.loading
|
loading : !this.state.loading
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Button
|
<Button
|
||||||
className="editable-add-btn"
|
className="editable-add-btn"
|
||||||
type="ghost"
|
type="ghost"
|
||||||
onClick={this.changeLoading}
|
onClick={this.changeLoading}
|
||||||
>
|
>
|
||||||
切换loading
|
切换loading
|
||||||
</Button>
|
</Button>
|
||||||
<Table
|
<Table
|
||||||
columns={columns17}
|
columns={columns17}
|
||||||
data={data17}
|
data={data17}
|
||||||
title={currentData => <div>标题: 这是一个标题</div>}
|
title={currentData => <div>标题: 这是一个标题</div>}
|
||||||
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
||||||
// loading={this.state.loading}或者是boolean
|
// loading={this.state.loading}或者是boolean
|
||||||
loading={{show:this.state.loading}}
|
loading={{show:this.state.loading}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Demo17;
|
export default Demo17;
|
||||||
|
|
@ -1,120 +1,120 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 多表头
|
* @title 多列表头
|
||||||
* @description columns[n] 可以内嵌 children，以渲染分组表头。
|
* @description columns[n] 可以内嵌 children，以渲染分组表头。
|
||||||
* 自定义表头高度需要传headerHeight，注：修改th的padding top和bottom置为0，否则会有影响
|
* 自定义表头高度需要传headerHeight，注：修改th的padding top和bottom置为0，否则会有影响
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import Table from "../../src";
|
import Table from "../../src";
|
||||||
import {Button} from "tinper-bee";
|
import {Button} from "tinper-bee";
|
||||||
|
|
||||||
const { ColumnGroup, Column } = Table;
|
const { ColumnGroup, Column } = Table;
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
{
|
{
|
||||||
title: "Name",
|
title: "Name",
|
||||||
dataIndex: "name",
|
dataIndex: "name",
|
||||||
key: "name",
|
key: "name",
|
||||||
width: 100,
|
width: 100,
|
||||||
fixed: "left"
|
fixed: "left"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Other",
|
title: "Other",
|
||||||
width:600,
|
width:600,
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
title: "Age",
|
title: "Age",
|
||||||
dataIndex: "age",
|
dataIndex: "age",
|
||||||
key: "age",
|
key: "age",
|
||||||
width: 200
|
width: 200
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Address",
|
title: "Address",
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
title: "Street",
|
title: "Street",
|
||||||
dataIndex: "street",
|
dataIndex: "street",
|
||||||
key: "street",
|
key: "street",
|
||||||
width: 200
|
width: 200
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Block",
|
title: "Block",
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
title: "Building",
|
title: "Building",
|
||||||
dataIndex: "building",
|
dataIndex: "building",
|
||||||
key: "building",
|
key: "building",
|
||||||
width: 100
|
width: 100
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Door No.",
|
title: "Door No.",
|
||||||
dataIndex: "number",
|
dataIndex: "number",
|
||||||
key: "number",
|
key: "number",
|
||||||
width: 100
|
width: 100
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Company",
|
title: "Company",
|
||||||
width:400,
|
width:400,
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
title: "Company Address",
|
title: "Company Address",
|
||||||
dataIndex: "companyAddress",
|
dataIndex: "companyAddress",
|
||||||
key: "companyAddress",
|
key: "companyAddress",
|
||||||
width:200,
|
width:200,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Company Name",
|
title: "Company Name",
|
||||||
dataIndex: "companyName",
|
dataIndex: "companyName",
|
||||||
key: "companyName",
|
key: "companyName",
|
||||||
width:200,
|
width:200,
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "Gender",
|
title: "Gender",
|
||||||
dataIndex: "gender",
|
dataIndex: "gender",
|
||||||
key: "gender",
|
key: "gender",
|
||||||
width: 60,
|
width: 60,
|
||||||
fixed: "right"
|
fixed: "right"
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
const data = [];
|
const data = [];
|
||||||
for (let i = 0; i < 20; i++) {
|
for (let i = 0; i < 20; i++) {
|
||||||
data.push({
|
data.push({
|
||||||
key: i,
|
key: i,
|
||||||
name: "John Brown",
|
name: "John Brown",
|
||||||
age: i + 1,
|
age: i + 1,
|
||||||
street: "Lake Park",
|
street: "Lake Park",
|
||||||
building: "C",
|
building: "C",
|
||||||
number: 2035,
|
number: 2035,
|
||||||
companyAddress: "Lake Street 42",
|
companyAddress: "Lake Street 42",
|
||||||
companyName: "SoftLake Co",
|
companyName: "SoftLake Co",
|
||||||
gender: "M"
|
gender: "M"
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
class Demo3 extends Component {
|
class Demo3 extends Component {
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Table
|
<Table
|
||||||
className={'demo3'}
|
className={'demo3'}
|
||||||
columns={columns}
|
columns={columns}
|
||||||
data={data}
|
data={data}
|
||||||
headerHeight={40} //自定义表头高度
|
headerHeight={40} //自定义表头高度
|
||||||
bordered
|
bordered
|
||||||
scroll={{ y: 240 }}
|
scroll={{ y: 240 }}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Demo3;
|
export default Demo3;
|
||||||
|
|
|
||||||
|
|
@ -1,93 +1,100 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 多选表格
|
* @title 多选表格
|
||||||
* @description 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据
|
* @description 点击表格左列按钮即可选中，并且在选中的回调函数中能获取到选中的数据
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import {Checkbox} from "tinper-bee";
|
import {Checkbox} from "tinper-bee";
|
||||||
|
|
||||||
import Table from '../../src';
|
import Table from '../../src';
|
||||||
import multiSelect from "../../src/lib/multiSelect.js";
|
import multiSelect from "../../src/lib/multiSelect.js";
|
||||||
|
|
||||||
const columns12 = [
|
const columns12 = [
|
||||||
{
|
{
|
||||||
title: "名字",
|
title: "名字",
|
||||||
dataIndex: "a",
|
dataIndex: "a",
|
||||||
key: "a",
|
key: "a",
|
||||||
width: 100
|
width: 100
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "性别",
|
title: "性别",
|
||||||
dataIndex: "b",
|
dataIndex: "b",
|
||||||
key: "b",
|
key: "b",
|
||||||
width: 100
|
width: 100
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "年龄",
|
title: "年龄",
|
||||||
dataIndex: "c",
|
dataIndex: "c",
|
||||||
key: "c",
|
key: "c",
|
||||||
width: 200,
|
width: 200,
|
||||||
sorter: (a, b) => a.c - b.c
|
sorter: (a, b) => a.c - b.c
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "武功级别",
|
title: "武功级别",
|
||||||
dataIndex: "d",
|
dataIndex: "d",
|
||||||
key: "d"
|
key: "d"
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
const data12 = [
|
const data12 = [
|
||||||
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2",_checked:true },
|
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2",_checked:true },
|
||||||
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" ,_checked:true},
|
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" ,_checked:false},
|
||||||
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" ,_checked:true}
|
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "3" ,_checked:false}
|
||||||
];
|
];
|
||||||
//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
|
//拼接成复杂功能的table组件不能在render中定义，需要像此例子声明在组件的外侧，不然操作state会导致功能出现异常
|
||||||
let MultiSelectTable = multiSelect(Table, Checkbox);
|
let MultiSelectTable = multiSelect(Table, Checkbox);
|
||||||
|
|
||||||
class Demo12 extends Component {
|
class Demo12 extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
data: data12
|
data: data12
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
/**
|
/**
|
||||||
*@param selectedList:当前选中的行数据
|
*@param selectedList:当前选中的行数据
|
||||||
*@param record 当前操作行数据
|
*@param record 当前操作行数据
|
||||||
*@param index 当前操作行索引
|
*@param index 当前操作行索引
|
||||||
* @memberof Demo12
|
* @memberof Demo12
|
||||||
*/
|
*/
|
||||||
getSelectedDataFunc = (selectedList,record,index) => {
|
getSelectedDataFunc = (selectedList,record,index) => {
|
||||||
console.log("selectedList", selectedList,"index",index);
|
console.log("selectedList", selectedList,"index",index);
|
||||||
// 如果在回调中增加setState逻辑，需要同步data中的_checked属性。即下面的代码
|
// 如果在回调中增加setState逻辑，需要同步data中的_checked属性。即下面的代码
|
||||||
// const allChecked = selectedList.length == 0?false:true;
|
// const allChecked = selectedList.length == 0?false:true;
|
||||||
// record为undefind则为全选或者全不选
|
// record为undefind则为全选或者全不选
|
||||||
// if(!record){
|
// if(!record){
|
||||||
// data12.forEach(item=>{
|
// data12.forEach(item=>{
|
||||||
// item._checked = allChecked;
|
// item._checked = allChecked;
|
||||||
// })
|
// })
|
||||||
// }else{
|
// }else{
|
||||||
// data12[index]['_checked'] = record._checked;
|
// data12[index]['_checked'] = record._checked;
|
||||||
// }
|
// }
|
||||||
|
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let multiObj = {
|
let multiObj = {
|
||||||
type: "checkbox"
|
type: "checkbox"
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<MultiSelectTable
|
<MultiSelectTable
|
||||||
columns={columns12}
|
columns={columns12}
|
||||||
data={data12}
|
data={data12}
|
||||||
multiSelect={multiObj}
|
multiSelect={multiObj}
|
||||||
getSelectedDataFunc={this.getSelectedDataFunc}/>
|
rowClassName={(record,index,indent)=>{
|
||||||
);
|
if (record._checked) {
|
||||||
}
|
return 'selected';
|
||||||
}
|
} else {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
getSelectedDataFunc={this.getSelectedDataFunc}/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
export default Demo12;
|
export default Demo12;
|
||||||
|
|
@ -1,58 +1,58 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 选中行颜色、表头表体
|
* @title 选中行颜色、表头表体
|
||||||
* @description
|
* @description
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import {Button,Tooltip,} from "tinper-bee";
|
import {Button,Tooltip,} from "tinper-bee";
|
||||||
|
|
||||||
import Table from "../../src";
|
import Table from "../../src";
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
{ title: "用户名", dataIndex: "a", key: "a", width:80 , className:"rowClassName"},
|
{ title: "用户名", dataIndex: "a", key: "a", width:80 , className:"rowClassName"},
|
||||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
||||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||||
];
|
];
|
||||||
|
|
||||||
const data = [
|
const data = [
|
||||||
{ a: "令狐冲", b: "男", c: 41, key: "1" },
|
{ a: "令狐冲", b: "男", c: 41, key: "1" },
|
||||||
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
|
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, key: "2" },
|
||||||
{ a: "郭靖", b: "男", c: 25, key: "3" }
|
{ a: "郭靖", b: "男", c: 25, key: "3" }
|
||||||
];
|
];
|
||||||
|
|
||||||
class Demo26 extends Component {
|
class Demo26 extends Component {
|
||||||
|
|
||||||
constructor(props){
|
constructor(props){
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
data: data,
|
data: data,
|
||||||
selectedRowIndex: 0
|
selectedRowIndex: 0
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<Table
|
<Table
|
||||||
columns={columns}
|
columns={columns}
|
||||||
data={data}
|
data={data}
|
||||||
rowClassName={(record,index,indent)=>{
|
rowClassName={(record,index,indent)=>{
|
||||||
if (this.state.selectedRowIndex == index) {
|
if (this.state.selectedRowIndex == index) {
|
||||||
return 'selected';
|
return 'selected';
|
||||||
} else {
|
} else {
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
onRowClick={(record,index,indent)=>{
|
onRowClick={(record,index,indent)=>{
|
||||||
this.setState({
|
this.setState({
|
||||||
selectedRowIndex: index
|
selectedRowIndex: index
|
||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
title={currentData => <div>标题: 这是一个标题</div>}
|
title={currentData => <div>标题: 这是一个标题</div>}
|
||||||
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Demo26;
|
export default Demo26;
|
||||||
|
|
|
||||||
|
|
@ -1,212 +1,212 @@
|
||||||
/**
|
/**
|
||||||
* @title 多功能表格
|
* @title 多功能表格
|
||||||
* @description 根据列进行过滤、拖拽交换列综合使用案例
|
* @description 根据列进行过滤、拖拽交换列综合使用案例
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import {Icon,Checkbox,Popover,Popconfirm} from "tinper-bee";
|
import {Icon,Checkbox,Popover,Popconfirm} from "tinper-bee";
|
||||||
|
|
||||||
import Table from '../../src';
|
import Table from '../../src';
|
||||||
import multiSelect from '../../src/lib/multiSelect';
|
import multiSelect from '../../src/lib/multiSelect';
|
||||||
import filterColumn from '../../src/lib/filterColumn';
|
import filterColumn from '../../src/lib/filterColumn';
|
||||||
import dragColumn from "../../src/lib/dragColumn";
|
import dragColumn from "../../src/lib/dragColumn";
|
||||||
import sum from '../../src/lib/sum';
|
import sum from '../../src/lib/sum';
|
||||||
|
|
||||||
//Cloumns1
|
//Cloumns1
|
||||||
function getCloumns(){
|
function getCloumns(){
|
||||||
const column = [
|
const column = [
|
||||||
{
|
{
|
||||||
title: "序号",
|
title: "序号",
|
||||||
dataIndex: "index",
|
dataIndex: "index",
|
||||||
key: "index",
|
key: "index",
|
||||||
width: 100,
|
width: 100,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "订单编号",
|
title: "订单编号",
|
||||||
dataIndex: "orderCode",
|
dataIndex: "orderCode",
|
||||||
key: "orderCode",
|
key: "orderCode",
|
||||||
width: 100,
|
width: 100,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "供应商名称",
|
title: "供应商名称",
|
||||||
dataIndex: "supplierName",
|
dataIndex: "supplierName",
|
||||||
key: "supplierName",
|
key: "supplierName",
|
||||||
width: 100
|
width: 100
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "类型",
|
title: "类型",
|
||||||
dataIndex: "type_name",
|
dataIndex: "type_name",
|
||||||
key: "type_name",
|
key: "type_name",
|
||||||
width: 100
|
width: 100
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "采购组织",
|
title: "采购组织",
|
||||||
dataIndex: "purchasing",
|
dataIndex: "purchasing",
|
||||||
key: "purchasing",
|
key: "purchasing",
|
||||||
width: 100
|
width: 100
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "采购组",
|
title: "采购组",
|
||||||
dataIndex: "purchasingGroup",
|
dataIndex: "purchasingGroup",
|
||||||
key: "purchasingGroup",
|
key: "purchasingGroup",
|
||||||
width: 300
|
width: 300
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "凭证日期",
|
title: "凭证日期",
|
||||||
dataIndex: "voucherDate",
|
dataIndex: "voucherDate",
|
||||||
key: "voucherDate",
|
key: "voucherDate",
|
||||||
width: 100,
|
width: 100,
|
||||||
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "审批状态",
|
title: "审批状态",
|
||||||
dataIndex: "approvalState_name",
|
dataIndex: "approvalState_name",
|
||||||
key: "approvalState_name",
|
key: "approvalState_name",
|
||||||
width: 100
|
width: 100
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "确认状态",
|
title: "确认状态",
|
||||||
dataIndex: "confirmState_name",
|
dataIndex: "confirmState_name",
|
||||||
key: "confirmState_name",
|
key: "confirmState_name",
|
||||||
width: 100
|
width: 100
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "关闭状态",
|
title: "关闭状态",
|
||||||
dataIndex: "closeState_name",
|
dataIndex: "closeState_name",
|
||||||
key: "closeState_name",
|
key: "closeState_name",
|
||||||
width: 100
|
width: 100
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "操作",
|
title: "操作",
|
||||||
dataIndex: "d",
|
dataIndex: "d",
|
||||||
key: "d",
|
key: "d",
|
||||||
width:100,
|
width:100,
|
||||||
fixed: "right",
|
fixed: "right",
|
||||||
render(text, record, index) {
|
render(text, record, index) {
|
||||||
return (
|
return (
|
||||||
<div className='operation-btn'>
|
<div className='operation-btn'>
|
||||||
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
|
<Popconfirm trigger="click" placement="right" content={'这是第' + index + '行，内容为:' + text}>
|
||||||
<a href="javascript:;" tooltip={text} >
|
<a href="javascript:;" tooltip={text} >
|
||||||
一些操作
|
一些操作
|
||||||
</a>
|
</a>
|
||||||
</Popconfirm>
|
</Popconfirm>
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
return column;
|
return column;
|
||||||
}
|
}
|
||||||
|
|
||||||
const dataList = [
|
const dataList = [
|
||||||
{
|
{
|
||||||
index: 1,
|
index: 1,
|
||||||
orderCode:"2343",
|
orderCode:"2343",
|
||||||
supplierName: "xxx",
|
supplierName: "xxx",
|
||||||
type_name: "123",
|
type_name: "123",
|
||||||
purchasing:'内行',
|
purchasing:'内行',
|
||||||
purchasingGroup:"323",
|
purchasingGroup:"323",
|
||||||
voucherDate:"kkkk",
|
voucherDate:"kkkk",
|
||||||
approvalState_name:"vvvv",
|
approvalState_name:"vvvv",
|
||||||
confirmState_name:"aaaa",
|
confirmState_name:"aaaa",
|
||||||
closeState_name:"vnnnnn",
|
closeState_name:"vnnnnn",
|
||||||
d:"操作",
|
d:"操作",
|
||||||
key: "1"
|
key: "1"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
index: 2,
|
index: 2,
|
||||||
_checked:true,
|
_checked:true,
|
||||||
orderCode:"222",
|
orderCode:"222",
|
||||||
supplierName: "22xxx",
|
supplierName: "22xxx",
|
||||||
type_name: "1223",
|
type_name: "1223",
|
||||||
purchasing:'内行2',
|
purchasing:'内行2',
|
||||||
purchasingGroup:"3223",
|
purchasingGroup:"3223",
|
||||||
voucherDate:"222kk",
|
voucherDate:"222kk",
|
||||||
approvalState_name:"22vvvv",
|
approvalState_name:"22vvvv",
|
||||||
confirmState_name:"2aaaa",
|
confirmState_name:"2aaaa",
|
||||||
closeState_name:"2vnnnnn",
|
closeState_name:"2vnnnnn",
|
||||||
d:"2操作",
|
d:"2操作",
|
||||||
key: "2"
|
key: "2"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
index: 3,
|
index: 3,
|
||||||
orderCode:"222",
|
orderCode:"222",
|
||||||
supplierName: "22xxx",
|
supplierName: "22xxx",
|
||||||
_disabled:true,
|
_disabled:true,
|
||||||
type_name: "1223",
|
type_name: "1223",
|
||||||
purchasing:'内行2',
|
purchasing:'内行2',
|
||||||
purchasingGroup:"3223",
|
purchasingGroup:"3223",
|
||||||
voucherDate:"222kk",
|
voucherDate:"222kk",
|
||||||
approvalState_name:"22vvvv",
|
approvalState_name:"22vvvv",
|
||||||
confirmState_name:"2aaaa",
|
confirmState_name:"2aaaa",
|
||||||
closeState_name:"2vnnnnn",
|
closeState_name:"2vnnnnn",
|
||||||
d:"3操作",
|
d:"3操作",
|
||||||
key: "3"
|
key: "3"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
index: 4,
|
index: 4,
|
||||||
orderCode:"222",
|
orderCode:"222",
|
||||||
supplierName: "22xxx",
|
supplierName: "22xxx",
|
||||||
type_name: "1223",
|
type_name: "1223",
|
||||||
purchasing:'内行2',
|
purchasing:'内行2',
|
||||||
purchasingGroup:"3223",
|
purchasingGroup:"3223",
|
||||||
voucherDate:"222kk",
|
voucherDate:"222kk",
|
||||||
approvalState_name:"22vvvv",
|
approvalState_name:"22vvvv",
|
||||||
confirmState_name:"2aaaa",
|
confirmState_name:"2aaaa",
|
||||||
closeState_name:"2vnnnnn",
|
closeState_name:"2vnnnnn",
|
||||||
d:"4操作",
|
d:"4操作",
|
||||||
key: "4"
|
key: "4"
|
||||||
},
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
const DragColumnTable = filterColumn(dragColumn(multiSelect(Table, Checkbox)),Popover);
|
const DragColumnTable = filterColumn(dragColumn(multiSelect(Table, Checkbox)),Popover);
|
||||||
|
|
||||||
const defaultProps25 = {
|
const defaultProps25 = {
|
||||||
prefixCls: "bee-table"
|
prefixCls: "bee-table"
|
||||||
};
|
};
|
||||||
|
|
||||||
class Demo25 extends Component {
|
class Demo25 extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
}
|
}
|
||||||
|
|
||||||
getSelectedDataFunc=(data)=>{
|
getSelectedDataFunc=(data)=>{
|
||||||
console.log("data",data);
|
console.log("data",data);
|
||||||
}
|
}
|
||||||
|
|
||||||
getCloumnsScroll=(columns)=>{
|
getCloumnsScroll=(columns)=>{
|
||||||
let sum = 0;
|
let sum = 0;
|
||||||
columns.forEach((da)=>{
|
columns.forEach((da)=>{
|
||||||
sum += da.width;
|
sum += da.width;
|
||||||
})
|
})
|
||||||
console.log("sum",sum);
|
console.log("sum",sum);
|
||||||
return (sum);
|
return (sum);
|
||||||
}
|
}
|
||||||
|
|
||||||
selectedRow=(record, index)=>{
|
selectedRow=(record, index)=>{
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
let columns = getCloumns();
|
let columns = getCloumns();
|
||||||
|
|
||||||
return <div className="demo25">
|
return <div className="demo25">
|
||||||
<DragColumnTable
|
<DragColumnTable
|
||||||
columns={columns}
|
columns={columns}
|
||||||
data={dataList}
|
data={dataList}
|
||||||
getSelectedDataFunc={this.getSelectedDataFunc}
|
getSelectedDataFunc={this.getSelectedDataFunc}
|
||||||
|
|
||||||
checkMinSize={7}
|
checkMinSize={7}
|
||||||
draggable={true}
|
draggable={true}
|
||||||
multiSelect={{type: "checkbox"}}
|
multiSelect={{type: "checkbox"}}
|
||||||
scroll={{x:true, y: 100}}
|
scroll={{x:true, y: 100}}
|
||||||
selectedRow={this.selectedRow}
|
selectedRow={this.selectedRow}
|
||||||
// scroll={{x:this.getCloumnsScroll(columns), y: 150}}
|
// scroll={{x:this.getCloumnsScroll(columns), y: 150}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Demo25.defaultProps = defaultProps25;
|
Demo25.defaultProps = defaultProps25;
|
||||||
|
|
||||||
|
|
||||||
export default Demo25;
|
export default Demo25;
|
||||||
|
|
@ -1,186 +1,186 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 增删改表格
|
* @title 增删改表格
|
||||||
* @description 这是带有增删改功能的表格（此编辑功能未使用render组件）
|
* @description 这是带有增删改功能的表格（此编辑功能未使用render组件）
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import Table from "../../src";
|
import Table from "../../src";
|
||||||
import {Button,Icon,FormControl as Input,Popconfirm} from "tinper-bee";
|
import {Button,Icon,FormControl as Input,Popconfirm} from "tinper-bee";
|
||||||
class EditableCell extends React.Component {
|
class EditableCell extends React.Component {
|
||||||
state = {
|
state = {
|
||||||
value: this.props.value,
|
value: this.props.value,
|
||||||
editable: false
|
editable: false
|
||||||
};
|
};
|
||||||
handleChange = e => {
|
handleChange = e => {
|
||||||
const value = e;
|
const value = e;
|
||||||
this.setState({ value });
|
this.setState({ value });
|
||||||
};
|
};
|
||||||
check = () => {
|
check = () => {
|
||||||
this.setState({ editable: false });
|
this.setState({ editable: false });
|
||||||
if (this.props.onChange) {
|
if (this.props.onChange) {
|
||||||
this.props.onChange(this.state.value);
|
this.props.onChange(this.state.value);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
edit = () => {
|
edit = () => {
|
||||||
this.setState({ editable: true });
|
this.setState({ editable: true });
|
||||||
};
|
};
|
||||||
handleKeydown = event => {
|
handleKeydown = event => {
|
||||||
if (event.keyCode == 13) {
|
if (event.keyCode == 13) {
|
||||||
this.check();
|
this.check();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
render() {
|
render() {
|
||||||
const { value, editable } = this.state;
|
const { value, editable } = this.state;
|
||||||
return (
|
return (
|
||||||
<div className="editable-cell">
|
<div className="editable-cell">
|
||||||
{editable ? (
|
{editable ? (
|
||||||
<div className="editable-cell-input-wrapper">
|
<div className="editable-cell-input-wrapper">
|
||||||
<Input
|
<Input
|
||||||
value={value}
|
value={value}
|
||||||
onChange={this.handleChange}
|
onChange={this.handleChange}
|
||||||
onKeyDown={this.handleKeydown}
|
onKeyDown={this.handleKeydown}
|
||||||
/>
|
/>
|
||||||
<Icon
|
<Icon
|
||||||
type="uf-correct"
|
type="uf-correct"
|
||||||
className="editable-cell-icon-check"
|
className="editable-cell-icon-check"
|
||||||
onClick={this.check}
|
onClick={this.check}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
) : (
|
||||||
<div className="editable-cell-text-wrapper">
|
<div className="editable-cell-text-wrapper">
|
||||||
{value || " "}
|
{value || " "}
|
||||||
<Icon
|
<Icon
|
||||||
type="uf-pencil"
|
type="uf-pencil"
|
||||||
className="editable-cell-icon"
|
className="editable-cell-icon"
|
||||||
onClick={this.edit}
|
onClick={this.edit}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
class Demo2 extends React.Component {
|
class Demo2 extends React.Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.columns = [
|
this.columns = [
|
||||||
{
|
{
|
||||||
title: "姓名",
|
title: "姓名",
|
||||||
dataIndex: "name",
|
dataIndex: "name",
|
||||||
key: "name",
|
key: "name",
|
||||||
width: "30%",
|
width: "30%",
|
||||||
render: (text, record, index) => (
|
render: (text, record, index) => (
|
||||||
<EditableCell
|
<EditableCell
|
||||||
value={text}
|
value={text}
|
||||||
onChange={this.onCellChange(index, "name")}
|
onChange={this.onCellChange(index, "name")}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "年龄",
|
title: "年龄",
|
||||||
dataIndex: "age",
|
dataIndex: "age",
|
||||||
key: "age"
|
key: "age"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "你懂的",
|
title: "你懂的",
|
||||||
dataIndex: "address",
|
dataIndex: "address",
|
||||||
key: "address"
|
key: "address"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "操作",
|
title: "操作",
|
||||||
dataIndex: "operation",
|
dataIndex: "operation",
|
||||||
key: "operation",
|
key: "operation",
|
||||||
render: (text, record, index) => {
|
render: (text, record, index) => {
|
||||||
return this.state.dataSource.length > 1 ? (
|
return this.state.dataSource.length > 1 ? (
|
||||||
<Popconfirm content="确认删除?" id="aa" onClose={this.onDelete(index)}>
|
<Popconfirm content="确认删除?" id="aa" onClose={this.onDelete(index)}>
|
||||||
<Icon type="uf-del" />
|
<Icon type="uf-del" />
|
||||||
</Popconfirm>
|
</Popconfirm>
|
||||||
) : null;
|
) : null;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
this.state = {
|
this.state = {
|
||||||
dataSource: [
|
dataSource: [
|
||||||
{
|
{
|
||||||
key: "0",
|
key: "0",
|
||||||
name: "沉鱼",
|
name: "沉鱼",
|
||||||
age: "18",
|
age: "18",
|
||||||
address: "96, 77, 89"
|
address: "96, 77, 89"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "1",
|
key: "1",
|
||||||
name: "落雁",
|
name: "落雁",
|
||||||
age: "16",
|
age: "16",
|
||||||
address: "90, 70, 80"
|
address: "90, 70, 80"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "2",
|
key: "2",
|
||||||
name: "闭月",
|
name: "闭月",
|
||||||
age: "17",
|
age: "17",
|
||||||
address: "80, 60, 80"
|
address: "80, 60, 80"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "3",
|
key: "3",
|
||||||
name: "羞花",
|
name: "羞花",
|
||||||
age: "20",
|
age: "20",
|
||||||
address: "120, 60, 90"
|
address: "120, 60, 90"
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
count: 4
|
count: 4
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
onCellChange = (index, key) => {
|
onCellChange = (index, key) => {
|
||||||
return value => {
|
return value => {
|
||||||
const dataSource = [...this.state.dataSource];
|
const dataSource = [...this.state.dataSource];
|
||||||
dataSource[index][key] = value;
|
dataSource[index][key] = value;
|
||||||
this.setState({ dataSource });
|
this.setState({ dataSource });
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
onDelete = (index) => {
|
onDelete = (index) => {
|
||||||
return () => {
|
return () => {
|
||||||
const dataSource = [...this.state.dataSource];
|
const dataSource = [...this.state.dataSource];
|
||||||
dataSource.splice(index, 1);
|
dataSource.splice(index, 1);
|
||||||
this.setState({ dataSource });
|
this.setState({ dataSource });
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
handleAdd = () => {
|
handleAdd = () => {
|
||||||
const { count, dataSource } = this.state;
|
const { count, dataSource } = this.state;
|
||||||
const newData = {
|
const newData = {
|
||||||
key: count,
|
key: count,
|
||||||
name: `凤姐 ${count}`,
|
name: `凤姐 ${count}`,
|
||||||
age: 32,
|
age: 32,
|
||||||
address: `100 100 100`
|
address: `100 100 100`
|
||||||
};
|
};
|
||||||
this.setState({
|
this.setState({
|
||||||
dataSource: [...dataSource, newData],
|
dataSource: [...dataSource, newData],
|
||||||
count: count + 1
|
count: count + 1
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { dataSource } = this.state;
|
const { dataSource } = this.state;
|
||||||
const columns = this.columns;
|
const columns = this.columns;
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Button
|
<Button
|
||||||
colors="secondary"
|
colors="secondary"
|
||||||
className="editable-add-btn"
|
className="editable-add-btn"
|
||||||
type="ghost"
|
type="ghost"
|
||||||
onClick={this.handleAdd}
|
onClick={this.handleAdd}
|
||||||
>
|
>
|
||||||
添加
|
添加
|
||||||
</Button>
|
</Button>
|
||||||
<Table
|
<Table
|
||||||
data={dataSource}
|
data={dataSource}
|
||||||
columns={columns}
|
columns={columns}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Demo2;
|
export default Demo2;
|
||||||
|
|
@ -1,85 +1,85 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 主子表
|
* @title 主子表
|
||||||
* @description 主表点击子表联动
|
* @description 主表点击子表联动
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import React, { Component } from "react";
|
import React, { Component } from "react";
|
||||||
import Table from "../../src";
|
import Table from "../../src";
|
||||||
|
|
||||||
const columns7 = [
|
const columns7 = [
|
||||||
{ title: "班级", dataIndex: "a", key: "a" },
|
{ title: "班级", dataIndex: "a", key: "a" },
|
||||||
{ title: "人数", dataIndex: "b", key: "b" },
|
{ title: "人数", dataIndex: "b", key: "b" },
|
||||||
{ title: "班主任", dataIndex: "c", key: "c" },
|
{ title: "班主任", dataIndex: "c", key: "c" },
|
||||||
{
|
{
|
||||||
title: "武功级别",
|
title: "武功级别",
|
||||||
dataIndex: "d",
|
dataIndex: "d",
|
||||||
key: "d"
|
key: "d"
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
const data7 = [
|
const data7 = [
|
||||||
{ a: "02级一班", b: "2", c: "欧阳锋", d: "大侠", key: "1" },
|
{ a: "02级一班", b: "2", c: "欧阳锋", d: "大侠", key: "1" },
|
||||||
{ a: "03级二班", b: "3", c: "归海一刀", d: "大侠", key: "2" },
|
{ a: "03级二班", b: "3", c: "归海一刀", d: "大侠", key: "2" },
|
||||||
{ a: "05级三班", b: "1", c: "一拳超人", d: "愣头青", key: "3" }
|
{ a: "05级三班", b: "1", c: "一拳超人", d: "愣头青", key: "3" }
|
||||||
];
|
];
|
||||||
|
|
||||||
const columns7_1 = [
|
const columns7_1 = [
|
||||||
{ title: "姓名", dataIndex: "a", key: "a" },
|
{ title: "姓名", dataIndex: "a", key: "a" },
|
||||||
{ title: "班级", dataIndex: "b", key: "b" },
|
{ title: "班级", dataIndex: "b", key: "b" },
|
||||||
{ title: "系别", dataIndex: "c", key: "c" }
|
{ title: "系别", dataIndex: "c", key: "c" }
|
||||||
];
|
];
|
||||||
|
|
||||||
class Demo7 extends Component {
|
class Demo7 extends Component {
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
super(props);
|
super(props);
|
||||||
this.state = {
|
this.state = {
|
||||||
children_data: []
|
children_data: []
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
rowclick = (record, index) => {
|
rowclick = (record, index) => {
|
||||||
if (record.a === "02级一班") {
|
if (record.a === "02级一班") {
|
||||||
this.setState({
|
this.setState({
|
||||||
children_data: [
|
children_data: [
|
||||||
{ a: "郭靖", b: "02级一班", c: "文学系", key: "1" },
|
{ a: "郭靖", b: "02级一班", c: "文学系", key: "1" },
|
||||||
{ a: "黄蓉", b: "02级一班", c: "文学系", key: "2" }
|
{ a: "黄蓉", b: "02级一班", c: "文学系", key: "2" }
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
} else if (record.a === "03级二班") {
|
} else if (record.a === "03级二班") {
|
||||||
this.setState({
|
this.setState({
|
||||||
children_data: [
|
children_data: [
|
||||||
{ a: "杨过", b: "03级二班", c: "外语系", key: "1" },
|
{ a: "杨过", b: "03级二班", c: "外语系", key: "1" },
|
||||||
{ a: "小龙女", b: "03级二班", c: "外语系", key: "2" },
|
{ a: "小龙女", b: "03级二班", c: "外语系", key: "2" },
|
||||||
{ a: "傻姑", b: "03级二班", c: "外语系", key: "3" }
|
{ a: "傻姑", b: "03级二班", c: "外语系", key: "3" }
|
||||||
]
|
]
|
||||||
});
|
});
|
||||||
} else if (record.a === "05级三班") {
|
} else if (record.a === "05级三班") {
|
||||||
this.setState({
|
this.setState({
|
||||||
children_data: [{ a: "金圣叹", b: "05级三班", c: "美术系", key: "1" }]
|
children_data: [{ a: "金圣叹", b: "05级三班", c: "美术系", key: "1" }]
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<Table
|
<Table
|
||||||
columns={columns7}
|
columns={columns7}
|
||||||
data={data7}
|
data={data7}
|
||||||
onRowClick={this.rowclick}
|
onRowClick={this.rowclick}
|
||||||
title={currentData => <div>标题: 我是主表</div>}
|
title={currentData => <div>标题: 我是主表</div>}
|
||||||
/>
|
/>
|
||||||
<Table
|
<Table
|
||||||
style={{ marginTop: 40 }}
|
style={{ marginTop: 40 }}
|
||||||
columns={columns7_1}
|
columns={columns7_1}
|
||||||
data={this.state.children_data}
|
data={this.state.children_data}
|
||||||
title={currentData => <div>标题: 我是子表</div>}
|
title={currentData => <div>标题: 我是子表</div>}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Demo7;
|
export default Demo7;
|
||||||
|
|
@ -1,168 +1,168 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 模态框中行过滤
|
* @title 模态框中行过滤
|
||||||
* @description 通过Modal组件来展示表格的过滤相关能力，并且通过filterDropdownIncludeKeys设置可选条件
|
* @description 通过Modal组件来展示表格的过滤相关能力，并且通过filterDropdownIncludeKeys设置可选条件
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import {Modal,Button} from "tinper-bee";
|
import {Modal,Button} from "tinper-bee";
|
||||||
import Table from '../../src';
|
import Table from '../../src';
|
||||||
|
|
||||||
const columns29 = [
|
const columns29 = [
|
||||||
{
|
{
|
||||||
title: "姓名",
|
title: "姓名",
|
||||||
width: 180,
|
width: 180,
|
||||||
dataIndex: "name",
|
dataIndex: "name",
|
||||||
key: "name",
|
key: "name",
|
||||||
filterType: "text",
|
filterType: "text",
|
||||||
filterDropdown: "show",
|
filterDropdown: "show",
|
||||||
filterDropdownIncludeKeys: ['LIKE', 'EQ']
|
filterDropdownIncludeKeys: ['LIKE', 'EQ']
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "年龄",
|
title: "年龄",
|
||||||
width: 170,
|
width: 170,
|
||||||
dataIndex: "age",
|
dataIndex: "age",
|
||||||
key: "age",
|
key: "age",
|
||||||
filterType: "number",
|
filterType: "number",
|
||||||
filterDropdown: "show",
|
filterDropdown: "show",
|
||||||
filterDropdownType: "number",
|
filterDropdownType: "number",
|
||||||
filterDropdownIncludeKeys: ['EQ'],
|
filterDropdownIncludeKeys: ['EQ'],
|
||||||
filterInputNumberOptions: {
|
filterInputNumberOptions: {
|
||||||
max: 200,
|
max: 200,
|
||||||
min: 0,
|
min: 0,
|
||||||
step: 1,
|
step: 1,
|
||||||
precision: 0
|
precision: 0
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: "日期",
|
title: "日期",
|
||||||
width: 200,
|
width: 200,
|
||||||
dataIndex: "date",
|
dataIndex: "date",
|
||||||
key: "date",
|
key: "date",
|
||||||
filterType: "date",
|
filterType: "date",
|
||||||
filterDropdown: "show",
|
filterDropdown: "show",
|
||||||
format: "YYYY-MM-DD"
|
format: "YYYY-MM-DD"
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
const data29 = [
|
const data29 = [
|
||||||
{
|
{
|
||||||
key: "1",
|
key: "1",
|
||||||
name: "John Brown",
|
name: "John Brown",
|
||||||
age: 32,
|
age: 32,
|
||||||
date: "2018-09-19",
|
date: "2018-09-19",
|
||||||
address: "朝阳区",
|
address: "朝阳区",
|
||||||
mark: "无"
|
mark: "无"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "2",
|
key: "2",
|
||||||
name: "Jim Green",
|
name: "Jim Green",
|
||||||
age: 40,
|
age: 40,
|
||||||
date: "2018-09-18",
|
date: "2018-09-18",
|
||||||
address: "朝阳区",
|
address: "朝阳区",
|
||||||
mark: "无"
|
mark: "无"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "3",
|
key: "3",
|
||||||
name: "Jim Green",
|
name: "Jim Green",
|
||||||
age: 40,
|
age: 40,
|
||||||
date: "2018-09-18",
|
date: "2018-09-18",
|
||||||
address: "东城区",
|
address: "东城区",
|
||||||
mark: "无"
|
mark: "无"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "4",
|
key: "4",
|
||||||
name: "Jim Green",
|
name: "Jim Green",
|
||||||
age: 40,
|
age: 40,
|
||||||
date: "2018-09-18",
|
date: "2018-09-18",
|
||||||
address: "东城区",
|
address: "东城区",
|
||||||
mark: "无"
|
mark: "无"
|
||||||
}, {
|
}, {
|
||||||
key: "5",
|
key: "5",
|
||||||
name: "John Brown",
|
name: "John Brown",
|
||||||
age: 32,
|
age: 32,
|
||||||
date: "2018-09-18",
|
date: "2018-09-18",
|
||||||
address: "海淀区",
|
address: "海淀区",
|
||||||
mark: "无"
|
mark: "无"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "6",
|
key: "6",
|
||||||
name: "Jim Green",
|
name: "Jim Green",
|
||||||
age: 48,
|
age: 48,
|
||||||
date: "2018-09-18",
|
date: "2018-09-18",
|
||||||
address: "海淀区",
|
address: "海淀区",
|
||||||
mark: "无"
|
mark: "无"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "7",
|
key: "7",
|
||||||
name: "Jim Green",
|
name: "Jim Green",
|
||||||
age: 40,
|
age: 40,
|
||||||
date: "2018-09-18",
|
date: "2018-09-18",
|
||||||
address: "海淀区",
|
address: "海淀区",
|
||||||
mark: "无"
|
mark: "无"
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "8",
|
key: "8",
|
||||||
name: "Jim Green",
|
name: "Jim Green",
|
||||||
age: 38,
|
age: 38,
|
||||||
date: "2018-09-18",
|
date: "2018-09-18",
|
||||||
address: "海淀区",
|
address: "海淀区",
|
||||||
mark: "无"
|
mark: "无"
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
class Demo29 extends Component {
|
class Demo29 extends Component {
|
||||||
constructor() {
|
constructor() {
|
||||||
super();
|
super();
|
||||||
this.state = {
|
this.state = {
|
||||||
show: false
|
show: false
|
||||||
}
|
}
|
||||||
this.close = this.close.bind(this);
|
this.close = this.close.bind(this);
|
||||||
this.open = this.open.bind(this);
|
this.open = this.open.bind(this);
|
||||||
}
|
}
|
||||||
handlerFilterChange = (key, val, condition) => {
|
handlerFilterChange = (key, val, condition) => {
|
||||||
console.log('参数：key=', key, ' value=', val, 'condition=', condition);
|
console.log('参数：key=', key, ' value=', val, 'condition=', condition);
|
||||||
}
|
}
|
||||||
|
|
||||||
handlerFilterClear = (key) => {
|
handlerFilterClear = (key) => {
|
||||||
console.log('清除条件', key);
|
console.log('清除条件', key);
|
||||||
}
|
}
|
||||||
close() {
|
close() {
|
||||||
this.setState({
|
this.setState({
|
||||||
show: false
|
show: false
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
open() {
|
open() {
|
||||||
this.setState({
|
this.setState({
|
||||||
show: true
|
show: true
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
render() {
|
render() {
|
||||||
return (<div><Modal
|
return (<div><Modal
|
||||||
show={this.state.show}
|
show={this.state.show}
|
||||||
onHide={this.close}
|
onHide={this.close}
|
||||||
autoFocus={false}
|
autoFocus={false}
|
||||||
enforceFocus={false}
|
enforceFocus={false}
|
||||||
>
|
>
|
||||||
<Modal.Header closeButton>
|
<Modal.Header closeButton>
|
||||||
<Modal.Title>过滤行</Modal.Title>
|
<Modal.Title>过滤行</Modal.Title>
|
||||||
</Modal.Header>
|
</Modal.Header>
|
||||||
<Modal.Body>
|
<Modal.Body>
|
||||||
<Table
|
<Table
|
||||||
onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()
|
onFilterChange={this.handlerFilterChange}//下拉条件的回调(key,val)=>()
|
||||||
onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()
|
onFilterClear={this.handlerFilterClear}//触发输入操作以及其他的回调(key,val)=>()
|
||||||
filterDelay={500}//输入文本多少ms触发回调函数，默认300ms
|
filterDelay={500}//输入文本多少ms触发回调函数，默认300ms
|
||||||
filterable={true}//是否开启过滤数据功能
|
filterable={true}//是否开启过滤数据功能
|
||||||
bordered
|
bordered
|
||||||
columns={columns29}
|
columns={columns29}
|
||||||
data={data29} />
|
data={data29} />
|
||||||
</Modal.Body>
|
</Modal.Body>
|
||||||
</Modal>
|
</Modal>
|
||||||
<Button colors="primary" onClick={this.open}>显示表格</Button>
|
<Button colors="primary" onClick={this.open}>显示表格</Button>
|
||||||
</div>)
|
</div>)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
export default Demo29;
|
export default Demo29;
|
||||||
168
demo/index.js
168
demo/index.js
File diff suppressed because one or more lines are too long
|
|
@ -216,8 +216,8 @@
|
||||||
background-clip: padding-box;
|
background-clip: padding-box;
|
||||||
-moz-user-select: -moz-none;
|
-moz-user-select: -moz-none;
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
/*
|
/*
|
||||||
Introduced in IE 10.
|
Introduced in IE 10.
|
||||||
*/
|
*/
|
||||||
-ms-user-select: none;
|
-ms-user-select: none;
|
||||||
user-select: none; }
|
user-select: none; }
|
||||||
|
|
@ -578,6 +578,15 @@
|
||||||
.demo25 .u-table-filter-column-filter-icon {
|
.demo25 .u-table-filter-column-filter-icon {
|
||||||
right: 15px; }
|
right: 15px; }
|
||||||
|
|
||||||
|
.demo02 .u-table-placeholder i {
|
||||||
|
font-size: 40px; }
|
||||||
|
|
||||||
|
.demo04.u-table tr:nth-child(2n) {
|
||||||
|
background: #f7f9fb; }
|
||||||
|
|
||||||
|
.demo04.u-table tr.u-table-row-hover, .demo04 .u-table tr:hover {
|
||||||
|
background: #ebecf0; }
|
||||||
|
|
||||||
th .drop-menu .uf {
|
th .drop-menu .uf {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
|
|
|
||||||
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
Loading…
Reference in New Issue