Spread控件在前后台的数据传输和格式处理

收藏

我的需求：用Spread控件在页面上向用户展示数据，同时在用户编辑之后，保存到数据库中。
      将数据从数据库中取到Spread的Excel中，已经实现。
一、将数据库的数据取到前台EXcel中，方式如下：
1.将数据从数据库中取出，并序列化。由于集合类的数据最好取个名字，所以先定义一个类：
public class WijmoJsonResult<TEntity> where TEntity : class
{
      public List<TEntity> Items { get; set; }
      public int TotalRowCount { get; set; }
}
之后在Controller中有：
      WijmoJsonResult<CardInfo> jsonResult = new WijmoJsonResult<CardInfo>
         {
            Items = cardInfos,
            TotalRowCount = cardInfos.Count()
         };
         JsonSerializerSettings settings = new JsonSerializerSettings();
         settings.ReferenceLoopHandling = ReferenceLoopHandling.Ignore;
         settings.NullValueHandling = NullValueHandling.Ignore;
         IView.jsonExcel = JsonConvert.SerializeObject(jsonResult,
         Formatting.Indented, settings);
2.在页面上将后台传来的字符串放在一个input中，否则会出现&quot这样的字符传入JQuery的解析json数据方法中：
<input type="text" id="myJsonValue" value="@Model"/>
var myJson = jQuery.parseJSON($("#myJsonValue").attr("value").toString().trim());
$.each(myJson.Items, function (index,item) {
         sheet.addSpan(1, 0, 1, 1);
         sheet.setValue(1, 0, item.Name);
         ............此处省略其他属性
      });
3.

QQ图片20140903152830.jpg (16.65 KB, 下载次数: 1235)

Alice · Alice

回复 1楼ronger的帖子

你好，问题已经收到，需要研究下才能给你回复。

Alice · Alice

回复 1楼ronger的帖子

MVCSample.zip (3.11 MB, 下载次数: 1611)

ronger · ronger

先来个笨点的方法，也可以实现的：
1.页面上按钮点击事件：
$("#ImitationConfirm").click(function () {
         //将用户输入的名片信息转成数组，然后转成json格式，最后放到CardInfosJson这个input中，数据格式如下：
         //{"name":"Sheet1","frozenRowCount":1,"data":{"dataTable":{"0":{"0":{"value":"姓名"},"1":{"value":"职位"},"2":{"value":"公司名称"},"3":{"value":"公司地址"},"4":{"value":"电话"},"5":{"value":"传真"},"6":{"value":"手机号码"},"7":{"value":"邮箱"},"8":{"value":"备注"}}}}}
         var spread1 = $("#ss").wijspread("spread");
         var sheet = spread1.getActiveSheet();
         var dirtyItems = new Array();
         for (var i = 0; i < 21; i++) {
            dirtyItems = new Array();
            for (var j = 0; j < 9; j++) {
                  dirtyItems[j] = sheet.getValue(i,j);
            }
         }
         var jsonSheet = JSON.stringify(dirtyItems);
         $("#CardInfosJson").attr("value", jsonSheet.toString());
         $("#CompleteImitationDesign").submit();
      });
2.在服务器端的Controller对应的处理方法中：
string[][] myDataTable = JsonConvert.DeserializeObject<string[][]>(CardInfosJson);
            for (int i = 1; i < myDataTable.Length; i++)
            {
                  if (myDataTable[0] != null || myDataTable[1] != null || myDataTable[2] != null ||
                     myDataTable[3] != null || myDataTable[4] != null || myDataTable[5] != null ||
                     myDataTable[6] != null || myDataTable[7] != null || myDataTable[8] != null)
                  {
                     cardInfo2 = new CardInfo
                     {
                        Name = myDataTable[0],
                        Position = myDataTable[1],
                        CompanyName = myDataTable[2],
                        CompanyAddress = myDataTable[3],
                        TelPhone = myDataTable[4],
                        Fax = myDataTable[5],
                        Phone = myDataTable[6],
                        Email = myDataTable[7],
                        Remarks = myDataTable[8],
                        Template = template
                     };
                  //存入数据库
                     unitOfWork.CardInfoRepository.Insert(cardInfo2);
                     unitOfWork.Save();
            }
   }
3.我就是通过上面的方法实现Spread Excel从客户端向数据库端传值的，由于用户输入的行数不定，所以判断空值的
任务就很大。
4.我有一个问题：就是在客户端，经过用户编辑之后，sheet对象如何取到有数据的Excel的行数和列数呢？
我看到sheet有一个方法，这个方法就是sheet.getdirtyRows(),这个名字是取到脏的行数，这个脏的，就是用户
修改过的吗？

ronger · ronger

