分表数据的页面显示和后台传递（简单实现）

需求：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的导出，这里就不详细介绍了。

弊端：

当显示的数据需要分页时，这种实现方式就不太好处理了。

需要通过传统的方式，在后台组织数据之后再传递到前台展示。