现在位置首页 / 产品设计 /正文

jquery 实现多个DataTable并存,并css控制排版(asp.net服务)

作者: IT小兵 | 2013年8月19日| 热度:℃ | 评论: |参与:

在做M项目的时候,涉及到移动设备的用户数据上报,针对这些数据,产品方面

提出进行一个全面的数据展示。

具体需求如下:

  1. 针对客户进行分类展示

  2. 数据需要报表和图文

  3. 可以下载和图文报表下载打印

    效果图:

    jquery multi Datatable

    经过我和产品人员进行的功能要点,主要有一下几个大的方面需要在开发中体现

1)、数据展示尽量简洁,可视化。图表、报表一致显示

2)、采用通用一些的组件。以后交付维护都比较容易

3)、由于数据较多,进行减少交互

经过对图表控件的筛选,我们最终选择了Jquery  DataTable 和图形化报表Highcharts.

图形化报表Highcharts另辟一篇再说。

这里这说多个DataTable jquery生成。

首先是ajax获取数据,这里用的是ajaxpro2.dll。方法很多,可以自行修改获取数据方法。

$(document).ready(function () {
 //从服务中获取数据,调用回调函数
    Pages_Statistics_MultiFlowStatResult.GetPositionList(ForeachShowresult);
   
});
var PositionCount = 0;
var checkCount = 0;
var isOnlyOneREsult = 0; //用来判断是不是只有一个结果。是的话,就放大
function ForeachShowresult(res) {
    var list = res.value;
    if (list == null) { return; }
    PositionCount = list.length;
    checkCount = 0;
    var strHTML = "";
    var heisght = document.documentElement.clientHeight;
    var widthAll = document.documentElement.clientWidth;
    var onewidth = widthAll / 2 - 50;
    heisght = 380;//根据屏幕的分别率,获取高度宽度
//循环数据,根据数据创建空的表格。
    $.each(list, function (index, callback) {
        id = list[index];
        strHTML = "";
        strHTML += " <div class=\"l_chart\" id=\"divChar" + id + "\">";
        strHTML += '<h3><div  ><a style="cursor:hand;text-decoration:underline;color:#1071a5;"   id="positionname' + id + '" onclick=\"PopWindowsOnePositionFlow(\'' + id + '\');\"></a></div><input name="" type="button" onclick="PopWindowsOnePositionFlow(\'' + id + '\');\" value="详细" />';
        strHTML += '<input name="" style="top:2px;right:85px" onclick=\"PopWindowsOnePositionFlow(\'' + id + '\');\" type="button" value="详情" /><input name="" type="button" onclick="ShowTables(1);" value="列表模式" /></h3>';
        strHTML += ' <div class="l_c" >  <div class="divchart" id="container' + id + '" style="width:' + onewidth + 'px;margin: 0 auto; height:' + heisght + 'px;  color:#f00"></div>  </div> </div>';
        var popMain = document.createElement("DIV");
        popMain.id = "popMain" + id;
        popMain.innerHTML = strHTML;
        document.getElementById("AllContainer").appendChild(popMain);
        LoadData(id);
    });
    list = null;
}

然后,每个表格的数据,再调用ajax方法,进行填充。这样数据可以部分部分的展示,不影响用户查看。

function LoadData(id) {
    $("#container" + id).html("正在加载数据,请稍等....");
    Pages_Statistics_MultiFlowStatResult.GetData(id, LoadTableData);
}
///加载数据到列表中
function LoadTableData(stat) {
    if (stat.DataTableData.Data == "") {
        return;
    }
    var data = eval(stat.DataTableData.Data);
    if (data.length == 0) {
        return "";
    }
    //加载报表的数据
    var id = stat.PostionID;
    var strHTML = "";
    strHTML += " <div class=\"l_chart_list\" id=\"divTabledata" + id + "\">";
    strHTML += '<h3><div><a style="cursor:hand;text-decoration:underline;color:#1071a5;"  id="Tablepositionname' + id + '" onclick=\"PopWindowsOnePositionFlow(\'' + id + '\');\"></a></div>';
    strHTML += ' <input name="" style="top:2px;right:78px" onclick=\"PopWindowsOnePositionFlow(\'' + id + '\');\" type="button" value="详情" />';
    strHTML += ' <input name="" style="top:2px" onclick="ShowTables(0);" type="button" value="图形模式" />';
    if(stat.StaticType==3)
    {
    }
    else{
    strHTML += ' <input name="" style="top:2px;right:148px" onclick="ExportExcel(\'' + id + '\',' + stat.StaticType + ');" type="button" value="导出" />';
    }
    strHTML += ' </h3> <div class="l_c" style="margin-top:10px">';
    strHTML += '<table style="top:10px;height:100%" border="0" class="display" cellspacing="0"   id="Tablecontainer' + id + '" cellpadding="0">';
    strHTML += '<thead class="nndtrzadi"><tr class="nndtrzadi">';
  
    if (stat.StaticType == 3) {//这是周的话,就横着显示了。。。。。
    }
    else {
        strHTML += '<th class="thSetClcik"  align="center">' + stat.XAxis.Unit + '</th >';
       
    }
    $.each(stat.DataTableData.Times, function (index, callback) {
        var oneday = stat.DataTableData.Times[index];
        if(stat.StaticType == 3 && index==0) 
        {
          strHTML += '<th  class="thSetClcik" style="width:180px" align="center">' + oneday + '</th>';
        }
        else
        {
          strHTML += '<th  style="width:180px" align="center">' + oneday + '</th>';
        }      
         
    }); 
    strHTML += '</tr> </thead> <tbody>  </tbody>   ';
    strHTML += '</table>'; 
    strHTML += '</div> </div>';
    var popMaintable = document.createElement("DIV");
    popMaintable.id = "TablepopMain" + id;  
    popMaintable.innerHTML = strHTML;
    document.getElementById("DivTableList").appendChild(popMaintable);
    $("#Tablepositionname" + stat.PostionID).html(stat.PositionName);
    if (oTable != null) { oTable.fnDestroy(); };
    var j = 1;
    var oTable;
    oTable = $("#Tablecontainer" + stat.PostionID + "").dataTable({
        "aaData": data,
        "sScrollY": "100%", "sScrollX": "100%" ,
       
        "bFilter": false, "bProcessing": true,
        "bPaginate": false, "bScrollInfinite": false,
        "bInfo": false,
        "fnRowCallback": function (nRow, aData, iDisplayIndex) {
            var rowcount = nRow.children.length;
            for (var i = 1; i < rowcount; i++) {
                $('td:eq(' + i + ')', nRow).html($('td:eq(' + i + ')', nRow).html());
            } 
            return nRow;
        }
    });
    data = null;
    oTable = null;
}

