Skip to content

Commit 5cac59b

Browse files
luo0412luo0412
committed
small change
1 parent 7e2bdd5 commit 5cac59b

File tree

136 files changed

+42877
-75
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

136 files changed

+42877
-75
lines changed

‎_antd/table/editable-cell.less‎

Lines changed: 0 additions & 25 deletions
This file was deleted.

‎_antd/table/editable-row.less‎

Lines changed: 0 additions & 12 deletions
This file was deleted.

‎_antd/table/editable-cell.js‎ renamed to ‎_antd/table/editable/editable-cell-click-toggle.js‎

File renamed without changes.

‎_antd/table/editable/editable-row-cell-only-sth-mistake.js‎ renamed to ‎_antd/table/editable/editable-row-cell-sth-mistake-now.js‎

File renamed without changes.

‎_antd/table/editable/editable-row-unit.js‎ renamed to ‎_antd/table/editable/editable-row-edit-context-straight.js‎

File renamed without changes.

‎_antd/table/editable/editable-row-edit-custom-input.js‎

Lines changed: 110 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,110 @@
1+
import { Table, Input, InputNumber, Popconfirm, Form } from 'antd';
2+
3+
import "./editable-row.less"
4+
5+
6+
function getData () {
7+
const data = [];
8+
for (let i = 0; i < 100; i++) {
9+
data.push({
10+
key: i.toString(),
11+
name: `Edrward ${i} ${Math.random()}`,
12+
age: 10,
13+
address: `London Park no. ${i}`,
14+
});
15+
}
16+
17+
return data
18+
}
19+
20+
class EditableTable extends React.Component {
21+
constructor(props) {
22+
super(props);
23+
this.state = {
24+
data: getData(),
25+
};
26+
27+
this.columns = [
28+
{
29+
title: 'name',
30+
dataIndex: 'name',
31+
width: '25%',
32+
editable: true,
33+
},
34+
{
35+
title: 'age',
36+
dataIndex: 'age',
37+
width: '15%',
38+
editable: true,
39+
render: (text, record) => {
40+
return <InputNumber style={{ wdith: '100%' }} defaultValue={text} onChange={(values) => { this.handleInputNumberChange(values, record) }} />
41+
},
42+
},
43+
{
44+
title: 'address',
45+
dataIndex: 'address',
46+
width: '40%',
47+
editable: true,
48+
49+
},
50+
];
51+
}
52+
53+
handleInputNumberChange = (values, record) => {
54+
const newData = [...this.state.data];
55+
const index = newData.findIndex(item => record.key === item.key);
56+
57+
58+
if (index > -1) {
59+
const item = newData[index];
60+
const newLine = {
61+
...item,
62+
...record,
63+
age: values,
64+
}
65+
66+
67+
setTimeout(() => {
68+
newData.splice(index, 1, newLine);
69+
this.setState({
70+
// data: newData,
71+
data: getData(),
72+
});
73+
74+
console.log('我变了~~')
75+
console.log(newLine)
76+
}, 2000)
77+
78+
79+
80+
}
81+
}
82+
83+
cancel = () => {
84+
};
85+
86+
87+
88+
89+
render() {
90+
91+
return (
92+
93+
<Table
94+
bordered
95+
dataSource={this.state.data}
96+
columns={this.columns}
97+
rowClassName="editable-row"
98+
pagination={{
99+
onChange: this.cancel,
100+
}}
101+
/>
102+
103+
);
104+
}
105+
}
106+
107+
const EditableFormTable = Form.create()(EditableTable);
108+
109+
ReactDOM.render(<EditableFormTable />, mountNode);
110+

‎_antd/table/editable-row.js‎ renamed to ‎_antd/table/editable/editable-row-operate-toggle.js‎

