Node.js 切近实战(九) 之Excel在线(在线编辑)

来源:互联网 发布:查询中药的软件 编辑:程序博客网 时间:2024/06/11 09:51

之前有一节我给大家讲过文件列表,如下,今天我们要讲的就是Excel在线编辑。

wKiom1eBDaehTTevAABbaWIYQuc908.png

当我们双击文件图标的时候会跳转到一个Excel修改界面,如下。

wKioL1eBD1zRubnlAACd2I5Lqco525.png

ok,这里我们使用的依然是Telerik Kendo UI中的SpreadSheet,看一下这个Spread Sheet是如何用的。

wKioL1eBFYyyABVwAACVq5H-93o890.png

我们定义一个spreadsheet的div,我们看一下这个div怎么生成sheet。

1

2

3

4

5

$("#spreadsheet").kendoSpreadsheet({

    sheets: [{

            name: "sheet1"

        }]

});

就这一句话,就生成了,但是里面有很多属性可以设置,可以查阅它的开发文档进行设置,在这里我们只设置了一个sheet。当然你也可以点击+新增更多的sheet。

wKioL1eBFm-QJqtDAABzPHC4Fso148.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

看到了吧,既然是欠账统计,那就把欠钱的人记录下来。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

看到了吧,这个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

OK,到此我们就将编辑讲的差不多了。最后提一点,就是编辑页面图中的小人旁边有个数字,显示的是实时在线编辑该文件的人数,怎么实时,通过Socket.IO.Js来实现,真正实现页面无操作刷新,具体内容请看下节。

原文转自:乐搏学院http://www.learnbo.com/front/article/cmsIndex

0 0