你的位置:首页 > Java教程

[Java教程]分表数据的页面显示和后台传递(简单实现)


        需求: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);        }      });    }

      后台已能够通过传入的城市名称更新全局变量,从而查询对应的城市表。

 

      每查出一个城市的数据,就将其显示到页面,并将其值加入总计并更新总计栏。

       即使某些城市查询失败,也不影响其他城市数据的显示和总计数据的统计。

       数据会很快出现并一行一行逐渐加载,页面不会空白很久才出现结果。

 

       查询结果如图所示:

 1_thumb7

 

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

 

弊端:

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

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