将Excel的内容复制到EasyUI的dataGrid里（复制列）
2014-07-01 13:08
169 查看
在网上找了好久，将Excel的内容复制到EasyUI的dataGrid里，都没有找到相应的解决方案，于自己写了段JS，性能也可以，经过测试复制Excel里10006条数据，只需要10秒左右。
JS：comm.component.js
var comm = {};
comm.clipboard = {};
//ctrol + v 事件
comm.clipboard._cellkeydown = function(event, id, gid){
var _id = id;
if (event.ctrlKey && event.keyCode == 86 && id) {
var _help = document.getElementById(id);
_help.focus();
_help.select();
var fncall = "comm.clipboard._dealwithData('"+_id+"','"+gid+"')";
setTimeout(fncall,50);
}
_help = fncall = event = id = null;
}
//将粘贴事件转移到textArea中
comm.clipboard._dealwithData = function(id, gid){
var _help = document.getElementById(id);
_help.blur();
var excelValues = comm.clipboard._getColumnsByClipboard($(_help).val()),
rowIndex = comm.clipboard.curIdx,
field = comm.clipboard.curField;
comm.datagrid.excel2grid(gid,rowIndex,field,excelValues);
_help = id = null;
}
//将贴过来的Excel中内容分解成数组
comm.clipboard._getColumnsByClipboard = function(context){
var cols= [];
if(context){
cols = context.split('\n');
if('' == cols[cols.length - 1]){
cols.pop();
}
}
context = null;
return cols;
}
/**
*设置gridid在idx行的第fieldName列为fieldValue
*@gridid grid的Id
*@idx 第idx行
*@fieldName 更新的字段名称
*@fieldValue 更新的值
*/
comm.datagrid={};
comm.datagrid.setCell = function(gridid, idx, fieldName, fieldValue){
if(!(gridid && (idx >= 0) && fieldName)){
return;
}
var _r = $('#' + gridid).datagrid('selectRow', idx);
_r[fieldName] = fieldValue;
$('#' + gridid).datagrid('updateRow', {index: idx, row: _r});
_r = gridid = idx = fieldName = fieldValue = null;
}
/**
*设置gridid在idx行的第fieldName列为fieldValue
*@gridid grid的Id
*@staIdx 第idx行
*@fieldName 更新的字段名称
*@fieldValues 更新的值
*/
comm.datagrid.setCells = function(gridid, staIdx, fieldName, fieldValues){
if(!(gridid && (staIdx >= 0) && fieldName && fieldValues)){
return;
}
var recs = $('#' + gridid).datagrid('getRows');
comm.datagrid.updateAndAdd(recs, staIdx, fieldName, fieldValues);
$('#' + gridid).datagrid('loadData',{total:recs.length,rows:recs});
gridid = staIdx = fieldName = fieldValues = null;
}
comm.datagrid.updateAndAdd = function(recs, startIdx, fieldName, fieldValues){
if(!(fieldName && fieldValues)){
return;
}
if(!recs){
recs = [];
}
var rcnt = recs.length,
fcnt = fieldValues.length,
ucnt = fcnt > rcnt ? fcnt : fcnt + startIdx;
//console.info(startIdx,rcnt,fcnt,ucnt,fieldName,recs);
for(var i = startIdx, len = ucnt; i < len; i++){
if(i < rcnt){
recs[i][fieldName] = fieldValues[i - startIdx];
}else{
var _r = {};
_r[fieldName] = fieldValues[i - startIdx];
recs.push(_r);
}
}
}
/**
*从Excel复制到datagrid之中
*@gridid grid的Id
*@staIdx 第idx行
*@fieldName 更新的字段名称
*@fieldValues 更新的值
*/
comm.datagrid.excel2grid = function(gridid, staIdx, fieldName, fieldValues){
if(!(gridid && (staIdx >= 0) && fieldName && fieldValues)){
return;
}
comm.datagrid.setCells(gridid, staIdx, fieldName, fieldValues);
gridid = staIdx = fieldName = fieldValues = null;
}
/**
*初始从Excel复制到datagrid之中功能
*@option 初始化参数,其中gid是指grid的ID
*@example
*comm.datagrid.initExcel2Grid({gid:'t1'});
*/
comm.datagrid.initExcel2Grid = function(option){
var opt = option;
if(!(opt && opt.gid)){
return ;
}
var _clipToolId_ = '_clipToolId_' + opt.gid;
var _clipToolDIV = '<textarea id="'+ _clipToolId_ +'" style="width:0px;height:0px"></textarea>';
//获取剪切板的内容
$('body').append(_clipToolDIV);
//Ctrol + V事件必须在body上面
$('body').keydown(function(event){
var _id = _clipToolId_;
comm.clipboard._cellkeydown(event, _id, opt.gid);
});
//添加grid onClickCell事件，用于传递当前Grid编辑信息
$('#' + opt.gid).datagrid({
onClickCell:function(rowIndex, field, value){
comm.clipboard.curIdx = rowIndex;
comm.clipboard.curField = field;
}
});
}
/**
*销毁Excel2Grid功能
*@option 初始化参数,其中gid是指grid的ID
*/
comm.datagrid.destoryExcel2Grid = function(option){
var opt = option;
if(!(opt && opt.gid)){
return ;
}
var _clipToolId_ = '_clipToolId_' + opt.gid;
$('#' + _clipToolId_).remove();
$('body').unbind('keydown');
}
HTML：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html";/>
<link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.3.2/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.3.2/themes/icon.css">
<link rel="stylesheet" type="text/css" href="/css/base.css">
<!-- ** Javascript ** -->
<script type="text/javascript" src="/js/commons/jquery.min.js"></script>
<script type="text/javascript" src="/js/commons/jquery.form.js"></script>
<script type="text/javascript" src="/js/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/view/comm/comm.component.js"></script>
<title>Excel To DataGrid</title>
<script>
//页面初始后才开始初始化复制功能
$(function(){
comm.datagrid.initExcel2Grid({gid:'t1'});
});
</script>
</head>
<body >
<div>
从Excel 复制到easy UI DataGrid，只支持列复制
</div>
<div style="margin:20px 0;"></div>
<table id="t1" class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json'">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
</body>
JS：comm.component.js
var comm = {};
comm.clipboard = {};
//ctrol + v 事件
comm.clipboard._cellkeydown = function(event, id, gid){
var _id = id;
if (event.ctrlKey && event.keyCode == 86 && id) {
var _help = document.getElementById(id);
_help.focus();
_help.select();
var fncall = "comm.clipboard._dealwithData('"+_id+"','"+gid+"')";
setTimeout(fncall,50);
}
_help = fncall = event = id = null;
}
//将粘贴事件转移到textArea中
comm.clipboard._dealwithData = function(id, gid){
var _help = document.getElementById(id);
_help.blur();
var excelValues = comm.clipboard._getColumnsByClipboard($(_help).val()),
rowIndex = comm.clipboard.curIdx,
field = comm.clipboard.curField;
comm.datagrid.excel2grid(gid,rowIndex,field,excelValues);
_help = id = null;
}
//将贴过来的Excel中内容分解成数组
comm.clipboard._getColumnsByClipboard = function(context){
var cols= [];
if(context){
cols = context.split('\n');
if('' == cols[cols.length - 1]){
cols.pop();
}
}
context = null;
return cols;
}
/**
*设置gridid在idx行的第fieldName列为fieldValue
*@gridid grid的Id
*@idx 第idx行
*@fieldName 更新的字段名称
*@fieldValue 更新的值
*/
comm.datagrid={};
comm.datagrid.setCell = function(gridid, idx, fieldName, fieldValue){
if(!(gridid && (idx >= 0) && fieldName)){
return;
}
var _r = $('#' + gridid).datagrid('selectRow', idx);
_r[fieldName] = fieldValue;
$('#' + gridid).datagrid('updateRow', {index: idx, row: _r});
_r = gridid = idx = fieldName = fieldValue = null;
}
/**
*设置gridid在idx行的第fieldName列为fieldValue
*@gridid grid的Id
*@staIdx 第idx行
*@fieldName 更新的字段名称
*@fieldValues 更新的值
*/
comm.datagrid.setCells = function(gridid, staIdx, fieldName, fieldValues){
if(!(gridid && (staIdx >= 0) && fieldName && fieldValues)){
return;
}
var recs = $('#' + gridid).datagrid('getRows');
comm.datagrid.updateAndAdd(recs, staIdx, fieldName, fieldValues);
$('#' + gridid).datagrid('loadData',{total:recs.length,rows:recs});
gridid = staIdx = fieldName = fieldValues = null;
}
comm.datagrid.updateAndAdd = function(recs, startIdx, fieldName, fieldValues){
if(!(fieldName && fieldValues)){
return;
}
if(!recs){
recs = [];
}
var rcnt = recs.length,
fcnt = fieldValues.length,
ucnt = fcnt > rcnt ? fcnt : fcnt + startIdx;
//console.info(startIdx,rcnt,fcnt,ucnt,fieldName,recs);
for(var i = startIdx, len = ucnt; i < len; i++){
if(i < rcnt){
recs[i][fieldName] = fieldValues[i - startIdx];
}else{
var _r = {};
_r[fieldName] = fieldValues[i - startIdx];
recs.push(_r);
}
}
}
/**
*从Excel复制到datagrid之中
*@gridid grid的Id
*@staIdx 第idx行
*@fieldName 更新的字段名称
*@fieldValues 更新的值
*/
comm.datagrid.excel2grid = function(gridid, staIdx, fieldName, fieldValues){
if(!(gridid && (staIdx >= 0) && fieldName && fieldValues)){
return;
}
comm.datagrid.setCells(gridid, staIdx, fieldName, fieldValues);
gridid = staIdx = fieldName = fieldValues = null;
}
/**
*初始从Excel复制到datagrid之中功能
*@option 初始化参数,其中gid是指grid的ID
*@example
*comm.datagrid.initExcel2Grid({gid:'t1'});
*/
comm.datagrid.initExcel2Grid = function(option){
var opt = option;
if(!(opt && opt.gid)){
return ;
}
var _clipToolId_ = '_clipToolId_' + opt.gid;
var _clipToolDIV = '<textarea id="'+ _clipToolId_ +'" style="width:0px;height:0px"></textarea>';
//获取剪切板的内容
$('body').append(_clipToolDIV);
//Ctrol + V事件必须在body上面
$('body').keydown(function(event){
var _id = _clipToolId_;
comm.clipboard._cellkeydown(event, _id, opt.gid);
});
//添加grid onClickCell事件，用于传递当前Grid编辑信息
$('#' + opt.gid).datagrid({
onClickCell:function(rowIndex, field, value){
comm.clipboard.curIdx = rowIndex;
comm.clipboard.curField = field;
}
});
}
/**
*销毁Excel2Grid功能
*@option 初始化参数,其中gid是指grid的ID
*/
comm.datagrid.destoryExcel2Grid = function(option){
var opt = option;
if(!(opt && opt.gid)){
return ;
}
var _clipToolId_ = '_clipToolId_' + opt.gid;
$('#' + _clipToolId_).remove();
$('body').unbind('keydown');
}
HTML：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html";/>
<link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.3.2/themes/bootstrap/easyui.css">
<link rel="stylesheet" type="text/css" href="/js/jquery-easyui-1.3.2/themes/icon.css">
<link rel="stylesheet" type="text/css" href="/css/base.css">
<!-- ** Javascript ** -->
<script type="text/javascript" src="/js/commons/jquery.min.js"></script>
<script type="text/javascript" src="/js/commons/jquery.form.js"></script>
<script type="text/javascript" src="/js/jquery-easyui-1.3.2/jquery.easyui.min.js"></script>
<script type="text/javascript" src="/view/comm/comm.component.js"></script>
<title>Excel To DataGrid</title>
<script>
//页面初始后才开始初始化复制功能
$(function(){
comm.datagrid.initExcel2Grid({gid:'t1'});
});
</script>
</head>
<body >
<div>
从Excel 复制到easy UI DataGrid，只支持列复制
</div>
<div style="margin:20px 0;"></div>
<table id="t1" class="easyui-datagrid" title="Basic DataGrid" style="width:700px;height:250px"
data-options="singleSelect:true,collapsible:true,url:'datagrid_data1.json'">
<thead>
<tr>
<th data-options="field:'itemid',width:80">Item ID</th>
<th data-options="field:'productid',width:100">Product</th>
<th data-options="field:'listprice',width:80,align:'right'">List Price</th>
<th data-options="field:'unitcost',width:80,align:'right'">Unit Cost</th>
<th data-options="field:'attr1',width:250">Attribute</th>
<th data-options="field:'status',width:60,align:'center'">Status</th>
</tr>
</thead>
</table>
</body>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- EasyUI Datagrid 鼠标悬停显示单元格内容 复制代码
- easyui中datagrid标题居中内容居左实现方式
- txt中的内容复制到excel中无法对齐， 该怎么处理？
- MVC项目中如何用JS导出EasyUI DataGrid为Excel
- easyui datagrid 列的内容超出所定义的列宽时,自动换行
- easyui datagrid 列的内容超出所定义的列宽时,自动换行
- 实现easyui的datagrid导出为excel的示例代码
- 输出datagrid的内容到excel
- Excel VBA 从一个工作簿查找另一个一个工作簿中的一些内容复制到另外一个工作簿
- zclip结合easyui实现复制datagrid每行特定单元格数据的功能
- flex AdvancedDataGrid 右键内容复制
- 分享：将DataGrid内容生成标准的Excel格式文件(office2003)
- 扩展:easyui datagrid鼠标经过提示单元格内容
- DataGrid内容导出Excel文件（C#）
- EXCEL复制筛选内容
- 利用Aspose.Cells完成easyUI中DataGrid数据的Excel导出功能
- easyui datagrid-detailview 填充内容后左侧无法对齐
- 利用Aspose.Cells完成easyUI中DataGrid数据的Excel导出功能
- EasyUI DataGrid 修改每页显示数量的最大值&&导出Grid到Excel
- easyUI datagrid导出excel（所见即所得）