三、添加自定义按钮以及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代码中有说明。自行理解应用。