Lines changed: 10 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -127,12 +127,16 @@ class EditableTable extends React.Component {
127127
const newData = [...this.state.data];
128128
const index = newData.findIndex(item => key === item.key);
129129
if (index > -1) {
130-
const item = newData[index];
131-
newData.splice(index, 1, {
132-
...item,
133-
...row,
134-
});
135-
this.setState({ data: newData, editingKey: '' });
130+
131+
setTimeout(() => {
132+
const item = newData[index];
133+
newData.splice(index, 1, {
134+
...item,
135+
...row,
136+
});
137+
this.setState({ data: newData, editingKey: '' });
138+
}, 0)
139+
136140
} else {
137141
newData.push(row);
138142
this.setState({ data: newData, editingKey: '' });

‎_misc/layui/soulTable.ejs‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<link rel="icon" href="/favicon.png" type="image/x-icon" />
8+
<title><%= htmlWebpackPlugin.options.title %></title>
9+
<link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
10+
<link href="https://cdn.bootcss.com/tailwindcss/0.7.3/utilities.min.css" rel="stylesheet">
11+
<link href="https://cdn.bootcss.com/antd/3.23.6/antd.min.css" rel="stylesheet">
12+
<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.4/css/layui.css">
13+
14+
15+
16+
17+
</head>
18+
<body>
19+
20+
21+
<div id="root" class="p-5"></div>
22+
<script>
23+
// 用于挂载
24+
var mountNode = document.getElementById('root')
25+
</script>
26+
27+
<script src="https://www.layuicdn.com/layui-v2.5.4/layui.js"></script>
28+
<script>
29+
// 自定义模块，这里只需要开放soulTable即可
30+
layui.config({
31+
base: '/plugins/layui-soul-table-v1.5.2/', // 模块所在目录
32+
version: 'v1.5.2' // 插件版本号
33+
}).extend({
34+
soulTable: 'soulTable' // 模块别名
35+
});
36+
</script>
37+
38+
</body>
39+
</html>

‎_misc/layui/soulTable.js‎

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
import React, {useEffect} from "react"
2+
import ReactDOM from "react-dom"
3+
4+
5+
function App() {
6+
7+
useEffect(() => {
8+
9+
layui.use(['form', 'table','soulTable'], function () {
10+
var table = layui.table,
11+
soulTable = layui.soulTable;
12+
13+
table.render({
14+
elem: '#myTable'
15+
,url: '/mock/data.json'
16+
,height: 500
17+
,page: false
18+
,cols: [[
19+
{title: '#', width: 50, children:[
20+
{
21+
title: '子表',
22+
url: '/mock/data.json'
23+
,height: 500
24+
,page: false
25+
,cols: [[
26+
{title: '#', width: 50, children:[
27+
{
28+
title: '子表的子表'
29+
,url: '/mock/data.json'
30+
,height: 300
31+
,page: false
32+
,cols: [[
33+
{title: '#', width: 50, children:[
34+
{
35+
title: '子表的子表的子表'
36+
,url: '/mock/data.json'
37+
,height: 300
38+
,page: false
39+
,cols: [[
40+
{field: 'title', title: '诗词', width: 200, sort: true, filter: true},
41+
{field: 'dynasty', title: '朝代', width: 100, sort: true, filter: true},
42+
{field: 'author', title: '作者', width: 165 , filter: true},
43+
{field: 'content', title: '内容', width: 123, filter: true},
44+
{field: 'type', title: '类型', width: 112, filter: {split:','}, sort:true},
45+
{field: 'heat', title: '点赞数', width: 112, filter: true, sort:true},
46+
{field: 'createTime', title: '录入时间', width: 165, filter: {type: 'date[yyyy-MM-dd HH:mm:ss]'}, sort:true},
47+
{title: '操作', width: 156, templet: '#childBar'}
48+
]]
49+
,done: function () {
50+
soulTable.render(this);
51+
}
52+
}
53+
]},
54+
{field: 'title', title: '诗词', width: 200, sort: true, filter: true},
55+
{field: 'dynasty', title: '朝代', width: 100, sort: true, filter: true},
56+
{field: 'author', title: '作者', width: 165 , filter: true},
57+
{field: 'content', title: '内容', width: 123, filter: true},
58+
{field: 'type', title: '类型', width: 112, filter: {split:','}, sort:true},
59+
{field: 'heat', title: '点赞数', width: 112, filter: true, sort:true},
60+
{field: 'createTime', title: '录入时间', width: 165, filter: {type: 'date[yyyy-MM-dd HH:mm:ss]'}, sort:true},
61+
{title: '操作', width: 156, templet: '#childBar'}
62+
]]
63+
,done: function () {
64+
soulTable.render(this);
65+
}
66+
}
67+
]},
68+
{field: 'title', title: '诗词', width: 200, sort: true, filter: true},
69+
{field: 'dynasty', title: '朝代', width: 100, sort: true, filter: true},
70+
{field: 'author', title: '作者', width: 165 , filter: true},
71+
{field: 'content', title: '内容', width: 123, filter: true},
72+
{field: 'type', title: '类型', width: 112, filter: {split:','}, sort:true},
73+
{field: 'heat', title: '点赞数', width: 112, filter: true, sort:true},
74+
{field: 'createTime', title: '录入时间', width: 165, filter: {type: 'date[yyyy-MM-dd HH:mm:ss]'}, sort:true},
75+
{title: '操作', width: 156, templet: '#childBar'}
76+
]]
77+
,done: function () {
78+
soulTable.render(this);
79+
}
80+
}
81+
]},
82+
{field: 'title', title: '诗词', width: 200, sort: true, filter: true},
83+
{field: 'dynasty', title: '朝代', width: 100, sort: true, filter: true},
84+
{field: 'author', title: '作者', width: 165 , filter: true},
85+
{field: 'content', title: '内容', width: 123, filter: true},
86+
{field: 'type', title: '类型', width: 112, filter: {split:','}, sort:true},
87+
{field: 'heat', title: '点赞数', width: 112, filter: true, sort:true, excel:{cellType: 'n'}},
88+
{field: 'createTime', title: '录入时间', width: 165, filter: {type: 'date[yyyy-MM-dd HH:mm:ss]'}, sort:true},
89+
]]
90+
,done: function () {
91+
soulTable.render(this)
92+
}
93+
});
94+
})
95+
96+
}, []);
97+
98+
99+
return (
100+
<div>
101+
102+
<table id="myTable" ></table>
103+
104+
</div>
105+
);
106+
}
107+
108+
ReactDOM.render(<App />, mountNode);
109+

‎_misc/layui/treeTable.ejs‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<link rel="icon" href="/favicon.png" type="image/x-icon" />
8+
<title><%= htmlWebpackPlugin.options.title %></title>
9+
<link href="https://cdn.bootcss.com/normalize/7.0.0/normalize.min.css" rel="stylesheet">
10+
<link href="https://cdn.bootcss.com/tailwindcss/0.7.3/utilities.min.css" rel="stylesheet">
11+
<link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.5.4/css/layui.css">
12+
<link rel="/plugins/treeTable/treeTable.css">
13+
14+
</head>
15+
<body>
16+
17+
18+
<div id="root" class="p-5"></div>
19+
20+
<script>
21+
// 用于挂载
22+
var mountNode = document.getElementById('root')
23+
</script>
24+
25+
<script src="/plugins/layui/layui.js"></script>
26+
<script>
27+
// 自定义模块，这里只需要开放soulTable即可
28+
layui.config({
29+
base: '/plugins/', // 模块所在目录
30+
version: 'v1.5.2' // 插件版本号
31+
}).extend({
32+
treeTable: 'treeTable/treeTable',
33+
});
34+
</script>
35+
36+
</body>
37+
</html>

0 commit comments

Comments
 (0)