表格编辑、拖拽、复制、粘贴、剪贴、删除、清空

因为项目的需要，花了大概一个月的时间完成了一个对table编辑、拖拽、复制、粘贴、剪贴、删除、清空的功能

主要使用的是Jquery ui和jquery.contextmenu，使用了Jquery UI中的Drag功能和jquery.contextmenu的右键菜单功能，功能简介，如果是复杂的table的话可能就不适应了，对于数据量多的table加载也很慢。目前只支持IE，首先来预览功能

View Code

1 $(document).ready(function () {
2
3 var complate = function () {
4 $('#coordTable tr:gt(0) td:nth-child(1)').each(function (i, item) {
5 $(this).text(i + 1);
6 });
7 }
8
9 //创建行
10 var createRow = function () {
11 var tr = $('<tr class="data"><td></td><td></td><td></td><td></td><td></td><td></td></tr>');
12 return tr;
13 }
14
15 //剪贴后触发的方法
16 var cuted = function () {
17 if ($('#coordTable tr').length <= 1) {
18 var tr = createRow();
19 $('#coordTable').append(tr);
20 }
21 complate();
22 }
23
24 //主调函数
25 setTimeout(function () {
26 $('#coordTable').coordTable({
27 selecte_col_len: 4, //坐标每行的列数
28 selector_row: 'tr.data td:nth-child(1)', //一个jquery选择器，表示可以点击选择行的区域
29 selector_td: 'tr.data td:nth-child(n+2)', //一个jquery选择器，表示可以用鼠标拖拽的区域
30 appended: complate,
31 inserted: complate,
32 deleted: cuted,
33 cleared: cuted,
34 pasted: complate,
35 cuted: cuted,
36 create_row: createRow,
37 enableCopy: true,
38 enablePaste: true,
39 enableCut: true,
40 enableAppend: true,
41 enableInsert: true,
42 enableDelete: true,
43 enableEdit: true
44 });
45
46 $('#coordTable').tableEditer({
47 selector: 'tr.data td:nth-child(n+2)',
48 updated: function (td, txt) {
49 $('#coordTable').coordTable.floatOnTable();
50 }
51 });
52
53 }, 500);
54
55 });

DEMO下载地址

[b]DEMO演示地址[/b]