删除搜索示例

This commit is contained in:
yangchch6 2019-04-24 14:15:59 +08:00
parent d76568bc44
commit 9b81845b3d
9 changed files with 819 additions and 1383 deletions

View File

@ -13,28 +13,26 @@ import dragColumn from '../../src/lib/dragColumn';
const columns23 = [
{
title: "名字",
title: "订单编号",
dataIndex: "a",
key: "a",
width: '200',
fixed:'left'
},
{
title: "性别",
title: "单据日期",
dataIndex: "b",
key: "b",
width: '600'
},
{
title: "年龄",
title: "供应商",
dataIndex: "c",
key: "c",
width: '200',
sumCol: true,
sorter: (a, b) => a.c - b.c
},
{
title: "武功级别",
title: "联系人",
dataIndex: "d",
key: "d",
width: 500,
@ -42,13 +40,9 @@ const columns23 = [
];
const data23 = [
{ a: "杨过", b: "男", c: 30,d:'内行', key: "2" },
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "1" },
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "31" } , { a: "杨过", b: "男", c: 30,d:'内行', key: "21" },
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "11" },
{ a: "郭靖", b: "男", c: 25,d:'大侠', key: "32" } , { a: "杨过", b: "男", c: 30,d:'内行', key: "22" },
{ a: "令狐冲", b: "男", c: 41,d:'大侠', key: "12" },
{ 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);

View File