先来个笨点的方法，也可以实现的：
1.页面上按钮点击事件：
$("#ImitationConfirm").click(function () {
         //将用户输入的名片信息转成数组，然后转成json格式，最后放到CardInfosJson这个input中，数据格式如下：
         //{"name":"Sheet1","frozenRowCount":1,"data":{"dataTable":{"0":{"0":{"value":"姓名"},"1":{"value":"职位"},"2":{"value":"公司名称"},"3":{"value":"公司地址"},"4":{"value":"电话"},"5":{"value":"传真"},"6":{"value":"手机号码"},"7":{"value":"邮箱"},"8":{"value":"备注"}}}}}
         var spread1 = $("#ss").wijspread("spread");
         var sheet = spread1.getActiveSheet();
         var dirtyItems = new Array();
         for (var i = 0; i < 21; i++) {
            dirtyItems = new Array();
            for (var j = 0; j < 9; j++) {
                  dirtyItems[j] = sheet.getValue(i,j);
            }
         }
         var jsonSheet = JSON.stringify(dirtyItems);
         $("#CardInfosJson").attr("value", jsonSheet.toString());
         $("#CompleteImitationDesign").submit();
      });
2.在服务器端的Controller对应的处理方法中：
string[][] myDataTable = JsonConvert.DeserializeObject<string[][]>(CardInfosJson);
            for (int i = 1; i < myDataTable.Length; i++)
            {
                  if (myDataTable[0] != null || myDataTable[1] != null || myDataTable[2] != null ||
                     myDataTable[3] != null || myDataTable[4] != null || myDataTable[5] != null ||
                     myDataTable[6] != null || myDataTable[7] != null || myDataTable[8] != null)
                  {
                     cardInfo2 = new CardInfo
                     {
                        Name = myDataTable[0],
                        Position = myDataTable[1],
                        CompanyName = myDataTable[2],
                        CompanyAddress = myDataTable[3],
                        TelPhone = myDataTable[4],
                        Fax = myDataTable[5],
                        Phone = myDataTable[6],
                        Email = myDataTable[7],
                        Remarks = myDataTable[8],
                        Template = template
                     };
                  //存入数据库
                     unitOfWork.CardInfoRepository.Insert(cardInfo2);
                     unitOfWork.Save();
            }
   }
3.我就是通过上面的方法实现Spread Excel从客户端向数据库端传值的，由于用户输入的行数不定，所以判断空值的
任务就很大。
4.我有一个问题：就是在客户端，经过用户编辑之后，sheet对象如何取到有数据的Excel的行数和列数呢？
我看到sheet有一个方法，这个方法就是sheet.getdirtyRows(),这个名字是取到脏的行数，这个脏的，就是用户
修改过的吗？

ronger · ronger

三楼的例子，其中创建的方法特别适用于我目前的需求。
但是我觉得其中还有一些问题：
1.在index页面上，执行了
readData(sheet, '@Url.Action("LoadAll", "Home")', function () {
         hideDelayDiv();
  });
而在readData方法中有：
      var columnInfos = [
                  { name: "FirstName", size: 100 },
                  { name: "MiddleName", size: 100 },
                  { name: "LastName", size: 100 },
                  { name: &quot

ersonType", size: 100 },
                  { name: "ModifiedDate", formatter: "mm/dd/yyyy", size: 100 },
         ];
         sheet.setDataSource(event.data);
         sheet.bindColumns(columnInfos);
   绑定的数据源对应了服务器端的json格式中的data,而columnInfos则确定了json数据中的属性名称，
也就是约定的格式。
2.点击Create按钮后，就激发了CreateData方法，由于sheet.bindColumns(columnInfos)，所以
就知道了组装json数据的格式。然后发到服务器端，从而服务器端可以以Person[]来进行接收数据。
3.我的问题来了，如果我在表格和列绑定后，还希望给列再取一个中文名字，可以吗？
因为我不想把属性名，也就是英文的名字展示给客户！

Alice · Alice

回复 6楼ronger的帖子

我看您提出了很多的问题，我想问下根据Sample，这些问题都无法解决么？
我将您的问题总结了下，一共有2个，我研究下给您回复。
1.有一个问题：就是在客户端，经过用户编辑之后，sheet对象如何取到有数据的Excel的行数和列数呢？
2.表格和列绑定后，给列取中文名字。
您看看我的理解是否有误，或是还有其他的问题需要解决。

ronger · ronger

是的，就这两个问题。
1.有一个问题：就是在客户端，经过用户编辑之后，sheet对象如何取到有数据的Excel的行数和列数呢？
2.表格和列绑定后，给列取中文名字。

ronger · ronger

对三楼的回复：
三楼：看你的代码，似乎还有其他的需求，进行了View的保存，这样会比较复杂，要设计大的构架，所以和你确定是数据的传输还是需要连同整个View都要存储？
我的需求和目的：就是实现对页面上Excel表格更加灵活的控制！
而且在开发的过程中，可以更加有利于调试！

Alice · Alice

回复 8楼ronger的帖子

针对你提出的两个问题，回答如下：
1. 我们提供了getDirtyRows()方法去获取用户编辑过的行数据，也就是脏数据。但是这个并不是基于Cell，而是基于Row的，也就是说无法定位到哪一个Cell发生改动。通常情况下，数据绑定关心的只有item，也就是一行。当前版本还没有提供getDirtyCells方法。

2.表格和列绑定后，给列取中文名字。
看附件的Sample。

spreadJs.zip (1.01 KB, 下载次数: 1214)

		自动登录	找回密码
密码			立即注册

[已处理] Spread控件在前后台的数据传输和格式处理

11 个回复

活字格认证

微信认证勋章

元老葡萄