爲什麼要開發一個報表管理系統:
- 用戶報表可能很多,需要統一管理。
- 很多報表的查詢條件中的查詢條件組成項是一樣的,沒必要每個查詢都寫雷同的代碼。
- 希望能動態設置查詢條件
設計思路:
1、查詢條件元素進行元數據管理
2、報表查詢條件元數據管理
3、動態拼接查詢條件區域
4、我們報表部分集成birt,因此還需要集成調用birt報表的url字符串。
我們向birt報表服務傳遞 哪些內容:
客戶端類型 clientType: 0表示c#端調用,1表示web調用;
單位類型:agetype(這個名字起得有點無語?) 0 是財政單位?1 是執收單位,這是爲了控制查詢數據範圍。
查詢類型:querytype:0是普通單位、1 是大廳單位 ;2是上級單位,這是爲了控制查詢方式,其實也是爲了控制查詢範圍。
統計類型 tongjitype:
數據顯示範圍交給birt報表服務本身去控制吧。
拼接birt參數的時候,得根據相關業務條件去拼接。
動態報表有2部分動態內容構成:
- 一個是動態構建查詢條件
- 一個是動態構建報表
先上報表管理界面:
報表查詢條件(參數)可配置:
報表查詢參數可配置的:
如下圖:
(查詢條件/參數是動態配置)
- 預定義參數類型:我們先在數據庫當中預定義參數類型,後期有時間,改爲界面可操作。
2、參數管理:
3、特定報表綁定指定的參數
實現思路及代碼:
1、參數、及報表參數(對參數的的引用)存放在數據庫當中。
2、查詢報表的時候,根據數據庫當中參數,動態生成顯示界面查詢條件區域。
$.ajax({
url : url, //查詢所有參數
async : false,
type : "GET",
success : function(data) {
console.log("*************************************************************");
console.log(data);
var object = jQuery.parseJSON(data);
var sty = object.sty;
var params = object.params; //報表參數集合
var ars = object.columnpara;
if(ars!=undefined && ars!=""){
serArr2Local(ars);
}
//添加table
var row = sty.row_num,
column = sty.columnNum,
html = "";
if(row!=0&&column!=0){
//加載
html += "<table style='width:95%;'>";
for(var i=0;i<row;i++){
html += "<tr style='heigth: 140px'>";
for(var j=0;j<column;j++){
html+= "<td id='td_"+i+"_"+j+"' nowrap></td>";
}
html += "</tr>";
}
html += "</table>";
}
$("#search_div").html(html);
paraIndex = sty.date2cell;
$.each(paraIndex, function(idx, obj){
if(obj.width!="")
$("#td_"+obj.row+"_"+obj.column).attr("width",obj.width+"px");
if(obj.para==null){
$("#td_"+obj.row+"_"+obj.column).remove();
}else{
//合併的單元格
if(obj.colspan!=null){
$("#td_"+obj.row+"_"+obj.column).attr("colspan",obj.colspan);
}
if(obj.rowspan!=null){
$("#td_"+obj.row+"_"+obj.column).attr("rowspan",obj.rowspan);
}
}
});
$.each(params, function(idx, obj) {
var item = new Object();
item.name = obj.name;
item.type = obj.type;
item.event = obj.event;
item.disname=obj.displayname;
item.ismust=obj.ismust;
item.id=obj.id;
if(clientType==1&&obj.displayname=="主管部門"){
//單位端不需要主管部門篩選條件
//NODE.params.splice(item);
return true;
}
else if (obj.type == 'tree') {
createTree(obj);
} else if(obj.type=='radiotree'){
if(clientType==1){ //單位端
if(NODE.link=="nontaxComplete.rptdesign"){
obj.displayname="收費類別";
}
console.log("-----------------------------------");
console.log(obj);
console.log("==================================");
createRadioTree_unit(obj);
}else{
createRadioTree(obj);
}
//var dataSet = updateData(obj.data);
mapData.put(obj.name, obj.data);
} else if (obj.type == 'select') {
if(clientType==1&&obj.displayname=="統計類型"){
obj.data.splice(6,1);
}
if(clientType==1&&NODE.link=="nontaxComplete.rptdesign"){
obj.data.splice(3,2);
obj.data.splice(0,1);
}
createSelect(obj);
} else if (obj.type == 'checkbox') {
createCheckbox(obj);
} else if (obj.type == 'radio') {
createReadio(obj);
} else if (obj.type == 'text') {
createText(obj);
} else if (obj.type == 'date') {
createDate(obj);
} else if (obj.type == 'number') {
createNumber(obj);
} else if (obj.type == 'layer'){
creatLayer(obj);
mapData.put(obj.name, obj.data);
} else if(obj.type == 'dateRange'){
createDateRange(obj);
}else if(obj.type == 'date_YM'){
createDate_YM(obj);
}else if(obj.type == 'date_YYYYMMDD'){
createDate_YYYYMMDD(obj);
}
NODE.params.push(item);
});
//需要初始隱藏的參數
if($("#agetype")){
$('#agebegin_div').hide();
$('#ageend_div').hide();
}
if($("#frequency")){
$('#frequencybegin_div').hide();
$('#frequencyend_div').hide();
}
var html = "";
if(params.length>0){
//alert(isWeb);
if(isWeb=='1'){
html= "<div><input type='button' id='btnSearch' value='查找' class='btn' onclick='search()'></div><div><input type='button' class='btn' id='Export' value='導出' onclick='Export()'></div><div><input type='button' class='btn' id='Print' value='打印' onclick='Print()'></div><div><input type='button' class='btn' id='Reset' value='重置' onclick='Reset()'></div>";
}else{
//html= "<div><input type='button' id='btnSearch' style='display:none' value='查找' class='btn' onclick='search()'></div><div><input type='button' class='btn' style='display:none' id='Export' value='導出' onclick='Export()'></div><div><input type='button' class='btn' style='display:none' id='Print' value='打印' onclick='Print()'></div><div><input type='button' class='btn' style='display:none' id='Reset' value='重置' onclick='Reset()'></div>";
}
}else{
search();
}
$("#search_div").append(html);
$('#loading1').remove();
$('#loading2').remove();
}
});
相對完成的方法如下:
function initSearchDiv(event, treeId, treeNode, clickFlag) {
$("<div id='loading1' class=\"datagrid-mask\"></div>").css({display:"block",width:"100%",height:$(window).height()}).appendTo("body");
$("<div id='loading2' class=\"datagrid-mask-msg\"></div>").html("查詢條件構建中...").appendTo("body").css({display:"block",left:($(document.body).outerWidth(true) - 190) / 2,top:($(window).height() - 45) / 2});
document.getElementById("ifr").src = "report_ts.html";
$("#search_div").html("");
var url ="";
if(deptid!=null&&deptid!=""){
url = "ParameterServer?method=paramInit&reportId="
+ report_id+"&clientType="+clientType+"&isOffice="+ isoffice +"&deptId="+deptid+"&year="+year+"&admdivcode="+admdivcode+ "&date=" + new Date()+"&queryType="+queryType+"&reportType="+reportType;
//執收單位端點擊一個報表沒關閉再點擊第二個報表 ,reportType無法傳過來
if(queryType=="1"&&clientType=="1"&&reportType==null){
url = url.replace("reportType=null","reportType=0");
}
if(queryType=="0"&&clientType=="1"&&reportType==null){
url = url.replace("reportType=null","reportType=1");
}
}else{
url = "ParameterServer?method=paramInit&reportId="
+ report_id + "&date=" + new Date();
}
NODE.params = new Array();
NODE.link = report_name;
NODE.reportid = report_id;
if (NODE.link != "" && NODE.link != null) {
var pas = new Array();
$.ajax({
url : url, //查詢所有參數
async : false,
type : "GET",
success : function(data) {
console.log("*************************************************************");
console.log(data);
var object = jQuery.parseJSON(data);
var sty = object.sty;
var params = object.params; //報表參數集合
var ars = object.columnpara;
if(ars!=undefined && ars!=""){
serArr2Local(ars);
}
//添加table
var row = sty.row_num,
column = sty.columnNum,
html = "";
if(row!=0&&column!=0){
//加載
html += "<table style='width:95%;'>";
for(var i=0;i<row;i++){
html += "<tr style='heigth: 140px'>";
for(var j=0;j<column;j++){
html+= "<td id='td_"+i+"_"+j+"' nowrap></td>";
}
html += "</tr>";
}
html += "</table>";
}
$("#search_div").html(html);
paraIndex = sty.date2cell;
$.each(paraIndex, function(idx, obj){
if(obj.width!="")
$("#td_"+obj.row+"_"+obj.column).attr("width",obj.width+"px");
if(obj.para==null){
$("#td_"+obj.row+"_"+obj.column).remove();
}else{
//合併的單元格
if(obj.colspan!=null){
$("#td_"+obj.row+"_"+obj.column).attr("colspan",obj.colspan);
}
if(obj.rowspan!=null){
$("#td_"+obj.row+"_"+obj.column).attr("rowspan",obj.rowspan);
}
}
});
$.each(params, function(idx, obj) {
var item = new Object();
item.name = obj.name;
item.type = obj.type;
item.event = obj.event;
item.disname=obj.displayname;
item.ismust=obj.ismust;
item.id=obj.id;
if(clientType==1&&obj.displayname=="主管部門"){
//單位端不需要主管部門篩選條件
//NODE.params.splice(item);
return true;
}
else if (obj.type == 'tree') {
createTree(obj);
} else if(obj.type=='radiotree'){
if(clientType==1){ //單位端
if(NODE.link=="nontaxComplete.rptdesign"){
obj.displayname="收費類別";
}
console.log("-----------------------------------");
console.log(obj);
console.log("==================================");
createRadioTree_unit(obj);
}else{
createRadioTree(obj);
}
//var dataSet = updateData(obj.data);
mapData.put(obj.name, obj.data);
} else if (obj.type == 'select') {
if(clientType==1&&obj.displayname=="統計類型"){
obj.data.splice(6,1);
}
if(clientType==1&&NODE.link=="nontaxComplete.rptdesign"){
obj.data.splice(3,2);
obj.data.splice(0,1);
}
createSelect(obj);
} else if (obj.type == 'checkbox') {
createCheckbox(obj);
} else if (obj.type == 'radio') {
createReadio(obj);
} else if (obj.type == 'text') {
createText(obj);
} else if (obj.type == 'date') {
createDate(obj);
} else if (obj.type == 'number') {
createNumber(obj);
} else if (obj.type == 'layer'){
creatLayer(obj);
mapData.put(obj.name, obj.data);
} else if(obj.type == 'dateRange'){
createDateRange(obj);
}else if(obj.type == 'date_YM'){
createDate_YM(obj);
}else if(obj.type == 'date_YYYYMMDD'){
createDate_YYYYMMDD(obj);
}
NODE.params.push(item);
});
//需要初始隱藏的參數
if($("#agetype")){
$('#agebegin_div').hide();
$('#ageend_div').hide();
}
if($("#frequency")){
$('#frequencybegin_div').hide();
$('#frequencyend_div').hide();
}
var html = "";
if(params.length>0){
//alert(isWeb);
//頁面追加 查找、打印、導出按鈕 最重要的當然是查找按鈕
if(isWeb=='1'){
html= "<div><input type='button' id='btnSearch' value='查找' class='btn' onclick='search()'></div><div><input type='button' class='btn' id='Export' value='導出' onclick='Export()'></div><div><input type='button' class='btn' id='Print' value='打印' onclick='Print()'></div><div><input type='button' class='btn' id='Reset' value='重置' onclick='Reset()'></div>";
}else{
//html= "<div><input type='button' id='btnSearch' style='display:none' value='查找' class='btn' onclick='search()'></div><div><input type='button' class='btn' style='display:none' id='Export' value='導出' onclick='Export()'></div><div><input type='button' class='btn' style='display:none' id='Print' value='打印' onclick='Print()'></div><div><input type='button' class='btn' style='display:none' id='Reset' value='重置' onclick='Reset()'></div>";
}
}else{
search();
}
$("#search_div").append(html);
$('#loading1').remove();
$('#loading2').remove();
}
});
}else{
$('#loading1').remove();
$('#loading2').remove();
}
$("#search_div").show();
}
創建具體查詢條件的dom元素代碼如下:
//創建下拉樹(多選)
function createTree(obj) {
var width=getWidth(obj);
// var html = "<div style='width:"+width+"px;' id='"+obj.name+"_div'>";
var html = "<div id='"+obj.name+"_div'>";
html += obj.displayname ;
if(obj.ismust=="Y"){
html+="<font size='3' color='red'>*</font>";
}
// html += "<select id='"+obj.name+"' class='easyui-combotree' style='"+obj.style+" border:1px solid red;' multiple='true' required='true'></select>";
html += "<select id='"+obj.name+"' class='easyui-combotree' style='border:1px solid red;' multiple='true' required='true'></select>";
html += "</div>";
// $("#search_table tr:last td:last").append(html);
appendhtml(html,obj);
$.parser.parse(); // 動態創建easyui元素後需要重新渲染
$('#'+obj.name).combotree('loadData', obj.data); //加載數據
$("#"+obj.name).combotree({multiple:true}); //設置爲多選
}
function getFontCss(treeId, treeNode) {
return (!!treeNode.highlight) ? {color:"#FF6666", "font-weight":"bold"} : {color:"#333", "font-weight":"normal"};
}
//創建下拉樹 (單選)
function createRadioTree(obj) {
var width=getWidth(obj);
// var html = "<div style='width:"+width+"px;' id='"+obj.name+"_div'>";
var html = "<div style='' id='"+obj.name+"_div'>";
if(obj.ismust=="Y"){
html+="<font size='3' color='red'>*</font>";
}
// html += "<span>"+obj.displayname+"</span>"
// + "<input type='hidden' id='"+obj.name+"' name='"+obj.name+"' /><input class='input' type='input' style='"+obj.style+"' id='"+obj.name+"1' onclick=radiotree('"+obj.name+"') readonly >";
html += "<span>"+obj.displayname+"</span> "
+ "<input type='hidden' id='"+obj.name+"' name='"+obj.name+"' /><input class='input' type='input' style='' id='"+obj.name+"1' onclick=layertree('"+obj.name+"') readonly >";
appendhtml(html,obj);
if(obj.event){
$("#"+obj.name).bind("input propertychange",
(new Function("return "+obj.event))()
);
}
}
//創建下拉樹 (單選) 只讀,
function createRadioTree_unit(obj) {
var width=getWidth(obj);
// var html = "<div style='width:"+width+"px;' id='"+obj.name+"_div'>";
var html = "<div style='' id='"+obj.name+"_div'>";
if(obj.ismust=="Y"){
html+="<font size='3' color='red'>*</font>";
}
if(obj.name=='agencyId'){
html += "<span>"+obj.displayname+"</span> "
+ "<input type='hidden' id='"+obj.name+"' name='"+obj.name+"' /><input class='input' type='input' style='' id='"+obj.name+"1' disabled='disabled' >";
}/* if(obj.name=='countName'){
html += "<span>"+obj.displayname+"</span> "
+ "<input type='hidden' id='"+obj.name+"' name='"+obj.name+"' /><input class='input' type='input' style='' id='"+obj.name+"1' disabled='disabled' >";
} */else{
html += "<span>"+obj.displayname+"</span>"
+ "<input type='hidden' id='"+obj.name+"' name='"+obj.name+"' /><input class='input' type='input' style='"+obj.style+"' id='"+obj.name+"1' onclick=layertree('"+obj.name+"') readonly >";
if(obj.event){
$("#"+obj.name).bind("input propertychange",
(new Function("return "+obj.event))()
);
}
}
appendhtml(html,obj);
}
function layertree(ids){
var dataSet = mapData.get(ids);
var title_des = null;
//var html ="<div class='layer '><ul id='"+id+"_UI' class='ztree' cellpadding='0' cellspacing='0' border='0' class='display'></ul></div>";
var title_des = "";
var code_des ="";
var name_des = "";
input_id = ids;
if(ids.indexOf("agencyId")>=0||ids.indexOf("agencyName")>=0){
title_des = "執收單位選擇";
code_des = "單位編碼";
name_des = "單位名稱";
}else if(ids.indexOf("nontaxId")>=0||ids.indexOf("nontaxName")>=0){
title_des = "收費項目選擇";
code_des = "項目編碼";
name_des = "項目名稱";
}else if(ids.indexOf("typeName")>=0){
title_des = "收費類別選擇";
code_des = "收費編碼";
name_des = "收費名稱";
}else if(ids.indexOf("fundNature")>=0){
title_des = "資金性質選擇";
code_des = "資金性質編碼";
name_des = "資金性質名稱";
}else if(ids.indexOf("billId")>=0){
title_des = "票據選擇";
code_des = "票據編碼";
name_des = "票據名稱";
}else if(ids.indexOf("countName")>=0){
if(countType==2){
title_des = "收費類別選擇";
code_des = "收費編碼";
name_des = "收費名稱";
}else if(countType==3){
title_des = "收費項目選擇";
code_des = "項目編碼";
name_des = "項目名稱";
}else if(countType == 4){
title_des = "預算科目選擇";
code_des = "科目編碼";
name_des = "科目名稱";
}else if(countType == 5){
title_des = "行政區劃選擇";
code_des = "區劃編碼";
name_des = "區劃名稱";
}else{
if(clientType=='1'){return}
title_des = "執收單位選擇";
code_des = "單位編碼";
name_des = "單位名稱";
}
}else if(ids.indexOf("storeId")>=0){
title_des = "倉庫選擇";
code_des = "倉庫編碼";
name_des = "倉庫名稱";
}else if(ids.indexOf("bankId")>=0){
title_des = "銀行選擇";
code_des = "銀行編碼";
name_des = "銀行名稱";
}else if(ids.indexOf("bankbranchId")>=0){
title_des = "銀行網點選擇";
code_des = "網點編碼";
name_des = "網點名稱";
}else if(ids.indexOf("subId")>=0){
title_des = "預算科目選擇";
code_des = "科目編碼";
name_des = "科目名稱";
}else if(ids.indexOf("deptId") >= 0){
title_des = "主管部門選擇";
code_des = "部門編碼";
name_des = "部門名稱";
}else if(ids.indexOf("sflb") >= 0){
title_des = "收費類別選擇";
code_des = "類別代碼";
name_des = "類別名稱";
}else if(ids.indexOf("columnsManage") >= 0){
//zNodes = dataSet;
title_des = "編輯列";
code_des = "";
name_des = "";
$("#showColumn").jqxWindow("setTitle", "<strong>" + title_des+"</strong>");
$("#showColumn").jqxWindow('open');
$("#btEnter2").jqxButton({ width: 60, height: 25 });
$("#btCancel2").jqxButton({ width: 60, height: 25 });
$("#btnReset").jqxButton({ width: 60, height: 25 });
//單擊選中行,選中數據
//$("#btEnter2").click(function(){
/* alert("是編輯列的回車鍵!");
return; */
//把zNodes傳到後端保存
//updateDataSource(ids,zNodes);
// updateColumnPara(NODE.reportid);
//});
$("#btCancel2").click(function(){
$("#showColumn").jqxWindow('close');
});
showColunmModal(zNodes);//zNodes是數據源,在columnsModel.js文件中定義的,需要從後端傳到前端
}
if(ids.indexOf("columnsManage") >= 0){
return;
}
//var data = jQuery.parseJSON(data);
$("#layer1").jqxWindow("setTitle", "<strong>" + title_des+"</strong>");
$("#layer1").jqxWindow('open');
var source =
{
dataType: "json",
dataFields: [
{ name: 'id', type: 'string' },
{ name: 'code', type: 'string' },
{ name: 'name', type: 'string' },
{ name: 'pid', type: 'string' }
],
hierarchy:
{
keyDataField: { name: 'id' },
parentDataField: { name: 'pid' }
},
id: 'id',
localData: dataSet
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#treegrid").jqxTreeGrid(
{
width: 594,
height: 368,
filterable: true,
sortable:true,
theme: 'energyblue',
source: dataAdapter,
ready: function () {
//$("#treegrid").jqxTreeGrid("expandAll");
//$("#treegrid").jqxTreeGrid('expandRow','2');
},
columns: [
{ text: code_des, dataField: 'code', width: 180 },
{ text: name_des, dataField: 'name' }
]
});
$("#treegrid").jqxTreeGrid('clearFilters');
//$("#treegrid").jqxTreeGrid('expandRow', '0010');
$('#treegrid').on('rowDoubleClick', function (event){
$("#layer1").jqxWindow('close');
var row = args.row;
var key = args.key;
$("#"+input_id).val(key);
$("#"+input_id+"1").val(row.code+" "+row.name);
$("#"+input_id).trigger("input");
});
var row ;
var key ;
$('#treegrid').on('rowSelect', function (event){
row = args.row;
key = args.key;
});
$("#btEnter").jqxButton({ width: 60, height: 25 });
$("#btCancel").jqxButton({ width: 60, height: 25 });
//單擊選中行,選中數據
$("#btEnter").click(function(){
if(row!=""&&key!=""){
$("#"+input_id).val(key);
$("#"+input_id+"1").val(row.code+" "+row.name);
$("#"+input_id).trigger("input");
$("#layer1").jqxWindow('close'); }
})
$("#btCancel").click(function(){
$("#layer1").jqxWindow('close');
})
//$.fn.zTree.init($("#"+id+"_UI"), setting, dataSet);
$('#treegrid').on('filter', function (event){
//debugger;
//$("#treegrid").jqxTreeGrid('refresh');
$("#treegrid").jqxTreeGrid('clearSelection');
if(dataSet!=null){
var input = $("input[type='text']").val();
if(input != null&&input != ""){
if(!isNaN(input)){
for(var o in dataSet){
if(dataSet[o].code==input){
var id = dataSet[o].id;
$("#treegrid").jqxTreeGrid('selectRow', dataSet[o].id);
break;
}
}
for(var ii=1;ii<=input.length;ii++){
for(var o in dataSet){
if(dataSet[o].code==input.substr(0,ii)){
$("#treegrid").jqxTreeGrid("expandRow", dataSet[o].id);
}
}
}
}else{
for(var o in dataSet){
if(dataSet[o].name==input){
var id = dataSet[o].id;
$("#treegrid").jqxTreeGrid('selectRow', dataSet[o].id);
break;
}
}
for(var o in dataSet){
//debugger;
if(dataSet[o].name!=null){
if(dataSet[o].name.indexOf(input)>=0||dataSet[o].pid=="-1"){
$("#treegrid").jqxTreeGrid("expandRow", dataSet[o].id);
if(dataSet[o].pid!="-1"){
$("#treegrid").jqxTreeGrid("expandRow", dataSet[o].pid);
}
}
}
}
}
}
}
});
$("div[role='combobox']").change(function(){
$("#treegrid").jqxTreeGrid('clearFilters');
});
$("input[type='text']").keyup(function(){
if($("input[type='text']").val().length==0){
$("#treegrid").jqxTreeGrid('clearFilters');
}
});
$('#layer1').on('close', function (event) { dataSet = null });
}
//保存列排序參數到數據庫
function updateDataSource(paraId, objData){//參數id,參數數據來源
var ds = JSON.stringify(objData);
$.ajax({
url : "ReportParameServer?method=updateDataSource&date=" + new Date(),
async : false,
type : "POST",
data : {"id":paraId, "ds":ds},
success : function(data) {
if(data=="true"){
zNodes = objData;
alert("調整成功!");
}else{
alert("調整失敗!");
}
}
});
}
function updateData(dataSet){
$.each(dataSet, function(i, data) {
//data.name="["+data.code+"]"+data.name;
//不想要中括號
data.name=data.name;
});
return dataSet;
}
//獲取當前時間
function curDateTime(day){
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth()+1;
var date = d.getDate();
if(day!=null){
date = day;
}
var curDateTime= year;
if(month>9)
curDateTime = curDateTime +"-"+month;
else
curDateTime = curDateTime +"-0"+month;
if(date>9)
curDateTime = curDateTime +"-"+date;
else
curDateTime = curDateTime +"-0"+date;
return curDateTime;
}
//獲取當前時間
function curYM(day){
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth()+1;
var date = d.getDate();
if(day!=null){
date = day;
}
var curDateTime= year;
if(month>9)
curDateTime = curDateTime +"-"+month;
else
curDateTime = curDateTime +"-0"+month;
return curDateTime;
}
//獲取當前時間 格式爲YYYYMMDD
function curYYYYMMDD(){
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth()+1;
var day = d.getDate();
var curDateTime= year;
if(month>9)
curDateTime = curDateTime +""+month;
else
curDateTime = curDateTime +"0"+month;
if(day>9)
curDateTime = curDateTime +""+day;
else
curDateTime = curDateTime +"0"+day;
return curDateTime;
}
//創建下拉框
function createSelect(obj) {
var width=getWidth(obj);
// var html = "<div style='width:"+width+"px;' id='"+obj.name+"_div'>";
var html = "<div id='"+obj.name+"_div'>";
if(obj.ismust=="Y"){
html+="<font size='3' color='red'>*</font>";
}
html+= obj.displayname +" ";
// html += "<select style='height:20px;"+obj.style+"' id="+obj.name+">";
html += "<select style='height:20px;' id="+obj.name+">";
var ii = 0;
$.each(obj.data, function(idx, item) {
var value="";
if(!item.id){
value=-999;
}else{
value=item.id;
}
html += "<option value="+value+">" + item.name + "</option>";
if(ii<1)
{
if(item.name != "請選擇" && obj.displayname != "篩選")
{
conditions += " " + obj.displayname + ":" + item.name;
}
ii ++;
}
});
html += "</select></div>";
appendhtml(html,obj);
// $("#search_div").append(html);
if(obj.event){
$('#'+obj.name).change(
(new Function("return "+obj.event))()
);
}
}
//創建複選框
function createCheckbox(obj) {
var width=getWidth(obj);
var style;
if(obj.style){
style=obj.style+" width:"+width+"px";
}else{
style="width:"+width+"px";
}
// var html = "<div id='"+obj.name+"'_div style='"+style+"'>" ;
var html = "<div id='"+obj.name+"'_div >" ;
if(obj.ismust=="Y"){
html+="<font size='3' color='red'>*</font>";
}
html+= obj.displayname ;
$.each( obj.data, function(idx, item) {
// html += "<input type='checkbox' name='"+obj.name+"' value='"+item.id+"'>" + item.name;
html += "<input type='checkbox' name='"+obj.name+"' value='"+item.id+"'>" + item.name;
});
html+=" </div>";
// $("#search_div").append(html);
appendhtml(html,obj);
// $("#search_table tr:last td:last").append(html);
}
//創建單選框
function createReadio(obj) {
var width=getWidth(obj);
var style;
if(obj.style){
style=obj.style+" width:"+width+"px";
}else{
style="width:"+width+"px";
}
// var html = "<div id='"+obj.name+"'_div style='"+style+"'>";
var html = "<div id='"+obj.name+"'_div >";
if(obj.ismust=="Y"){
html+="<font size='3' color='red'>*</font>";
}
html+=obj.displayname ;
var ii =0;
$ .each(obj.data , function(idx, item) {
if (idx == 0) {
if(obj.displayname=="政務中心"){
html += "<input type='radio' name='"+obj.name+"' value='"+item.id+"'>" + "<label>"+ item.name +"</label>";
}else{
html += "<input type='radio' name='"+obj.name+"' checked=true value='"+item.id+"'>" + "<label>"+ item.name +"</label>";
}
} else {
html += "<input type='radio' name='"+obj.name+"' value='"+item.id+"'>" + "<label>"+ item.name +"</label>";
}
if(ii<1 && obj.displayname !="政務中心")
{
conditions += " " + obj.displayname + ":" + item.name;
ii ++;
}
});
html+="</div>";
// $("#search_div").append(html);
appendhtml(html,obj);
// $("#search_table tr:last td:last").append(html);
if(obj.event){
$("input[name=\"" + obj.name + "\"]").each(function() {
$(this).click((new Function("return "+obj.event))());
});
}
}
//創建文本框
function createText(obj) {
var width=getWidth(obj);
// var html = "<div style='width:"+width+"px;' id='"+obj.name+"_div'>";
var html = "<div id='"+obj.name+"_div'>";
if(obj.ismust=="Y"){
html+="<font size='3' color='red'>*</font>";
}
html+=obj.displayname +" "
+ "<input class='input' type='input' style='"+obj.style+"' id='"+obj.name+"' name='"+obj.name+"' ></div>";
// $("#search_table tr:last td:last").append(html);
// $("#search_div").append(html);
appendhtml(html,obj);
}
//創建彈出層(爲input綁定事件)
var input_id = "";
function creatLayer(obj) {
var data = JSON.stringify(obj.data);
//debugger;
var width=getWidth(obj);
// var html = "<div style='width:"+width+"px;' id='"+obj.name+"_div'>";
var html = "<div id='"+obj.name+"_div'>";
if(obj.ismust=="Y"){
html+="<font size='3' color='red'>*</font>";
}
// html += "<span>"+obj.displayname+"</span>"
// + "<input type='hidden' id='"+obj.name+"' name='"+obj.name+"' /><input class='input' type='input' style='"+obj.style+"' id='"+obj.name+"1' onclick=layer('"+obj.name+"') readonly >";
html += "<span>"+obj.displayname+"</span> "
+ "<input type='hidden' id='"+obj.name+"' name='"+obj.name+"' /><input class='input' type='input' id='"+obj.name+"1' onclick=layertree('"+obj.name+"') readonly >";
appendhtml(html,obj);
// $("#search_table tr:last td:last").append(html);
if(obj.event){
$("#"+obj.name+"1").bind("propertychange",
(new Function("return "+obj.event))()
);
}
}
//創建日期輸入框
function createDate(obj) {
var width=getWidth(obj);
// var html = "<div style='width:"+width+"px;' id='"+obj.name+"_div'>";
var html = "<div id='"+obj.name+"_div'>";
if(obj.ismust=="Y"){
html+="<font size='3' color='red'>*</font>";
}
html+="<span id='"+obj.name+"_span'>"+obj.displayname +"</span> "
+ "<input class='Wdate' type='input' id='"
+ obj.name
+ "' name='"
+ obj.name
+ "' onFocus=\"WdatePicker({dateFmt:'yyyy-MM-dd',alwaysUseStartDate:true})\" ></div>";
// $("#search_div").append(html);
appendhtml(html,obj);
if(obj.name.indexOf("start") >=0){
if(obj.defaultVal==minDateVal){
//$("#"+obj.name).val(curDateTime(1));
}else{
$("#"+obj.name).val(curDateTime(1));
conditions += " "+obj.displayname + ":" + curDateTime(1);
}
}else{
if(obj.defaultVal==maxDateVal){
}else{
$("#"+obj.name).val(curDateTime());
conditions += " "+ obj.displayname + ":" + curDateTime();
}
}
}
//創建日期_年月輸入框
function createDate_YM(obj) {
var width=getWidth(obj);
// var html = "<div style='width:"+width+"px;' id='"+obj.name+"_div'>";
var html = "<div id='"+obj.name+"_div'>";
if(obj.ismust=="Y"){
html+="<font size='3' color='red'>*</font>";
}
html+="<span id='"+obj.name+"_span'>"+obj.displayname +"</span> "
+ "<input class='Wdate' type='input' id='"
+ obj.name
+ "' name='"
+ obj.name
+ "' onFocus=\"WdatePicker({dateFmt:'yyyy-MM',alwaysUseStartDate:true})\" ></div>";
// $("#search_div").append(html);
appendhtml(html,obj);
$("#"+obj.name).val(curYM());
/* if(obj.name.indexOf("start") >=0){
if(obj.defaultVal==minDateVal){
//$("#"+obj.name).val(curDateTime(1));
}else{
$("#"+obj.name).val(createDate_YM());
//conditions += " "+obj.displayname + ":" + createDate_YM();
}
}else{
if(obj.defaultVal==maxDateVal){
}else{
$("#"+obj.name).val(createDate_YM());
//conditions += " "+ obj.displayname + " " + createDate_YM();
}
} */
}
//創建日期_年月日輸入框
function createDate_YYYYMMDD(obj) {
var width=getWidth(obj);
var html = "<div id='"+obj.name+"_div'>";
if(obj.ismust=="Y"){
html+="<font size='3' color='red'>*</font>";
}
html+="<span id='"+obj.name+"_span'>"+obj.displayname +"</span> "
+ "<input class='Wdate' type='input' id='"
+ obj.name
+ "' name='"
+ obj.name
+ "' onFocus=\"WdatePicker({dateFmt:'yyyyMMdd',alwaysUseStartDate:true})\" ></div>";
// $("#search_div").append(html);
appendhtml(html,obj);
$("#"+obj.name).val(curYYYYMMDD());
}
//創建數字輸入框
function createNumber(obj) {
var width=getWidth(obj);
// var html = "<div style='width:"+width+"px;' id='"+obj.name+"_div'>";
var html = "<div id='"+obj.name+"_div'>";
if(obj.ismust=="Y"){
html+="<font size='3' color='red'>*</font>";
}
html+=obj.displayname +" "
+ "<input type='input' class='input' id='"
+ obj.name
+ "' name='"
+ obj.name
+ "' onpropertychange='_isNumber(this)' oninput='_isNumber(this)'></div>";
// $("#search_div").append(html);
appendhtml(html,obj);
}
3、每個創建的元素,如何追加到查詢區域當中呢:
看下面的js函數:
function appendhtml(html,obj){
if(paraIndex!=null&¶Index!=""){
for(var i = 0;i<paraIndex.length;i++){
if(paraIndex[i].para==obj.id){
$("#td_"+paraIndex[i].row+"_"+paraIndex[i].column).html(html);
var width = $("#td_"+paraIndex[i].row+"_"+paraIndex[i].column).width()-getTitleWidth(obj.displayname);
//var width = obj.width-getTitleWidth(obj.name);
if( width != null && width > 0){
$("#" + obj.name).width(width);
$("#" + obj.name+"1").width(width);
}
}
}
}else{ //如果沒有定義樣式,則直接追加到search_div當中
$("#search_div").append(html);
}
}
如果是web頁面,將在頁面中,追加三個按鈕:
具體代碼看什麼onclick方法中相關代碼,這個方法名稱當初真心取得有問題,容易讓人產生誤解。
4、把查詢條件向報表中傳遞
具體我們看看查找按鈕的代碼:其思路爲:根據dom元素類型,拼接查詢條件,把條件追加到ifram的url當中去。如果增加了查詢條件類型(參數類型),這個方法需要配套修改。爲了在報表中,顯示出查詢條件(主要爲了打印、導出時,紙面上有條件),拼接了condition變量,存放條件,針對日期顯示,單獨搞兩個textVal變量。這些都是輔助性質的。
function search() {
var sdate = "",edate = "";
var sdate_c = "",edate_c = "";
conditions = "";
var url = "";
var flag = 0;
url += "&usercode=" + NODE.usercode;
$.each(NODE.params, function(idx, obj) {
var name = obj.name;
var type = obj.type;
var disname = obj.disname;
var ismust=obj.ismust;
var textVal = $("#" + name + "1").val();
if (type == "checkbox") {
var str = chk(name);
if (str.length<1) {
if(ismust=="Y"){ //必填
asyncbox.error(disname + ' 爲必填項!','提示');
flag++;
return false;
}
} else {
url += "&" + name + "=" + str;
conditions +=" " + disname + ":"+ textVal ;
}
}else if (type == "radio") {
var str = $("input[name=" + name + "]:checked").val();
textVal = $("input[name=" + name + "]:checked").next().text();
if (!str) {
if(ismust=="Y"){ //必填
asyncbox.error(disname + ' 爲必填項!','提示');
flag++;
return false;
}
} else {
url += "&" + name + "=" + str;
conditions +=" " + disname + ":"+ textVal ;
}
}else if (type == "select") {
var str = $("#" + name).val();
//textVal = $("#" + name).text();
textVal = $("#" + name).find("option:selected").text();
if (!str) {
if(ismust=="Y"){ //必填
asyncbox.error(disname + ' 爲必填項!','提示');
flag++;
return false;
}
} else if(str&&str!=-999){
url += "&" + name + "=" + str;
if(textVal != "請選擇")
{
conditions +=" " + disname + ":"+ textVal ;
}
}
}else if (type == "text" || type == "date" || type == "number"|| type == "date_YM") {
var val = $("#" + name).val();
if(NODE.link =='NontaxCompleteCondition.rptdesign'||NODE.link == "nontaxComplete.rptdesign"){
if(name.indexOf("start") >= 0)
{
sdate_c = $("#" + name).val();
}
else if(name.indexOf("end") >= 0)
{
edate_c = $("#" + name).val();
}
}
if(type == "date")
{
textVal = val;
}
if(type == "date_YM")
{
textVal = val;
}
if (!val) {
if(ismust=="Y"){ //必填
asyncbox.error(disname + ' 爲必填項!','提示');
flag++;
return false;
}
if(name.indexOf("tYear")>=0){
url += "&" + name + "=" + year;
}
} else {
if(type == "date")
{
if(disname != "至")
{
conditions +=" " + disname + ":"+ textVal ;
}
else
{
conditions +=" " + disname + " "+ textVal ;
}
}
else if(type == "date_YM")
{
if(disname != "至")
{
conditions +=" " + disname + ":"+ textVal ;
}
else
{
conditions +=" " + disname + " "+ textVal ;
}
}
else if(type == "text")
{
conditions +=" " + disname + " "+ val ;
}
url += "&" + name + "=" + val;
}
}else if(type == "layer"){
var val = $("#" + name).val();
if (!val) {
if(ismust=="Y"){ //必填
asyncbox.error(disname + ' 爲必填項!','提示');
flag++;
return false;
}
if(NODE.link=='NontaxCompleteCondition.rptdesign'){
if(name.indexOf("countName") >= 0 ){
if($("#censusType").val()=='BasChargeAgency'){
url += "&ageType=1&" + name + "=" + deptid;
}else{
url += "&agencyId=" + deptid;
}
}
}else{
if(name.indexOf("agencyId")>=0||name.indexOf("agencyName")>=0){
url += "&ageType=1&" + name + "=" + deptid;
}
}
if(name.indexOf("billId")>=0){
url += "&" + name + "=";
}
} else {
if(NODE.link=='NontaxCompleteCondition.rptdesign'){
if($("#censusType").val()!='BasChargeAgency'){
url += "&agencyId=" + deptid;
}
}
conditions +=" " + disname + ":"+ textVal ;
url += "&" + name + "=" + val;
}
}else if (type == "tree") {
var val = $("#" + name).combotree('getValues');
var params = "";
if (val[0]=="") {
if(ismust=="Y"){ //必填
asyncbox.error(disname + ' 爲必填項!','提示');
flag++;
return false;
}
} else {
for (i = 0; i < val.length; i++) {
if (val.length == 1) {
params += val[i];
} else if (i == 0) {
params += val[i] + "',";
} else if (i == val.length - 1) {
params += "'" + val[i];
} else {
params += "'" + val[i] + "',";
}
}
conditions +=" " + disname + ":"+ textVal ;
url += "&" + name + "=" + params;
}
}else if (type == "radiotree") {
var val = $("#" + name).val();
var dname = $("#" + name).prev().text();
if (!val) {
if(ismust=="Y"){ //必填
asyncbox.error(disname + ' 爲必填項!','提示');
flag++;
return false;
}
if(NODE.link=='NontaxCompleteCondition.rptdesign'){
if($("#censusType").val()=='BasChargeAgency'){
url += "&ageType=1&" ;
//+ name + "=" + deptid
}else{
url += "&agencyId=" + deptid;
}
}else{
if(name.indexOf("agencyId")>=0||name.indexOf("agencyName")>=0){
//url += "&ageType=1&" + name + "=" + deptid;
url += "&ageType=1";
}
}
} else {
if(name.indexOf("agencyId")>=0||name.indexOf("agencyName")>=0){
url += "&ageType=0";
}
if(NODE.link=='NontaxCompleteCondition.rptdesign')
{
conditions +=" " + dname + ":"+ textVal ;
}
else
{
conditions +=" " + disname + ":"+ textVal ;
}
// var t = $('#' + name).val(); // 得到樹對象
// var node = t.tree('getSelected'); // 得到選擇的節點
// var level = node.attributes; //深度
// var nodeid = node.id; //節點ID
// var nodename = node.text; //節點名稱
// url += "&" + name + "=" + nodeid + "&"+name+"level=" + level
// + "&"+name+"nodename=" + nodename;
}
url += "&" + name + "=" + val;
}
});
if(NODE.link == "NontaxCompleteCondition.rptdesign"||NODE.link == "nontaxComplete.rptdesign")
{
if(sdate_c == null|| sdate_c == "" || edate_c == null|| edate_c== "")
{
alert("起始時間爲必填項!");
return;
}
else if(sdate_c != null && sdate_c != "" && edate_c != null && edate_c != "")
{
var startDate_c= sdate_c.split("-");
var endDate_c= edate_c.split("-");
var sYear =startDate_c[0];
var eYear =endDate_c[0];
if(sYear != eYear)
{
alert("查詢的時間必須在同一個年度!");
return;
}
}
}
var a=new Array();
if($("#org").length>0){
a=$("#org").combotree('getValues');
}
var b=$("input[name=statisticstype]:checked").val();;
if(b=='2'&&a[0]==""){
asyncbox.error('按機構統計時“組織機構必填”!','提示');
flag++;
return false;
}
if (flag == 0) {
var ifr_url = "";
if(NODE.link.indexOf("jsp") > 0){
ifr_url=NODE.link;
}else{
var clientType = GetQueryString("clientType");
if(url.search('tongjiType')!=-1){
ifr_url="frameset?__report=report/" + NODE.link
+ "&report_id=" + report_id
+ "&__parameterpage=false&isoffice="+isoffice+"&admdivcode=" + admdivcode
+ "&year=" + year + "&clientType=" + clientType + url + "&conditions=" + conditions+"&token="+token;
}else{
ifr_url="frameset?__report=report/" + NODE.link
+ "&report_id=" + report_id
+ "&__parameterpage=false&isoffice="+isoffice+"&tongjiType=1&admdivcode=" + admdivcode
+ "&year=" + year + "&clientType=" + clientType + url + "&conditions=" + conditions+"&token="+token;;
}
if(clientType=='0'){
ifr_url +="&officeId=" + deptid;
}
if(NODE.link=='day_collecting_bank.rptdesign'){
if(ifr_url.search('agencyId')==-1){
ifr_url += "&agencyId=" + deptid;
}
}
}
if(clientType=='0'){
ifr_url += "&officeId=" + deptid;
if(ifr_url.indexOf("storeId")<0){
// ifr_url+="&storeId="+deptid;
}
}else{
if(ifr_url.indexOf("agencyId")<0){
ifr_url+="&agencyId="+deptid;
}
}
if(ifr_url.indexOf("queryType")<0){
ifr_url+="&queryType="+queryType;
}
//alert(conditions);
ifr_url+="&hallid="+deptid+"&dept="+deptid;
//獲得自定義列順序參數
var coloptstr = getCurrentColumnPara();
if(coloptstr!=""){
ifr_url += "&colopt="+coloptstr;
}
ifr_url = encodeURI(ifr_url);
document.getElementById("ifr").src = ifr_url;
}
}
這段代碼當中:conditions 是爲了拼接查詢條件,傳遞到報表當中,供報表中顯示查詢條件用。
報表我們用birt,birt中,同樣要設對應的查詢參數。
(birt 當中 對應的參數,名字要和條件名字一致)
ps:dept 在一個子系統中,傳的就是單位guid? 主業務系統傳的的agencyId
報表本身準備完畢後,就是如何掛到另外一個應用當中:
1、我們用report_test.jsp 做入口
2、進入這個頁面的時候,要傳遞單位id參數
3、要把參數傳遞到iframe當中。
傳遞參數的代碼:
$(function() {
var height = $(window).height();
initLayer();
//調用初始化查詢條件區的方法...
initSearchDiv();
......
var ifr_url = "";
var startbilldateVal='2010-01-01';
var endbilldateVal='2030-01-01';
if(report_name.indexOf("jsp") > 0){
ifr_url=report_name;
}else{ //構建調用birt報表的url字符串
var clientType = GetQueryString("clientType");
ifr_url="frameset?__report=report/" + report_name
+ "&report_id=" + report_id
+ "&__parameterpage=false&admdivcode=" + admdivcode + "&year=" + year
+ //其他需要傳遞的參數
....
}
$.ajax({
url : "ParameterServer?method=getAgency&id="+deptid+"&report_id="+report_id,
async : false,
async : false,
type : "GET",
success : function(data) {
var params = jQuery.parseJSON(data);
$.each(params, function(idx, obj) {
$("#agencyId").val(deptid);
$("#agencyId1").val(obj.code+" "+obj.name);
if(clientType=='1'){
$("#countName").val('');
$("#countName1").val('');
}else{
$("#countName").val(deptid);
$("#countName1").val(obj.code+" "+obj.name);
}
conditions += " 收費單位:"+ obj.code+" "+obj.name;
})
}
});
//if(NODE.link=='fina_income_detail.rptdesign')
//{
// conditions += " 繳款書狀態:已收款";
//}
//alert(conditions);
ifr_url +="&conditions=" + conditions;
ifr_url +="&hallid=" + deptid +"&userId="+userId+"&dept="+deptid;
//獲得自定義列順序參數
var coloptstr = getCurrentColumnPara();
if(coloptstr!=""){
ifr_url += "&colopt="+coloptstr;
}
ifr_url = encodeURI(ifr_url);
document.getElementById("ifr").src = ifr_url;
$("#ifr").height(document.body.clientHeight-$("#search_div").height()-10);
});
其實,就是拼iframe的url, 把參數帶入url
一個ie兼容性問題的解決:
console.log 在ie下有問題,而且不報錯!去掉console.log 就好
遺留問題:
- 上傳birt報表文件要分文件夾存放,現在在一個reports目錄下,文件太多。
- 多數據源的應用,開了頭,沒完善。
- 報表嚮導只做了原型,沒有產品化落地。
- 自定義
單獨弄一個報表設計器,爭取拜託birt報表設計器?
報表管理數據庫結構:
數據庫當中必須記錄用戶設置的列相關參數:
-- Create table
create table COLUMNPARAMETER
(
ID VARCHAR2(32) default sys_guid() not null,
REPORTID VARCHAR2(32) not null,
REPORTURL VARCHAR2(2000),
PARASARR VARCHAR2(4000),
ORDERPARAS VARCHAR2(2000),
CPARASARR CLOB,
DEFAULTCPARASARR CLOB
)
tablespace HBFS
pctfree 10
initrans 1
maxtrans 255
storage
(
initial 64
minextents 1
maxextents unlimited
);
-- Add comments to the table
comment on table COLUMNPARAMETER
is '報表列參數表';
-- Add comments to the columns
comment on column COLUMNPARAMETER.REPORTID
is '報表id';
comment on column COLUMNPARAMETER.REPORTURL
is '參數鏈接';
comment on column COLUMNPARAMETER.PARASARR
is '參數數組字符串';
comment on column COLUMNPARAMETER.ORDERPARAS
is '排序參數';
comment on column COLUMNPARAMETER.CPARASARR
is '大參數數組字符串';
comment on column COLUMNPARAMETER.DEFAULTCPARASARR
is '默認大參數數組字符串';
由於我廠參數是配置的:
需要增加幾個參數:
columnsManage 指定列的順序、是否隱藏、列的寬度
關於指定列排序:
我們需要增加二個參數:按哪一列排序、是升序還是降序:
(指定按列排序的表字段)
(指定的列是升序還是降序)
相應的birt報表文件中,dataset對象的beforeopen方法中增加如下代碼
if(screen!=""&&screen!=null&&screen!="null"){
if(seach!=""&&seach!=null&&seach!="null"){
this.queryText = "select * from (" + this.queryText +") where "+ seach +" like'%" + screen +"%'" ;
//添加排序參數:
if(col!=null && col!="" &&col!="null"&sort!=null &&sort!="" &&sort!="null"){
this.queryText ="select * from ("+this.queryText+") order by "+col+" "+sort;
}
}
}
這個代碼的主要作用是:根據接受的指定的列名、升降序,拼sql,使得執行該sql查詢語句後,結果是排序過的。
綁定參數與報表的關係:
參數設置了,報表文件中根據傳入的參數進行了處理,還需要把2者關聯起來,我廠做了一個報表服務,關聯報表及參數間關係:
綁定了參數,還需要指定參數在頁面上佈局的位置:
設置表頭背景圖片寬度等的位置:
發佈報表的步驟:
1、設計好報表
2、上傳報表
3、配置參數
關於birt報表參數傳遞:
一個是在reprort_test.jsp頁面中,確定相關參數初始值,一個是birt本身提供默認值,
哪個方法更優?搞不清,我們先按相關參數初始值。
ps:不是參數說明:
clientType :表示是否是財政 還是 單位,clientType=0 // 表示是財政 clientType=1 // 表示是單位
ifoffice 就是啓用了科室分管 ;officeId 科室的guid?