CFDIV和CFCHART,使用动态图表的框架

时间:2012-04-02 21:00:05

标签: coldfusion tabs frames cfchart

我有一个网站,广泛使用CFCHART列出有关我们公司的各种组织统计数据:例如男性与女性团队成员的百分比,EEO合规性的种族遗产细分等。我们必须执行这些操作的旧网站目前正在更新,旧网站使用基于框架的布局来显示图表的内容以及创建时使用的数据和假设。基本框架如下所示:

在左栏中,我们显示了当前硬编码的内容。这使得维护数百个报告成为一场噩梦,因为每个页面都有自己的硬编码HTML选项。我们通过使用一堆不同的CFINCLUDE语句来解决这个问题,这些语句包含在报告中重复使用的相同下拉选项。

我们希望每当用户点击左侧面板框架中当前包含的“GO”按钮时,都会更新中心内容窗格。

我们反复听说过在网站上使用框架会导致很多生产问题。我们还试图使网站尽可能易于维护,因此我们尽可能避免使用JQuery或SPRY等框架。

为了摆脱帧,我们目前正在使用CFLAYOUT来分割新页面。我们有一个嵌套的CFLAYOUTAREA来保存新的左侧窗格和中心内容窗格。在中心内容窗格中,我们有另一个嵌套的CFLAYOUT,其CFL类型的CFLAYOUTAREA具有图表,Excel数据和图表中使用的假设。 (道歉,下拉菜单左边的信息很敏感,我无法显示)


挑战:

![在此输入图片说明] [2]

我正在试图找出如何刷新网站的中心部分而不刷新页面的顶部或左侧,并在用户点击go按钮时仅刷新图形和数据选项卡。我已经搜索了使用Coldfusion查找Javascript函数的interwebs,但似乎没有选项来刷新选项卡。

尝试解决方案:我尝试使用ColdFusion.Layout.createTab()脚本创建选项卡,并将其应用到go侧的图像按钮。这似乎会导致布局出现一些问题,因为这些项是嵌套的......语法不起作用。

我尝试使用Javascript刷新页面,但这会使表单丢失用户在左侧选择的所有选项。

如果在新标签页中创建图表并且数据足够持久以便用户来回点击并查看他们选择用于创建图表的选项,那将会很不错。我期待着你的回复。

2 个答案:

答案 0 :(得分:0)

您可以使用jQuery和load()方法 - http://api.jquery.com/load/。这将允许您将值传递给生成图表的页面,然后在页面上的元素中显示生成的HTML。您甚至可以使用在框架页面中加载的相同的.cfm页面。

答案 1 :(得分:0)

这里的解决方案是在我的页面顶部添加一个脚本,并使用与ColdFusion通常用于将AJAX传递到中心窗格的不同语法。我没有使用CFLAYOUT,而是选择使用更新的DIV。处理DIV刷新的脚本和将事物传递给刷新的DIV的语法如下所示:

<script>
    function refreshDiv() {
    ColdFusion.Ajax.submitForm('graphOptionsFORM','graphStaffPlanningToolShow.cfm',callBack,errorHandler);
    ColdFusion.navigate('graphStaffPlanningToolShow.cfm','graphContent'); 
    }

    function callBack(text) {
        return true;
    }

    function errorHandler(code, msg) {
        alert("Error: " + code + " " + msg);
    }
</script>

页面DIV使用带有绑定的CFDIV标记来刷新每个控件上的AJAX内容:

<CFDIV id="graphContent" 
    bind="url:graphStaffPlanningToolShow.cfm?ORG_STR={ORG_STR}&ORGNUM={ORGNUM}&JOB_DISC={JOB_DISC}&FLSA_STATUS={FLSA_STATUS}&LAB_SITE={LAB_SITE}&HEADCOUNT_OVERRIDE={HEADCOUNT_OVERRIDE}&EXTERNAL_SEPERATIONS={EXTERNAL_SEPERATIONS}&INTERNAL_MOVEMENTS={INTERNAL_MOVEMENTS}" />
</CFDIV>