分表数据的页面显示跟后台传递（简单实现）_.NET相关

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

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

弊端：

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

需要通过传统的方式，在后台组织数据之后再传递到前台展示。（期待各位大神给出宝贵意见和建议）

2楼海上将军: 刚想说分页呢？结果被撸主自己说了

1楼Red Cat: 膜拜的无敌头地！