jQuery插件 SlickGrid 复制单元格内容

浏览数：79 / 时间：2015年06月09日

JSP代码

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <title>SlickGrid</title>
 8 
 9 <link rel="stylesheet" href="./SlickGrid-master/slick.grid.css" type="text/css"/>
10   <link rel="stylesheet" href="./SlickGrid-master/css/smoothness/jquery-ui-1.8.16.custom.css" type="text/css"/>
11   <link rel="stylesheet" href="./SlickGrid-master/examples.css" type="text/css"/>
12   <link rel="stylesheet" href="./SlickGrid-master/controls/slick.columnpicker.css" type="text/css"/>
13 
14 <script src="./SlickGrid-master/lib/firebugx.js"></script>
15 
16 <script src="./SlickGrid-master/lib/jquery-1.7.min.js"></script>
17 <script src="./SlickGrid-master/lib/jquery-ui-1.8.16.custom.min.js"></script>
18 <script src="./SlickGrid-master/lib/jquery.event.drag-2.2.js"></script>
19 
20 <script src="./SlickGrid-master/slick.core.js"></script>
21 <script src="./SlickGrid-master/plugins/slick.checkboxselectcolumn.js"></script>
22 <script src="./SlickGrid-master/plugins/slick.autotooltips.js"></script>
23 <script src="./SlickGrid-master/plugins/slick.cellrangedecorator.js"></script>
24 <script src="./SlickGrid-master/plugins/slick.cellrangeselector.js"></script>
25 <script src="./SlickGrid-master/plugins/slick.cellcopymanager.js"></script>
26 <script src="./SlickGrid-master/plugins/slick.cellselectionmodel.js"></script>
27 <script src="./SlickGrid-master/plugins/slick.rowselectionmodel.js"></script>
28 <script src="./SlickGrid-master/controls/slick.columnpicker.js"></script>
29 <script src="./SlickGrid-master/slick.formatters.js"></script>
30 <script src="./SlickGrid-master/slick.editors.js"></script>
31 <script src="./SlickGrid-master/slick.grid.js"></script>
32 <script src="./index.js"></script>
33 </head>
34 <body>
35     <div id="myGrid" style="width:800px; height: 400px; border: 1px solid black; margin:auto;">
36     </div>
37 </body>
38 </html>

js代码

 1 var grid;
 2 var defaultcolumns = [];
 3 var data = [];
 4 var options = {
 5 
 6 };
 7 $(function() {
 8     data = getData();
 9     defaultcolumns = getColumns();
10     
11     grid = new Slick.Grid("#myGrid", data, defaultcolumns, options);
12     
13     var cellSelectionModel = new Slick.CellSelectionModel(options);
14     grid.setSelectionModel(cellSelectionModel);
15     var cellCopyManager =  new Slick.CellCopyManager();
16     grid.registerPlugin(cellCopyManager);
17     
18     /*
19      * copy
20      */
21     cellCopyManager.onCopyCells.subscribe(function(e,args){
22         var cell = grid.getActiveCell();
23         var cellvalue = grid.getDataItem(cell.row)[grid.getColumns()[cell.cell].field];
24         window.clipboardData.setData("Text",cellvalue+"");
25     });
26 });
27 
28 function getData() {
29     var data = [];
30     for(var i = 0;i<1000;i++){
31         data.push( {
32             id : 10000000 + i,
33             name : ‘name‘ + i,
34             sex : i%2==0?‘男‘:‘女‘,
35             age : parseInt(Math.random() * (50 - 20 + 1) + 20),
36             phone : 1+""+ (parseInt(Math.random() * (9999999999 - 1000000000 + 1) + 1000000000)) + "",
37             qq : parseInt(Math.random() * (1000000000 - 100000000 + 1) + 100000000) + ""
38         });
39     }
40     return data;
41 }
42 
43 function getColumns() {
44     var columns = [];
45     columns.push( {id:‘id‘,name:‘id‘,field:‘id‘,width:100});
46     columns.push( {id:‘name‘,name:‘name‘,field:‘name‘,width:100});
47     columns.push( {id:‘sex‘,name:‘sex‘,field:‘sex‘,width:80});
48     columns.push( {id:‘age‘,name:‘age‘,field:‘age‘,width:80});
49     columns.push( {id:‘phone‘,name:‘phone‘,field:‘phone‘,width:100});
50     columns.push( {id:‘qq‘,name:‘qq‘,field:‘qq‘,width:100});
51     return columns;
52 }