@ -27,9 +27,9 @@ const columns16 = [
);
}
},
{ title: "用户名", dataIndex: "a", key: "a", width: 250 },
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
{ title: "订单编号", dataIndex: "a", key: "a", width: 250 },
{ id: "123", title: "单据日期", dataIndex: "b", key: "b", width: 100 },
{ title: "供应商", dataIndex: "c", key: "c", width: 200 },
];
const columns17 = [
@ -48,16 +48,16 @@ const columns17 = [
);
}
},
{ title: "用户名", dataIndex: "a", key: "a", width: 100 },
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
{ title: "订单编号", dataIndex: "a", key: "a", width: 100 },
{ id: "123", title: "单据日期", dataIndex: "b", key: "b", width: 100 },
{ title: "供应商", dataIndex: "c", key: "c", width: 200 },
];
const data16 = [
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" },
{ a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
{ a: "NU0391001", b: "2019-03-01", c: "xx供应商", d: "操作", key: "1" },
{ a: "NU0391002", b: "2018-11-02", c: "yy供应商", d: "操作", key: "2" },
{ a: "NU0391003", b: "2019-05-03", c: "zz供应商", d: "操作", key: "3" }
];
@ -86,15 +86,15 @@ class Demo16 extends Component {
if(expanded){
if(record.key==='1'){
new_obj[record.key] = [
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" }
{ a: "NU0391056", b: "2019-03-01", c: "gys1", d: "操作", key: "1" },
{ a: "NU0391057", b: "2018-11-02", c: "gys2", d: "操作", key: "2" },
]
this.setState({
data_obj:new_obj
})
}else{
new_obj[record.key] = [
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" }
{ a: "NU0391079", b: "2019-04-17", c: "gys5", d: "操作", key: "3" },
]
this.setState({
data_obj:new_obj

View File

@ -13,19 +13,19 @@ import Table from '../../src';
const columns4 = [
{
title: "Name",
title: "订单编号",
dataIndex: "name",
key: "name",
width: "40%"
},
{
title: "Age",
title: "单据日期",
dataIndex: "age",
key: "age",
width: "30%"
},
{
title: "Address",
title: "供应商",
dataIndex: "address",
key: "address"
}
@ -34,53 +34,53 @@ const columns4 = [
const data4 = [
{
key: 1,
name: "John Brown sr.",
age: 60,
address: "New York No. 1 Lake Park",
name: "NU0391001",
age: "2019-03-01",
address: "供应商1",
children: [
{
key: 11,
name: "John Brown",
age: 42,
address: "New York No. 2 Lake Park"
name: "NU0391002",
age: "2019-03-02",
address: "供应商2"
},
{
key: 12,
name: "John Brown jr.",
age: 30,
address: "New York No. 3 Lake Park",
name: "NU0391003",
age: "2019-03-03",
address: "供应商3",
children: [
{
key: 121,
name: "Jimmy Brown",
age: 16,
address: "New York No. 3 Lake Park"
name: "NU0391004",
age: "2019-03-04",
address: "供应商4"
}
]
},
{
key: 13,
name: "Jim Green sr.",
age: 72,
address: "London No. 1 Lake Park",
name: "NU0391005",
age: "2019-03-05",
address: "供应商5",
children: [
{
key: 131,
name: "Jim Green",
age: 42,
address: "London No. 2 Lake Park",
name: "NU0391006",
age: "2019-03-06",
address: "供应商6",
children: [
{
key: 1311,
name: "Jim Green jr.",
age: 25,
address: "London No. 3 Lake Park"
name: "NU0391007",
age: "2019-03-07",
address: "供应商7"
},
{
key: 1312,
name: "Jimmy Green sr.",
age: 18,
address: "London No. 4 Lake Park"
name: "NU0391008",
age: "2019-03-08",
address: "供应商8"
}
]
}
@ -90,9 +90,9 @@ const data4 = [
},
{
key: 2,
name: "Joe Black",
age: 32,
address: "Sidney No. 1 Lake Park"
name: "NU0391009",
age: "2019-03-09",
address: "供应商9"
}
];
class Demo4 extends Component {

View File

@ -1,141 +0,0 @@
/**
*
* @title 表格+搜索
* @parent 搜索 search
* @description 搜索刷新表格数据
* demo1602
*/
import React, { Component } from "react";
import {Icon,FormControl,InputGroup} from "tinper-bee";
import Table from "../../src";
class Search extends Component {
state = {
searchValue: "",
empty: false
};
/**
* 搜索
*/
handleSearch = () => {
let { onSearch } = this.props;
this.setState({
empty: true
});
onSearch && onSearch(this.state.searchValue);
};
/**
* 捕获回车
* @param e
*/
handleKeyDown = e => {
if (e.keyCode === 13) {
this.handleSearch();
}
};
/**
* 输入框改变
* @param e
*/
handleChange = (e) => {
this.setState({
searchValue: e
});
};
/**
* 清空输入框
*/
emptySearch = () => {
let { onEmpty } = this.props;
this.setState({
searchValue: "",
empty: false
});
onEmpty && onEmpty();
};
render() {
return (
<InputGroup simple className="search-component">
<FormControl
onChange={this.handleChange}
value={this.state.searchValue}
onKeyDown={this.handleKeyDown}
placeholder="请输入用户名"
type="text"
/>
{this.state.empty ? (
<Icon
type="uf-close-c"
onClick={this.emptySearch}
className="empty-search"
/>
) : null}
<InputGroup.Button onClick={this.handleSearch} shape="border">
<Icon type="uf-search" />
</InputGroup.Button>
</InputGroup>
);
}
}
const 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: "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 {
constructor(props) {
super(props);
this.state = {
data: userData
};
}
handleSearch = value => {
if (value === "") {
return this.setState({
data: userData
});
}
let regExp = new RegExp(value, "ig");
let data = userData.filter(item => regExp.test(item.a));
this.setState({
data
});
};
handleEmpty = () => {
this.setState({
data: userData
});
};
render() {
return (
<div>
<div className="clearfix">
<Search onSearch={this.handleSearch} onEmpty={this.handleEmpty} />
</div>
<Table columns={columns} data={this.state.data} />
</div>
);
}
}
export default Demo9;

File diff suppressed because one or more lines are too long

2
dist/demo.css.map vendored

File diff suppressed because one or more lines are too long

1921
dist/demo.js vendored

File diff suppressed because one or more lines are too long

2
dist/demo.js.map vendored

File diff suppressed because one or more lines are too long

View File

@ -1,19 +1,19 @@
{
"name": "bee-table",
"version": "2.0.13",
"description": "Table ui component for react",
"keywords": [
"react",
"react-component",
"bee-table",
"iuap-design",
"tinper-bee",
"Table"
],
"engines": {
"node": ">=6.0.0"
},
"jest": {
"name": "bee-table",
"version": "2.0.13",
"description": "Table ui component for react",
"keywords": [
"react",
"react-component",
"bee-table",
"iuap-design",
"tinper-bee",
"Table"
],
"engines": {
"node": ">=6.0.0"
},
"jest": {
"moduleFileExtensions": [
"js",
"jsx"