标签：
需求：1.统计每个城市的某两项数据在一段时间内的总量，展示在页面上。2.将结果导出Excel文件。
目前数据库是分库分表设计，分为南北方双库，一个城市对应一张表。
从查询的效率和用户的感觉考虑，这时将所有数据查出后再显示到页面并不是最好的方式，而且代码也会变得较为复杂。
实现方式（偏前端）：
1.获取数据并显示
页面使用表格方式显示数据
<table> <thead> <tr> <th>城市</th> <th>A</th> <th>B</th> </tr> </thead> <tbody id="tbody"></tbody> </table>
为减小数据库的压力，使用异步的方式查询数据,每隔100ms查询一个城市的数据，各查询之间相对独立。
查询数据的脚本如下：
//查询数据 var GetData = function () { $("#tbody").empty(); $("#tbody").append(‘<tr><td>总计</td><td id="sumA">0</td><td id="sumB">0</td></tr>‘); if (0 == $("#StartTime").val() || 0 == $("#EndTime").val()) { alert("请选择起止时间!"); return; } var cityString="北京,大连,郑州,天津,济南,上海,广州"; for (var c in cityString) { if (cityString[c] != "") { setTimeout("GetDataByCity(‘"+cityString[c]+"‘)", 100 * c); } } }
GetDataByCity为查询单城市数据的函数，其代码如下：
var GetDataByCity = function (city) { $.ajax({ url: ‘xxxxxx‘, type: "get", data: { starttime: $("#StartTime").val(), endtime: $("#EndTime").val(), City: escape(city) }, success: function (data) { $("#tbody").append("<tr><td>" + data.City + "</td><td>" + data.A + "</td><td>" + data.B + "</td></tr>"); $("#sumA").html(parseInt($("#sumA").html()) + parseInt(data.A)); //查出数据后将其值加到总计栏 $("#sumB").html(parseInt($("#sumB").html()) + parseInt(data.B)); }, error: function () { alert(result.statusText); } }); }
每查出一个城市的数据，就将其显示到页面，并将其值加入总计并更新总计栏。
即使某些城市查询失败，也不影响其他城市数据的显示和总计数据的统计。
数据会很快出现并一行一行逐渐加载，页面不会空白很久才出现结果。
查询结果如图所示：
2.将数据传递到后台
为实现将数据导出Excel文件，最重要的一步是将数据传递至后台。在这里，我们后台使用ASP.NET MVC框架和C#语言。
首先需要定义接收数据的类型：
public class DataDTO { public string City { get; set; } public string A { get; set; } public string B { get; set; } }
DataDTO的三个字段分别对应页面的三列数据。
下面使用脚本遍历读取页面table里的值，并转换成json字符串传递至后台，代码如下：
var datalist = []; $("#tbody>tr").each(function () { var data = {}; data.City = $(this).children("td").eq(0).html(); data.A= $(this).children("td").eq(1).html(); data.B= $(this).children("td").eq(2).html(); datalist.push(data); }) result = JSON.stringify(datalist); //将数组转换成json串 url = ‘xxxxxx‘; url += "?result=" + escape(result); window.open(url);
后台接收到json字符串之后，可以将其转化成List<DataDTO>类型。在这里，我们用的是开源类库Newtonsoft.Json：
List<DataDTO> dataList = Newtonsoft.Json.JsonConvert.DeserializeObject<List<DataDTO>>(result);
将数据从前端传递到后台之后，再对其做各种操作就比较方便了，比如可以使用NPOI完成Excel的导出，这里就不详细介绍了。
弊端：
当显示的数据需要分页时，这种实现方式就不太好处理了。
需要通过传统的方式，在后台组织数据之后再传递到前台展示。
标签：
原文地址：http://www.cnblogs.com/yidianpang/p/4546847.html
