`
piaoling
  • 浏览: 262041 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

在线电子表格spreadsheet操作实现

    博客分类:
  • java
阅读更多

最近公司的业务需要在浏览器中使用mircosoft的owc中的在线电子表格功能,也就是spreadsheet这个控件

看了一段间的API,做了一些测试,下面就写一简单的操作,希望能给有需要的朋友一些帮助

 

概述:

整个功能是一个通过在WEB页面中编辑Excel,然后,保存到数据中,包括:读取和修改保存操作

前台与后台主要采用json格式进行数据交换,JAVA中使用了,org.json JAR包,大家可以自己去下载

过程

1,前台

JSP:

<script src="../common/json.js"></script>
<script src="../common/ExcelUtils.js" ></script>
<script language="javascript">
window.onload = function(){
	var spreadSheet = document.getElementById("mySpreadsheet");
    var reportFilePath = "bsfc2gufen/reportTemplate.xml";
    var url = "pages/rp/template.jsp?path=" + reportFilePath ;
    try {
      spreadSheet.XMLURL = "RpGetXMLStreamServlet?path="+reportFilePath;
  
      spreadSheet.refresh();
	  
    } catch (ex) {
    	alert("文件未找到");
    }    
    //设置spreadsheet控制的ID号
    setSpreadsheetId("mySpreadsheet");
    //设置Excel中所要显示的字段名
    var fields = ["payfileTypeName","payfileCheckName","beginUser","custName"];
    setJSONFields(fields);
}
	//从服务器查询数据
	function getServerData(){
		
		getDataFromServer('TestAction.do', 'name=data');
		
	}
	//保存客户端需要修改的数据
	function save(){
		saveJSONRecord('tnbaccount');
	}
</script>

</head>

<body>

<table id="mainFrameTable" width="100%" height="60%" cellpadding=1
	cellspacing=0>
	<tr height=100%>

		<td id="rightContent" width=100% vAlign="top">
		<div style="overflow:hidden;width:100%"><object
			id="mySpreadsheet"
			classid="CLSID:0002E559-0000-0000-C000-000000000046"
			style="width:100%;height:400"> </object></div>
		</td>
	</tr>
</table>

<button onclick="getServerData()">得到服务器端数据</button>
<button onclick="save()">保存数据</button>
<script for="mySpreadsheet" event="sheetchange">
	changeSheet();
</script>
<script for="mySpreadsheet" event="StartEdit">
	json_temp = mySpreadsheet.activecell.value;
</script>

 其中要引入两个js文件,一个是json的js,一个是我自己写的js,主要用来处理前后台的数据部分,其中的ajax部分,我参考了坛子的一位网友改写而来的.

主要说明:

(1)window.onload

主要用于加载spreadsheet对象所需要的模板,注意这里的模板只能excel的xml形式的文件(在excel文件保存的时候,选择文件类型为xml表格数据即可)

 

(2)设置spreadsheet控制的ID号
是必须的   

(3)设置Excel中所要显示的字段名

是必须的

(4)<object id="mySpreadsheet"
classid="CLSID:0002E559-0000-0000-C000-000000000046"
style="width:100%;height:400"> </object>

 

主要用就是用来加载spreadsheet这个excel控件

最下面是两个spreadsheet事件的监听

 

2.后台JAVA部分:

 

PrintWriter pw = null;
OutputStream os = null;
InputStream in = null;
String path = request.getSession().getServletContext().getRealPath("/");		
logger.info("----path-----"+path);
File file = new File(path+filepath);
//文件不存在处理
if(!file.exists()){
pw = (PrintWriter)response.getWriter();
logger.info(path+filepath+"文件不存在");
try{
StringBuffer buffer = new StringBuffer();
buffer.append("<script>");
buffer.append("alert('文件"+path+filepath+"')");
buffer.append("<script>");
pw.write(buffer.toString());
pw.flush();
buffer = null;
}catch(Exception e){
	throw new Exception(e);
}finally{
	if(null != pw)
	pw.close();
}
return null;
}
		
try{
			
response.setContentType("application/unknown");
response.addHeader("Content-Disposition", "attachment; filename=reportTemplate.xml" );
os = response.getOutputStream();
in = new FileInputStream(file);
 byte btyes[] = new byte[1024];
for(int len = 0; (len = in.read(btyes)) != -1;)
os.write(btyes, 0, len);
			
}catch(Exception e){
	e.printStackTrace();
}finally{
	os.flush();
	if(null != in)
	in.close();
	if(null != os)
	os.close();
}
return null;

 上述是一struts的action继承类,主要用于加载excel的xml模板,当然,你也可以使用全URL在页面中直接指定,也可以

 

req.setCharacterEncoding("utf-8");
String jsonString = req.getParameter("tnbaccount");
JSONObject jsonObject = new JSONObject(jsonString);
JSONArray array = jsonObject.getJSONArray("tnbaccount");
JSONObject temp = null;
Map map = null;
for(int i = 0; i < array.length(); i++){
temp = (JSONObject)array.get(i);
			
map = ConvertJSONObject.convertToMap(temp);
log.info(map);dao.save(map);
}
PrintWriter pw = res.getWriter();
pw.write("保存成功!");
pw.flush();
pw.close();
return null;

 

这个类主要接收客户端发来的保存请求,这里面我直接把JSON对象,转化成一个个的MAP对象,进行保存,当然你也可以自己把JSON对象转化成自己所需要的对象。ConvertJSONObject这个类是我自己写的,很简单,就是对JSON对象进行遍历,然后再组织成Map对象。不就贴出来了

以上代码只考虑实现,没有考完好的内存异常处理等

 

 关于ExcelUtils.js内容,请看附件内容。另外,附件里还包括了一个spreadsheet控制的API文档

 

注意:以上内容只是自己研究的一点内容,不正确的,请大家指定。

 

分享到:
评论
8 楼 yvigmmwfn 2009-07-29  
能不能把整个实例传上来?
7 楼 piaoling 2009-03-23  
你查一下API,没有这个事件哦
你可以直接监听onchange事件,判断当前KEY,如果是删除键就做你自己想要做的事情
6 楼 delphishen 2009-03-19  
我加了个spreadsheet事件的监听,不知道怎么老是监听不到呢,我是想监听删除行时
下面是代码.
<script for="mySpreadsheet" event="beforedelete"> 
   alert('beforeDelete');
</script>
5 楼 delphishen 2009-03-18  
不用帖了.搞定了
4 楼 delphishen 2009-03-18  
把服务器返回的json 格式帖出来吧
3 楼 delphishen 2009-03-18  
能不能把 TestAction.do 这个文件帖出来.
2 楼 delphishen 2009-03-18  
能不能把 json.js 这个文件也帖出来
1 楼 fralepg 2009-02-06  
学习学习 谢了

相关推荐

    zk spreadsheet3.9.1 在线电子表格

    ZK Spreadsheet 3.9.1 是一个基于Web的电子表格组件,专为构建在线协作和数据编辑的应用程序设计。这个版本提供了与Microsoft Excel类似的功能,让用户能够在浏览器中创建、编辑和共享电子表格,无需安装任何桌面...

    电子表格程序Spreadsheet

    《C++ GUI Qt4编程》书中电子表格程序Spreadsheet的增强版。主要修改如下: 1. 将SDI改为MDI 2. 增加Undo和Redo功能(Command设计模式实现) 3. 自动修正公式(复制公式到新的位置时,根据新位置修正公式) 4. 其他...

    轻量级在线表格(canvas ) 组件.zip

    这个x-spreadsheet组件就是利用canvas的强大能力来模拟传统电子表格的界面和功能。 在x-spreadsheet-master项目中,开发团队巧妙地利用了canvas的像素操作,构建出一个性能高效的在线表格。它的核心优势在于其轻量...

    PHPExcelHelper基于PhpSpreadsheet以简单的方式读写电子表格

    总的来说,PHPExcelHelper是PHP开发者处理Excel文件的得力助手,它简化了与电子表格交互的复杂性,使我们能更专注于业务逻辑的实现,而不是底层的文件操作。通过熟练掌握这个库,我们可以快速地开发出高效、易用的...

    xspreadsheet一个用于Web的JavaScript电子表格

    1. **丰富的表格功能**:x-spreadsheet支持多种标准的电子表格操作,如单元格编辑、公式计算、排序、过滤、合并单元格、条件格式化等,满足用户日常的数据处理需求。 2. **高性能渲染**:利用Canvas技术,x-...

    PhpSpreadsheet一个读取和写入电子表格文件的纯PHP库

    安装完成后,你可以导入所需类库并开始操作电子表格文件。例如,读取一个 Excel 文件: ```php use PhpOffice\PhpSpreadsheet\IOFactory; $file = 'path_to_your_file.xlsx'; $spreadsheet = IOFactory::load($...

    基于DevExpress的SpreadsheetControl实现对Excel的打开、预览、保存、另存为、打印示例代码下载.zip

    在本示例中,我们关注的是其SpreadsheetControl,这是一个用于创建电子表格应用的强大工具,能够处理Excel文件并模拟Excel的功能。以下是基于DevExpress的SpreadsheetControl实现对Excel操作的关键知识点: 1. **...

    ThinkPHP5.1 框架下 PhpSpreadsheet 操作 Excel 表的导入导出.rar

    PhpSpreadsheet是一个用于读写各种电子表格文件的PHP库,包括Microsoft Excel的XLSX、XLS以及OpenDocument的ODS格式等。它取代了老版本的PHPExcel库,提供了更好的性能和更多的特性。使用PhpSpreadsheet,开发者可以...

    spreadsheet

    标题中的"spreadsheet"指的是电子表格,这是一种组织和分析数据的强大工具,广泛应用于会计、数据分析、项目管理等领域。在IT行业中,最知名的电子表格软件包括Microsoft Excel、Google Sheets和Apple Numbers。这些...

    java 版电子表格雏形源代码

    这个"java 版电子表格雏形源代码"项目就是一个尝试,虽然它可能只实现了基本的界面表格功能,但对于学习和理解如何在Java中构建此类应用程序来说,仍具有一定的参考价值。 首先,让我们来了解一些核心概念: 1. **...

    x-spreadsheet.zip

    本文将深入探讨一款名为“x-spreadsheet”的前端库,它为开发者提供了在Web环境中创建、编辑和操作Excel表格的强大能力。 “x-spreadsheet”是一款轻量级的前端组件,专为Web Excel需求设计。它具有良好的兼容性,...

    一个基于Office Web Component v11.0 Spreadsheet + AJAX 实现的程序例子

    Office Web Component v11.0 Spreadsheet 是微软在2003年推出的Web应用程序开发工具,它允许开发者在网页上嵌入电子表格功能,为用户提供类似于Microsoft Excel的在线体验。这个程序例子结合了AJAX(Asynchronous ...

    SpreadSheet:使用 WPF 用 C# 编写的类似 Excel 的电子表格

    在SpreadSheet项目中,C#被用作主要的编程语言,用于实现电子表格的逻辑功能,如数据计算、函数支持、用户交互等。 3. **电子表格功能**: - **基本评估**: 这可能指的是基础的单元格计算功能,比如加减乘除,以及...

    flex 电子表格 源码

    本文将以“flex 电子表格 源码”为主题,详细解析其核心功能与实现机制,并通过分析提供的"demo"和"SpreadSheet"两个文件,探讨其实际应用。 首先,我们来看Flex电子表格组件的基本结构。它通常由一系列可编辑的...

    phpSpreadsheet.zip

    这个库允许开发者轻松地创建、修改和操作电子表格数据,广泛应用于数据处理、报表生成和数据分析场景。 **1. 导入Excel文件** 在PHP中,使用PHPSpreadsheet库导入Excel文件主要涉及以下步骤: - 首先,你需要通过...

    SpreadSheet

    在这种情况下,"SpreadSheet"通常指的是一个自定义的库或者组件,用于帮助开发者在VC++程序中控制和操作Excel电子表格。下面将详细解释`SpreadSheet.cpp`和`SpreadSheet.h`这两个关键文件以及如何在VC++中操作Excel...

    owc11 Spreadsheet 详细使用

    综上所述,OWC11 Spreadsheet 是一个功能强大的在线电子表格工具,不仅适合日常的数据处理,也适用于团队协作和项目管理。通过熟练掌握上述功能,用户可以有效提升数据处理和分析的能力。在实际操作中,不断探索和...

    Qt中spreadsheet练习程序,可在Qt5.4中顺利运行

    在“Qt中spreadsheet练习程序”这个项目中,我们主要关注的是使用Qt库实现类似电子表格的功能。 首先,Qt提供了QTableWidget组件,它是构建电子表格的基础。QTableWidget允许我们在窗口中创建二维表格,包含行和列...

    PhpSpreadsheet-master.zip

    - **创建电子表格**:首先创建一个Spreadsheet对象,然后通过`getActiveSheet()`获取当前工作表,再通过`setCellValue()`设置单元格内容。 - **读取电子表格**:使用对应格式的Reader类,如`\PhpOffice\...

Global site tag (gtag.js) - Google Analytics