知识库

获得永久免费授权

最新文章

快逸视频教程

快逸做的更好

您的位置:首页 > 知识库 > 设计基础 > 如何通过JS调用快逸报表的下拉日历

如何通过JS调用快逸报表的下拉日历

下拉日历是快逸报表为日期填报提供的一个便捷功能,可以让用户快速准确的填写日期信息,避免了手动填写所产生的的格式误差和数值误差。但是这么实用的功能如果仅仅只能在报表区域才能使用未免有些浪费,用户的整体项目中报表只是其中的一部分,非报表区域很多时候也会用到下拉日历,总不能让用户自己再去费劲找一个日历控件来用吧?费时而且和报表风格还不统一。

于是就引出了标题中的需求,如何在项目中调用快逸的下拉日历,下文就来一步步给大家解决这个需求。

实际上,在快逸报表中下拉日历是调用了一个由快逸提供的JS:calendar.js,因此,非报表区域的调用这个js就可以了,比如我们自己定义一个onclick事件来调用快逸的下拉日历JS。同时,也可以自定义数据的格式。

下面就以一个例子(格式:选择月份)介绍调用快逸下拉日历的实现过程。

实现思路:

1, 引入快逸下拉日历自定义JS

2, 在Form表单内通过onclick事件调用下拉日历控件

 

具体实现步骤如下:

第一步:在需要调用控件的页面jsp引入快逸下拉日历自定义JS

引入代码如下:

<script language=javascript

src=”http://127.0.0.1:6001/demo/reportServlet?action=10&file=%2Fcom%2Frunqian%2Freport4%2Finput%2Fcalendar.js” mce_src=”http://127.0.0.1:6001/demo/reportServlet?action=10&file=%2Fcom%2Frunqian%2Freport4%2Finput%2Fcalendar.js”>

</script>

//创建快逸报表下拉日历控件实例对象

<script language=javascript>_createRunqianCalendar();</script>

这里要注意的是,该JS要在调用它的文本框的下面引入,否则就会因为找不到快逸自带的下拉日历JS定义的对象而报”不可识别的对象:_runqianCalender”错误。

第二步:在Form表单中定义调用下拉日历的文本框

实现代码如下:

<form name=from1>

选择月份:

<!-调用快逸下拉日历,并设置日期格式为年月”yyyy-MM”–>

<input name=reportMonth onClick=”_runqianCalendar.dateFormat=’yyyy-MM’;

_runqianCalendar.type= ‘month’;_showCalendar();” >

</form>

到此,我们就简单实现了在Form表单文本框中调用快逸报表下拉日历的功能,接下来看一下例子实现的效果:

Form表单在web显示效果

快逸报表下拉日历调用1.PNG

单击文本框,调用下拉日历效果

快逸报表下拉日历调用2.PNG

选择日期值后的效果

快逸报表下拉日历调用3.PNG

例子中完整的JSP如下:

<%@ page contentType=”text/html;charset=GBK” %>

<%@ taglib uri=”/WEB-INF/runqianReport4.tld” prefix=”report” %>

<html>

<body>

<!-调用下拉日历控件的form表单定义(文本框的onclick事件)–>

<form name=from1>

选择月份:

<input name=reportMonth onClick=”_runqianCalendar.dateFormat=’yyyy-MM’;

_runqianCalendar.type= ‘month’;_showCalendar();”>

</form>

<!-引入下拉日历JS–>

<script language=javascript

src=”http://127.0.0.1:6001/demo/reportServlet?action=10&file=%2Fcom%2Frunqian%2Freport4%2Finput%2Fcalendar.js” mce_src=”http://127.0.0.1:6001/demo/reportServlet?action=10&file=%2Fcom%2Frunqian%2Freport4%2Finput%2Fcalendar.js”>

</script>

<!-引入创建下拉日历控件对象的JS–>

<script language=javascript>_createRunqianCalendar();</script>

</body>

</html>

 

总结:由上面的例子可以看出,快逸报表再设计层面上是非常灵活的,可以轻松的直接运用快逸提供的一些向导、可视化界面进行设计,也可以根据自己的需要通过少量的代码来实现更加个性化的需求。

浏览次数:0 ; 发布日期:2009/12/15