三、添加自定義按鈕以及JS事件
1、打開‘模板Web屬性’
2、選中‘填報頁面設置’,修改2)為‘為模板單獨設置‘,3)中是前面七個是添加的自定義按鈕;通過4)按鈕進行設置;5)操作是添加‘加載結束’事件;接下來詳細講述每個步驟;
3、點擊4)之后彈出下面頁面,自上而下七個按鈕分別為首頁、上一頁、頁碼顯示框、斜杠、總頁數、下一頁、末頁
通過‘編輯’按鈕可以改圖標,然后依次添加自定義事件
自定義事件:
首頁:
var sheet = _g().parameterEl.getWidgetByName('sheet').getValue();
if(sheet==1)
{
_g().parameterEl.getWidgetByName('page1').setValue(1);
}else{
_g().parameterEl.getWidgetByName('page2').setValue(1);
}
_g().parameterEl.getWidgetByName('Search').fireEvent('click');//Search為查詢按鈕的名字
上一頁:
var beforepage = contentPane.curLGP.getCellValue("A1");
if(beforepage > 0){
var sheet = _g().parameterEl.getWidgetByName('sheet').getValue();
if(sheet==1)
{
_g().parameterEl.getWidgetByName('page1').setValue(beforepage);
}else{
_g().parameterEl.getWidgetByName('page2').setValue(beforepage);
}
_g().parameterEl.getWidgetByName('Search').fireEvent('click');
}
頁碼顯示框:
var toolbar = contentPane.toolbar;
var items = toolbar.options.items;
var customButton = items[2];
var inner = customButton.$btnWrap;
var btnWrapper = $("em", inner);
var $input = $("input", btnWrapper);
//取這個控件
$input.blur(function() {
var targetpage = $input.val();
var endpage = contentPane.curLGP.getCellValue("C1");
if (parseInt(targetpage) > parseInt(endpage) || parseInt(targetpage) < parseInt(1)) {
alert("你輸出的頁數不再指定范圍內");
} else
var sheet = _g().parameterEl.getWidgetByName('sheet').getValue();
if(sheet==1)
{
_g().parameterEl.getWidgetByName('page1').setValue(targetpage);
}else{
_g().parameterEl.getWidgetByName('page2').setValue(targetpage);
}
_g().parameterEl.getWidgetByName('Search').fireEvent('click');
});
斜桿:無
總頁數:無
下一頁:
var nextpage = contentPane.curLGP.getCellValue("B1");
var endpage = contentPane.curLGP.getCellValue("C1");
if(nextpage<=endpage){
var sheet = _g().parameterEl.getWidgetByName('sheet').getValue();
if(sheet==1)
{
_g().parameterEl.getWidgetByName('page1').setValue(nextpage);
}else{
_g().parameterEl.getWidgetByName('page2').setValue(nextpage);
}
_g().parameterEl.getWidgetByName('Search').fireEvent('click');
}
末頁:
var endpage = contentPane.curLGP.getCellValue("C1");
var sheet = _g().parameterEl.getWidgetByName('sheet').getValue();
if(sheet==1)
{
_g().parameterEl.getWidgetByName('page1').setValue(endpage);
}else{
_g().parameterEl.getWidgetByName('page2').setValue(endpage);
}
_g().parameterEl.getWidgetByName('Search').fireEvent('click');
4、添加‘結束事件’
如下:
var toolbar = contentPane.toolbar;
var items = toolbar.options.items;
//JQUERY取我們的工具欄上的按鈕.items[2]代表的是第三個,也就是那個顯示成文本框按鈕。
var customButton=items[2];
var inner = customButton.$btnWrap;
var btnWrapper = $("em", inner);
//修正這個按鈕的屬性,讓它變成文本類型,居中,鼠標放上次圖標是編輯狀態。
btnWrapper.html("");
//獲取D1單元格的值就是page,也就是當前頁。
var cellValue = contentPane.curLGP.getCellValue("D1");
var $input = $("input", btnWrapper);
//給這個文本控件復制,用的是JQUERY的方法,可以COPY。
$input.val(cellValue);
var total=contentPane.curLGP.getCellValue("C1");
//把總頁數顯示在第5個控件上,因為這個數值可能是小數,所以判斷下要不要加一處理。
contentPane.toolbar.options.items[4].setText(total);
//把斜線寫在第4個控件上。
contentPane.toolbar.options.items[3].setText(contentPane.curLGP.getCellValue("E1"));
$(".fr-sheetbutton-container").click(function()//切換sheet時
{var a=contentPane.$contentPane.data('TabPane').tabBtns[contentPane.selectedIndex].options.name;//獲取當前sheet的名字
if(a=="sheet1")? //表示第一個sheet,sheet1需要替換成自己對應的sheet名稱
{
_g().parameterEl.getWidgetByName('sheet').setValue(1);
//當前sheet需要顯示或者隱藏的 控件
_g().parameterEl.getWidgetByName('當前面板所需要顯示的控件名稱').setVisible(true);
_g().parameterEl.getWidgetByName('當前面板所需要隱藏的控件名稱').setVisible(true);
//獲取D1單元格的值就是page,也就是當前頁。
cellValue = contentPane.curLGP.getCellValue("D1");
//給這個文本控件復制,用的是JQUERY的方法,可以COPY。
$input.val(cellValue);
var total=contentPane.curLGP.getCellValue("C1");
//把總頁數顯示在第5個控件上,因為這個數值可能是小數,所以判斷下要不要加一處理。
contentPane.toolbar.options.items[4].setText(total);
}
else
{
_g().parameterEl.getWidgetByName('sheet').setValue(2);
//當前sheet需要顯示或者隱藏的 控件
_g().parameterEl.getWidgetByName('當前面板所需要顯示的控件名稱').setVisible(true);
_g().parameterEl.getWidgetByName('當前面板所需要隱藏的控件名稱').setVisible(true);
//獲取D1單元格的值就是page,也就是當前頁。
cellValue = contentPane.curLGP.getCellValue("D1");
//給這個文本控件復制,用的是JQUERY的方法,可以COPY。
$input.val(cellValue);
var total=contentPane.curLGP.getCellValue("C1");
//把總頁數顯示在第5個控件上,因為這個數值可能是小數,所以判斷下要不要加一處理。
contentPane.toolbar.options.items[4].setText(total);
}
});
四、添加模板數據集
1、oracle分頁查詢sql語句:
SELECT * FROM
(
SELECT A.*, ROWNUM RN
FROM (SELECT * FROM?table_name) A
WHERE ROWNUM <= ${page}*${amount}
)
WHERE RN >= ((${page}-1)*${amount})+1
2、查詢總頁數sql語句:
SELECT ceil(count(*)/${amount}) as totalpage FROM?table_name
注意:如果需要添加where條件,一定兩條語句同時添加
五、面板設計
關于查詢面板設計,不多做說明。多sheet切換時改變面板顯示的功能在 (三).4 中的‘加載結束’事件的js代碼中有說明。自行理解應用。