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

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

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

 

 

页面调用方法：

1、首先引用所需的js文件

    

<script src="js/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="js/CoordTable/js/jquery-ui-1.8.9.custom.min.js" type="text/javascript"></script>
    <script src="js/CoordTable/js/jquery.contextmenu.r2.js" type="text/javascript"></script>
    <script src="js/CoordTable/js/coordTable.js" type="text/javascript"></script>
    <script src="js/tableEditer.js" type="text/javascript"></script>

2、页面代码

    

 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下载地址

DEMO演示地址