easy ui 复杂多表头报表设计思路

做一个报表，一次性加载所有的数据，里面的业务逻辑比较复杂，多表头，动态列，合并行，行合计，列小计（每个模块的总和），列合计

思路：

1.首先生成表头，获取表头数据

 

2. 获取板块和公司数据

3. 获取动态列数据

4. 获取动态列单项小计

5. 获取动态列合计

这样便完成了多表头，动态列，行合计

6. 合并行

7. 列小计

 使用下面方式

$('#dg').datagrid('insertRow',index{

});

思路：

这个小计是怎样算出来，会有个索引，首获取行数据com列表，列表根据板块排序，相同的行会合并，先用列表的第一条数据跟第二条数据对比，如果不是同一板块的，会插入小计，继续对比，如果第二条数据跟第三条数据不一样，再插入，计算从上一个小计索引加1开始计算，当行数等于小计索引index时候跳出循环，类推 

8. 列合计

 $('#dg').datagrid('appendRow',  jsonData);

9. 数据量大，报表无滚动条，只有页面滚动条

    首先去掉页面滚动条

<body style="overflow-y:hidden";>

  给datagrid绑定onLoadSuccess事件，当加载成功后调用datagrid的resize方法

 

$("#dg").datagrid("resize",{
    height: 16*36  // 行高*行数                         
    });

 

10. 加载数据缓慢，特别请注意

    datagrid，不能加载多次，这样会导致打开页面前端十分缓慢，我之前就是犯了这个严重的错误，for循环加载了datagrid，当数据量大的时候，每次都去加载，导致前端页面加载了两分钟才出来，另外需要删除html中的class声明(class="easyui-datagrid")。

 

例子模板

 

posted @ 2019-05-11 13:29  帅到被人打P  阅读(1057)  评论(0)    收藏  举报