之前有一节我给大家讲过文件列表,如下,今天我们要讲的就是Excel在线编辑。
![wKiom1eBDaehTTevAABbaWIYQuc908.png](https://i-blog.csdnimg.cn/blog_migrate/e7fc17eea1689b3b097697e0fec8dd3a.png)
当我们双击文件图标的时候会跳转到一个Excel修改界面,如下。
![wKioL1eBD1zRubnlAACd2I5Lqco525.png](https://i-blog.csdnimg.cn/blog_migrate/d23dcf0e41be30f4f4984be7bda8fd81.png)
ok,这里我们使用的依然是Telerik Kendo UI中的SpreadSheet,看一下这个Spread Sheet是如何用的。
![wKioL1eBFYyyABVwAACVq5H-93o890.png](https://i-blog.csdnimg.cn/blog_migrate/a7f1cc86ec00e2d9c6c3ab0f06114234.png)
我们定义一个spreadsheet的div,我们看一下这个div怎么生成sheet。
1 2 3 4 5 | $( "#spreadsheet" ).kendoSpreadsheet({ sheets: [{ name: "sheet1" }] }); |
就这一句话,就生成了,但是里面有很多属性可以设置,可以查阅它的开发文档进行设置,在这里我们只设置了一个sheet。当然你也可以点击+新增更多的sheet。
![wKioL1eBFm-QJqtDAABzPHC4Fso148.png](https://i-blog.csdnimg.cn/blog_migrate/a0f2ccbc9309fb20ca2d7a47a33b7f8d.png)
这都是可以的,接下来我们来看一下跳转过来的代码。跳转到该页面,我们要显示文件的名称。
1 2 3 4 5 6 7 | var fileId = getQueryString( 'file_id' ); if (fileId) { sessionStorage.setItem( 'File_ID' , fileId); } else { sessionStorage.removeItem( 'File_ID' ); } |
首先我们要把文件id存储到本地sessionStorage中,接着我们需要去请求API拿到文件名和Excel数据,这里Excel数据其实是个json格式的数据。
1 2 3 4 5 6 7 8 9 | function getFileContentById(id) { socket.emit( "useredit" , { FileId: id, UserID: userObj.UserID }); $.get( '/file/content/' + id, function (result) { $( "#current_fileName" ).text(result.fullname); if (result && result.content) { $( "#spreadsheet" ).data( "kendoSpreadsheet" ).fromJSON(JSON.parse(result.content)); } }) } |
我们来看一下后台的api是怎么写的。
1 2 3 4 5 6 | router.get( '/file/content/:id' , fileRoutes.getFileContent) exports.getFileContent = function (req, res) { fileModel.findById(req.params.id).select( 'name content' ).exec( function (error, doc) { res.json(doc); }); } |
在这里我们直接根据id查询文件,注意这里的select,是对返回的列进行过滤,我们只需要name文件名和文件内容content。一会我们save成功一条数据后,给大家看看数据是什么格式的。
接下来我们编辑一个Excel,然后保存。
![wKioL1eBG2XjX-qnAABrjEHlJO8603.png](https://i-blog.csdnimg.cn/blog_migrate/6b6fc9c9062bd7e38afcca3fe2b5a5ab.png)
看到了吧,既然是欠账统计,那就把欠钱的人记录下来。OK,我们点击Save,保存数据。
1 2 3 4 5 6 7 8 9 10 11 12 | $( "#btn_Save" ).click( function () { var id = sessionStorage.getItem( 'File_ID' ); var content = $( "#spreadsheet" ).data( "kendoSpreadsheet" ).toJSON(); $.post( '/file/content' , { postData: JSON.stringify({ id: id, content: content, user: userObj }) }, function (result) { if (result.isSuc) { showMsg( 'success' , 'Saved Successfully!' ); } else { showMsg( 'error' , result.msg); } }); }); |
其实KendoSpreadSheet它提供了很简单的方法去拿到sheet中的json数据。我们只需要toJson和fromJson,便可以很轻松的实现展示数据和获取数据。接下来我们看一下后台的存储。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | router.post( '/file/content' , fileRoutes.saveFileContent) exports.saveFileContent = function (req, res) { var data = JSON.parse(req.body.postData); var fileId = data.id; var fileContent = data.content; fileModel.findByIdAndUpdate(fileId, { $set: { content: JSON.stringify(fileContent), lasteditdate: Date.now(), lastedituserid: data.user.UserID, lastedituser: data.user.FullName } }, function (error, result) { if (error) { res.json({ isSuc: false , msg: error.message }); return ; } res.json({ isSuc: true }); }); } |
很简单使用findByIdAndUpdate去修改数据,在存储的时候将fileContent序列化成json字符串。OK,我们这个时候用roboMongo查看一下数据。
![wKiom1eBHYmyk-wuAAFJ2vJ9LTY720.png](https://i-blog.csdnimg.cn/blog_migrate/d53c0faff17ed8005dabc466d3de917b.png)
看到了吧,这个content包含了所有界面上编辑的内容,包括当前活动的sheet是哪一个,多少个sheet,然后是每一行每一列的样式,内容等。它还能记录下来上次光标所在单元格的位置,还算人性化。最后需要强调的是如果Json数据过大,会导致Node.js后台抛出错误,不能保存,所以我们需要在app.js中设置最大可以保存的字节数。
1 2 | app.use(bodyParser.json({ limit: '5mb' })); app.use(bodyParser.urlencoded({ limit: '5mb' , extended: true })); |
最后这个Spread Sheet也是提供导出功能的。
![wKioL1eB9S2w1rvlAABhW_Jkxl4751.png](https://i-blog.csdnimg.cn/blog_migrate/9210b5c9508a02923efd39f5ca0fc415.png)
OK,到此我们就将编辑讲的差不多了。最后提一点,就是编辑页面图中的小人旁边有个数字,显示的是实时在线编辑该文件的人数,怎么实时,通过Socket.IO.Js来实现,真正实现页面无操作刷新,具体内容请看下节。
原文转自:乐搏学院http://www.learnbo.com/front/article/cmsIndex