在Web界面中实现Excel数据大量导入的处理方式

 在早期Bootstrap框架介绍中,我的随笔《

上传文件后,数据直接展示在弹出层的列表里面,这里直接使用了 Bootstrap-table表格插件进行展示。

这样我们就可以把Excel的记录展示出来,实现了预览的功能,勾选必要的记录,然后保存即可提交到服务器进行保存,实现了Excel数据的真正导入数据库处理。

实际的代码就比较多一点点,详细可以参考下随笔《

        //保存导入的数据        function SaveImport() {                          var list = [];//构造集合对象            var rows = $import.bootstrapTable('getSelections');             for (var i = 0; i < rows.length; i++) {                 list.push({                     'Name': rows[i].Name, 'Mobile': rows[i].Mobile, 'Email': rows[i].Email, 'Homepage': rows[i].Homepage,                     'Hobby': rows[i].Hobby, 'Gender': rows[i].Gender, 'Age': rows[i].Age, 'BirthDate': rows[i].BirthDate,                     'Height': rows[i].Height, 'Note': rows[i].Note                 });             }              if (list.length == 0) {                 showToast("请选择一条记录", "warning");                 return;             }              var postData = { 'list': list };//可以增加其他参数,如{ 'list': list, 'Rucanghao': $("#Rucanghao").val() };            postData = JSON.stringify(postData);              $.ajax({                 url: '/TestUser/SaveExcelData',                 type: 'post',                 dataType: 'json',                 contentType: 'application/json;charset=utf-8',                 traditional: true,                 success: function (data) {                     if (data.Success) {                         //保存成功  1.关闭弹出层,2.清空记录显示 3.刷新主列表                        showToast("保存成功");                          $("#import").modal("hide");                         $(bodyTag).html("");                         Refresh();                     }                     else {                         showToast("保存失败:" + data.ErrorMessage, "error");                     }                 },                 data: postData             });         }
复制代码

在实际使用过程中,发现数据几百条的时候,页面就罢工了,不能正常插入,搜索下解决问题说是大小受限的问题,但是我在Web.Config里面也设置了上传文件的大小,最终没有找到配置解决思路。

复制代码
<httpRuntime executionTimeout="600" maxRequestLength="951200"     useFullyQualifiedRedirectUrl="true" minFreeThreads="8"     minLocalRequestFreeThreads="4" appRequestQueueLimit="100"  enableVersionHeader="true"/> 
复制代码

最终这个配置项也无法解决,那么我们只能找其他方式来避免数据大量提交了。

 

2、使用在控制器后台读取Excel文件导入数据库

以上的数据导入方式,在一般数据比较少的时候,体验还是不错的,不过它的过程也是先上传Excel文件,然后读取Excel里面的记录,转换为对应的List<T>类型,在序列号JSON列表在前端界面展示。

既然我们文件在服务器上,并且也可以通过把Excel文件转换为对应的List<T>,那么我们减少用户勾选的步骤,确认后直接读取导入即可,这样处理应该就没有这样的受限于页面数据大小的问题的。

这样我们以设备信息导入为案例,介绍这个处理过程,如下前端代码是在文件上传到服务器后,用户确认后负责导入的逻辑的。

复制代码
             //保存导入的数据        function SaveImport() {             var postData = { 'guid': importGuid };             postData = JSON.stringify(postData);              $.ajax({                 url: '/Device/SaveExcelByGuid',                 type: 'post',                 dataType: 'json',                 contentType: 'application/json;charset=utf-8',                 traditional: true,                 success: function (data) {                     if (data.Success) {                         Refresh();                         //保存成功  1.关闭弹出层,2.清空记录显示 3.刷新主列表                 
                    
50000+
5万行代码练就真实本领
17年
创办于2008年老牌培训机构
1000+
合作企业
98%
就业率

联系我们

电话咨询

0532-85025005

扫码添加微信