当前位置: 代码迷 >> .NET相关 >> 分表数据的页面显示跟后台传递(简单实现)
  详细解决方案

分表数据的页面显示跟后台传递(简单实现)

热度:190   发布时间:2016-04-24 02:50:44.0
分表数据的页面显示和后台传递(简单实现)

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

 

弊端:

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

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

2楼海上将军
刚想说分页呢?结果被撸主自己说了
Re: 一点胖
@海上将军,本人功力有限,期待各位大神给出宝贵意见和分页方面的建议呀
1楼Red Cat
膜拜的无敌头地!
  相关解决方案