登录注册

jQuery在线表格编辑插件

插件特效
2026-07-26 04:56 4 次浏览 • 0 次下载 8.1KB
jQuery在线表格编辑插件

更新时间：2020-12-15 22:12:18

更新说明：增加鼠标移入时的边框

更新时间：2020-12-14 00:13:20

更新说明：修复新增行后单选框的选择问题

更新时间：2020-12-11 00:33:22

使用方法

添加容器：

1
<div id="table" class="full">

添加js：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
var selectOptions = [{
k: '',
v: '请选择'
},
{
k: 'java',
v: 'java开发'
},
{
k: 'python',
v: 'python开发'
},
{
k: 'rs',
v: '人事'
},
];
var list = [{
username: '张三',
age: 24,
birth: '1996-06-07',
job: 'java',
job2: 'java',
place: '武汉',
love: '1,3'
},
{
username: '杨薇',
age: 28,
birth: '1992-06-07',
job: 'python',
job2: 'java',
place: '武汉',
love: '1',
sex: '2'
}....
];
var obj = $("#table").initExcelTable({
//是否显示列头
showHeader: true,
columns: [{
//设置表头
header: {
text: "姓名",
css: {
'font-weight': 'bold'
}
},
//设置列名
fieldName: 'username',
//设置单元格类型，目前支持input(输入框)、select(下拉框)、checkbox、radio
type: "input",
width: 200,
emptyText: "请输入姓名...",
cellStyle: {
align: 'center',
},
css: {
background: '#cff'
}
},
{
header: {
text: "年龄",
css: {
'font-weight': 'bold',
background: '#9fe'
}
},
fieldName: 'age',
type: "input",
width: 200,
emptyText: "输入数字...",
readonly: true,
cellStyle: {
align: 'right',
},
css: {
background: '#0cf'
}
}...
],
//初始化行数
row: 4
});
//设置表格数据
obj.setData(list);
$("#tableBtn").click(function() {
var data = obj.getData();
$("#data").val(JSON.stringify(data, null, 2));
})
评论