基于MVC4+EasyUI的Web开发框架经验总结(10)--在Web
界⾯上实现数据的导⼊。。。
数据的导⼊导出,在很多系统⾥⾯都⽐较常见,这个导⼊导出的操作,在Winform⾥⾯⽐较容易实现,我曾经在之前的⼀篇⽂章《》介绍了在Winform⾥⾯的通⽤导⼊导出模块的设计和开发过程,但在Web上我们应该如何实现呢?本⽂主要介绍利⽤MVC4+EasyUI的特点,并结合⽂件上传控件Uploadify 的使⽤,实现⽂件上传后马上进⾏处理并显⽰,然后确认后把数据写⼊数据库的过程。
我们知道,Web上对Excel的处理和Winform的有所差异,如果是在Web上处理,我们需要把Excel⽂档上传到服务器上,然后读取⽂件进⾏显⽰,所以第⼀步是实现⽂件的上传操作,关于⽂件上传控件,具体可以参考我的⽂章《》。
1、导⼊数据的界⾯效果展⽰
在Winform⾥⾯,我们处理Excel数据导⼊的界⾯如下所⽰。
在Web上的主界⾯如下所⽰。
导⼊界⾯如下所⽰。
2、Web数据导⼊的处理逻辑和代码
为了实现Web上的数据导⼊导出操作,我们需要增加两个按钮,⼀个是导⼊按钮,⼀个是导出按钮。
<a href="javascript:void(0)" class="easyui-linkbutton" id="btnImport" iconcls="icon-excel" onclick="ShowImport()">导⼊</a>
<a href="javascript:void(0)" class="easyui-linkbutton" id="btnExport" iconcls="icon-excel" onclick="ShowExport()">导出</a>
导⼊的JS处理代码如下所⽰。
//显⽰导⼊界⾯
function ShowImport() {
$.showWindow({
title: '客户联系⼈-Excel数据导⼊',
useiframe: true,
width: 1024,
height: 700,
content: 'url:/Contact/Import',
buttons: [{
text: '取消',
iconCls: 'icon-cancel',
handler: function (win) {
win.close();
}
}]
});
}
上⾯主要就是弹出⼀个窗⼝(上⾯的导⼊数据窗⼝),⽤来⽅便客户选择Excel⽂件并保存数据或者下载导⼊模板等操作的。
然后在Import.cshtml的视图代码⾥⾯,我们需要初始化Datagrid和相关的界⾯元素,初始化DataGrid的代码如下所⽰。
//实现对DataGird控件的绑定操作
function InitGrid() {
var guid = $("#AttachGUID").val();
$('#grid').datagrid({  //定位到Table标签,Table标签的ID是grid
url: '/Contact/GetExcelData?guid=' + guid,  //指向后台的Action来获取当前⽤户的信息的Json格式的数据
title: '客户联系⼈-Excel数据导⼊',
iconCls: 'icon-view',
height: 400,
width: function () { return document.body.clientWidth * 0.9 },//⾃动宽度
..................
上⾯红⾊部分的内容,就是我们在⽂件顺利上传到服务器上的时候,根据⼀个guid的参数初始化DataGrid的列表数据。
下⾯是附件上传控件uploadify的初始化脚本代码,其中红⾊部分注意⼀下,我们需要上传的是⼀个⽂件,并且不允许多选,限定上传⽂件的类型为xls。
⽂件上传完成后,⾸先调⽤CheckExcelColumns控制器函数来检查是否匹配导⼊模板的字段,如果匹配通过,加载Excel并展⽰数据到Datagrid⾥⾯,否则提⽰⽤户按模板格式录⼊数据。
<script type="text/javascript">
$(function () {
/
/添加界⾯的附件管理
$('#file_upload').uploadify({
'swf': '/Content/JQueryTools/uploadify/uploadify.swf',  //FLash⽂件路径
'buttonText': '浏览',                                //按钮⽂本
'uploader': '/FileUpload/Upload',                      //处理ASHX页⾯
'queueID': 'fileQueue',                        //队列的ID
'queueSizeLimit': 1,                          //队列最多可上传⽂件数量,默认为999
'auto': false,                                //选择⽂件后是否⾃动上传,默认为true
'multi': false,                                //是否为多选,默认为true
'removeCompleted': true,                      //是否完成后移除序列,默认为true
'fileSizeLimit': '10MB',                      //单个⽂件⼤⼩,0为⽆限制,可接受KB,MB,GB等单位的字符串值
'fileTypeDesc': 'Excel Files',                //⽂件描述
'fileTypeExts': '*.xls',  //上传的⽂件后缀过滤器
'onQueueComplete': function (event, data) {    //所有队列完成后事件
var guid = $("#AttachGUID").val();
ViewUpFiles(guid, "div_files");
//提⽰⽤户Excel格式是否正常,如果正常加载数据
$.ajax({
url: '/Contact/CheckExcelColumns?guid=' + guid,
type: 'get',
dataType:'json',
success: function (data) {
if (data.Success) {
InitGrid(); //重新刷新表格数据
$.messager.alert("提⽰", "⽂件已上传,数据加载完毕!");
}
else {
$.messager.alert("提⽰", "上传的Excel⽂件检查不通过。请根据页⾯右上⾓的Excel模板格式进⾏数据录⼊。");
}
}
});
},
'onUploadStart': function (file) {
InitUpFile();//上传⽂件前,重置GUID,每次不同
$("#file_upload").uploadify("settings", 'formData', { 'folder': '数据导⼊⽂件', 'guid': $("#AttachGUID").val() }); //动态传参数
},
'onUploadError': function (event, queueId, fileObj, errorObj) {
//pe + ":" + errorObj.info);
}
});
});
为了有效处理数据的导⼊,我们需要严格保证导⼊的数据是和模板的字段是匹配的,否则处理容易出错,也没有任何意义。为了实现这个⽬的,框架⾥⾯提供⽅法对字段进⾏检查,主要是确保Excel⾥⾯包含了完整的字段即可。
/
//<summary>
///检查Excel⽂件的字段是否包含了必须的字段
///</summary>
///<param name="guid">附件的GUID</param>
///<returns></returns>
public ActionResult CheckExcelColumns(string guid)
{
CommonResult result = new CommonResult();
try
{
DataTable dt = ConvertExcelFileToTable(guid);
if (dt != null)
{
//检查列表是否包含必须的字段
result.Success = DataTableHelper.ContainAllColumns(dt, columnString);
}
}
catch (Exception ex)
{
jquery框架使用LogTextHelper.Error(ex);
result.ErrorMessage = ex.Message;
}
return ToJsonContent(result);
}
⽽在InitGrid的初始化中的这个GetExcelData的控制器⽅法如下所⽰。主要的逻辑就是获取到Excel,并把Excel⾥⾯的数据转换为DataTable,最后初始化为实体类列表,并返回给调⽤页⾯就可以了。
///<summary>
///获取服务器上的Excel⽂件,并把它转换为实体列表返回给客户端
///</summary>
///<param name="guid">附件的GUID</param>
///<returns></returns>
public ActionResult GetExcelData(string guid)
{
if (string.IsNullOrEmpty(guid))
{
return null;
}
List<ContactInfo> list = new List<ContactInfo>();
DataTable table = ConvertExcelFileToTable(guid);
if (table != null)
{
#region数据转换
int i = 1;
foreach (DataRow dr in table.Rows)
{
string customerName = dr["客户名称"].ToString();
if (string.IsNullOrEmpty(customerName))
{
continue;//客户名称为空,记录跳过
}
CustomerInfo customerInfo = BLLFactory<Customer>.Instance.FindByName(customerName);
if (customerInfo == null)
{
continue;//客户名称不存在,记录跳过
}
ContactInfo info = new ContactInfo();
info.Customer_ID = customerInfo.ID;//客户ID
info.HandNo = dr["编号"].ToString();
info.Name = dr["姓名"].ToString();
..............................//增加⼀个特殊字段的转义
info.Data1 = BLLFactory<Customer>.Instance.GetCustomerName(info.Customer_ID);
list.Add(info);
}
#endregion
}
var result = new { total = list.Count, rows = list };
return JsonDate(result);
}
3、Web上数据的导出操作
刚才介绍了数据的导⼊操作,数据的导出操作相对简单⼀些,它的JS函数操作如下所⽰。

版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。