Web自定义报表前后端代码-使用dataTable插件实现自定义报表统计

自定义报表查询

所谓的自定义报表，即提供与功能相关的所有字段全部列出，让用户根据以实际工作需求获取适当的字段信息，达到简化用户工作的效果。

经多家客户提供的报表需求来看，可分为“汇总统计”和“明细统计”两种，然后再由指定字段排序。

汇总统计：可按字段进行数量的汇总或金额的汇总。
明细统计：即将所有信息数据全部展现。
指定排序：用户可自定义指定字段，指定排序方式进行展现。

目前初步已完成的工作开发方案：

前端处理方式：

• **自定义查询条件：**将相关的查询字段列出，供用户选择查询。
• **自定义返回字段：**使用复选框供用户选择。
  html页面渲染处理方式

<div class="col-sm-12">
	<div class="checkbox checkbox-info checkbox-inline">
		<input id="custom-column-companyproductid" class="custom-column-checkbox" type="checkbox" value="companyproductid">
		<label for="custom-column-companyproductid">耗材唯一码</label>
	</div>
</div>
<div class="col-sm-12">
	<div class="checkbox checkbox-info checkbox-inline">
		<input id="custom-column-uniquecode" class="custom-column-checkbox" type="checkbox" value="uniquecode">
		<label for="custom-column-uniquecode">产品唯一码</label>
	</div>
</div>
<div class="col-sm-12">
	<div class="checkbox checkbox-info checkbox-inline">
		<input id="custom-column-productname" class="custom-column-checkbox" type="checkbox" value="productname">
		<label for="custom-column-productname">耗材名称</label>
	</div>
</div>

JQUERY代码加载查询条件方式

var queryBean=new Object();//查询Bean
//获取查询条件
$("#custom-query-condition-accordion .custom-query-attribute").each(function(){
   
	var $Node=$(this);
	var attribute=$Node.attr("attribute");//属性名称【字段名称】
	var value=$Node.val();//属性值
	queryBean[attribute]=value;
});
//特殊字段需要另外编写
queryBean.productname=$(".custom-productname").find("option:selected").attr("productname");//耗材名称
queryBean.productnorms=$(".custom-productnorms").find("option:selected").attr("productnorms");//耗材规格
queryBean.productstyles=$(".custom-productstyles").find("option:selected").attr("productstyles");//耗材型号

JQUERY代码加载用户所选的要显示的字段信息

//获取自定义显示字段
var showColumnBean=new Object();//显示字段Bean
var columnTextBean=new Object();//字段中文注释Bean
//查询条件数量
var resultCheckCounts=$("#custom-result-condition-collapseOne").find(".custom-column-checkbox:checked").length;
$("#custom-result-condition-collapseOne .custom-column-checkbox").each(function(){
   
	var $checkbox=$(this);
	var attribute=$checkbox.val();//属性名称【字段名称】
	var text=$.trim($checkbox.next().html());//表头
	if(resultCheckCounts<=0)
	{
   
		showColumnBean[attribute]=true;//默认显示所有
	}
	else
	{
   
		var checked=$checkbox.is(":checked");//是否需要显示
		showColumnBean[attribute]=checked;//是否显示
	}
	columnTextBean[attribute]=text;//中文信息
});

JQUERY动态表格初始化处理方式:

function initialMappingCityformProductTable(aoColumns)
{
   
	$('#city_platform_maping_product').DataTable({
   
		"oLanguage": {
   
			"sLengthMenu": "每页显示 _MENU_条",
			"sZeroRecords": "没有找到符合条件的数据",
			"sProcessing": "<img src=’./loading.gif’ />",
			"sInfo": "当前第 _START_ - _END_ 条　共计 _TOTAL_ 条",
			"sInfoEmpty": "没有记录",
			"sInfoFiltered": "(从 _MAX_ 条记录中过滤)",
			"sSearch": "搜索：", 
			"sCopy": "复制",
			"oPaginate": {
   
				"sFirst": "首页",
				"sPrevious": "前一页",
				"sNext": "后一页",
				"sLast": "尾页"
			}
		},