浏览 7307 次
|
锁定老帖子 主题：在线电子表格spreadsheet操作实现
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
|
|
|---|---|
| 作者 | 正文 |
|
发表时间：2008-12-15
最后修改：2008-12-15
最近公司的业务需要在浏览器中使用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"
主要用就是用来加载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文档
注意：以上内容只是自己研究的一点内容，不正确的，请大家指定。
声明：ITeye文章版权属于作者，受法律保护。没有作者书面许可不得转载。
推荐链接
|
| 返回顶楼 | |
|
发表时间：2009-03-18
能不能把 json.js 这个文件也帖出来
|
| 返回顶楼 | |
|
发表时间：2009-03-18
能不能把 TestAction.do 这个文件帖出来.
|
| 返回顶楼 | |
|
发表时间：2009-03-18
把服务器返回的json 格式帖出来吧
|
| 返回顶楼 | |
|
发表时间：2009-03-18
不用帖了.搞定了
|
| 返回顶楼 | |
|
发表时间：2009-03-19
我加了个spreadsheet事件的监听,不知道怎么老是监听不到呢,我是想监听删除行时
下面是代码. <script for="mySpreadsheet" event="beforedelete"> alert('beforeDelete'); </script> |
| 返回顶楼 | |
|
发表时间：2009-03-23
你查一下API,没有这个事件哦
你可以直接监听onchange事件,判断当前KEY,如果是删除键就做你自己想要做的事情 |
| 返回顶楼 | |
|
发表时间：2009-07-29
能不能把整个实例传上来？
|
| 返回顶楼 | |