CSS样式

/* CSS Document */
*{ margin:0; padding:0}
img{ font-size:0; display:inline-block}
a{ text-decoration: none}
a img{ border:none}
li{ list-style-type:none}
input{ border:none}
.clear{ clear:both}
body{ font-size:12px; font-family:"Arial, Helvetica, sans-serif"; background-color:#fff;text-align:left;}
.fl,.l_chart,.l_chart,.l_chart_list{ float:left;}
.fr,.l_chart h3 input,.l_chart_list h3 input,.l_statistics_dot h3 span{ float:right}
.statistics_top{ border:1px solid #cecfce; background-color:#f6f6f6; overflow:hidden;text-align:left;  line-height:38px; padding-left:15px}
.l_change input{ background:url(../images/MutiStatic/input_bg.jpg) no-repeat; width:72px; height:24px; line-height:24px; margin:0px 5px 0 0}
.l_chart{ border:1px solid #dedbe1; margin-top:10px;width:49%; margin-right:5px; padding-bottom:10px;}
.l_chart h3{  text-align:left;border:1px solid #fff; background-color:#f1f1f1; color:#1071a5; height:31px; line-height:31px; text-indent:13px; margin-bottom:10px; position:relative; border-bottom:1px solid #cecfce}
.l_chart h3 input{ color:#00357e; background:url(../images/MutiStatic/input2_bg.jpg) no-repeat; width:66px; height:24px; line-height:24px;top:2px; right:10px; position: absolute}
.l_c{ margin:0 auto; text-align:center; padding:0 10px}
.sb_buttom{ background:url(../images/MutiStatic/sb_buttom_bg.png) repeat-x; border-top:1px solid #d6d6d6; height:32px; line-height:32px; margin-top:10px}
.new_paging2{ text-align:center; color:#1071a5; font-size:14px; font-weight:bold; background:url(../images/MutiStatic/sb_net.jpg) left top no-repeat; text-indent:30px; width:100px; margin: 0 auto}
.new_paging2 a{color:#1071a5;}
.l_chart_list{ border:1px solid #dedbe1; margin-top:10px;width:45%; margin-right:10px;}
.l_chart_list h3{ border:1px solid #fff;  background-color:#f1f1f1; color:#1071a5; height:31px; line-height:31px; text-indent:13px;position:relative; border-bottom:1px solid #cecfce}
.l_chart_list h3 input{ color:#00357e; background:url(../images/MutiStatic/input2_bg.jpg) no-repeat; width:66px; height:24px; line-height:24px;top:5px; right:10px; position:absolute}
.l_c{ line-height:28px;}
.l_c table{ background: url(../images/MutiStatic/l_list_top.jpg) repeat-x; text-indent:5px}
.l_c table td{ border:1px solid #d6d3d6; border-width:0 1px 1px 0}
.l_statistics_dot{ background:url(../images/MutiStatic/sb_buttom_bg.png) repeat-x; border:1px solid #dedbde;}
.l_statistics_dot h3{ color:#1071a5; height:33px; line-height:33px; text-indent:14px}
.l_statistics_dot h3 span{ margin-top:5px; margin-right:10px}
.l_statistics_dot_bt{ color:#1071a5; text-align:center; background-color:#f1f1f1; border:1px solid #fff; height:30px; line-height:30px; font-size:14px; font-weight:bold; margin-top:10px}
.statistics_dot_c{ text-align:center; margin:0 auto}
.l_statistics_dot_more{ margin-top:10px; border:1px solid #2b92d4; background:url(../images/MutiStatic/h4_t.jpg) repeat-x #eff9ff; padding-bottom:10px; position:relative}
.l_statistics_dot_more h3{ color:#fff; height:33px; line-height:33px; text-indent:14px; margin-bottom:10px}
.dot_more_top{ position:absolute; top:-91px; left:240px}


点击阅读本文所属分类的更多文章: 产品设计 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询