1

我正在构建一个类似于发票的 ColdFusion 10 表单。它包含三列。

第一列是一个筛选器，用于选择所有可用产品的子集：它包含从产品类别查询构建的 cfselect。

第二列是产品本身：它包含绑定到包含产品列表的表的 cfselect，仅显示匹配类别中的产品。

第三列是产品价格：它包含与产品价格绑定的 cfdiv，在同一个表中。

我正在寻找一种计算所选商品总价（总和）的方法。我特别在寻找要附加的“某些东西已经改变”触发器。

我看到的解决方案：

  • 总数是另一个 BIND，取决于每个项目的价格。有点难看，因为这将在服务器端完成，即使一个简单的 JS 可以做到。
  • 在 cfselect 上使用 onChange。在这种情况下，如何确保在计算总价之前已经执行了价格 BIND？
  • 在cfselect 上使用onChange，并使用XMLHttpRequest 直接查询该脚本中的价格（即删除价格列上的BIND）。我写了一些代码来做到这一点，它似乎工作，但我仍然需要将其更改为异步请求，并以独立于浏览器的方式解码返回。这似乎比需要的复杂得多。
  • 在 cfdiv 上使用（不存在的）onChange。这将是最简单的......但那个钩子不存在。
  • 使用 cfselect/cfinput 代替第三列中的 cfdiv，并使用 css 作弊使其看起来像 div。丑陋的。
  • 与以前相同，但隐藏，并保持现有 cfdiv 可见。可能是目前最好的选择，但所有查询都将执行两次。我确信有更好的方法。
  • 使用计时器。我宁愿避免这种情况。

我错过了什么？

谢谢。

4

1 回答 1

0

回答我自己的问题，以防它可以帮助别人。

我找不到什么，这个例子可以说明

  • 简单 CF BIND 的粗略 jQuery 等价物
  • $.get() 的例子，它实际上对下载的数据做一些事情，而不仅仅是 alert() 它

$.get() 绝对不是介绍 jQuery 的推荐方式。

这可能会让“专业人士”惊恐地大喊大叫。它不应该被认为是复制粘贴代码，只是提示想办法做到这一点。

它实际上已经从我的工作版本中进行了强烈编辑，因此它可能包含虚拟拼写错误。

好的，足够的免责声明。

function dollarize (price) {
    // unrelated code - just ensure that the price is always displayed with two decimals
}

function downloadPrice(url, DOM_Item_ID) {
    $.get( url,
           function(data,status){           // keep in mind that this function is called ASYNCHRONOUSLY
                //alert(data);  // typical data received, for a $1 item:  <wddxPacket version='1.0'><header/><data><string>1</string></data></wddxPacket>
                var payload = $(data).find('string').text();
                $('##' + DOM_Item_ID).text('$' + dollarize(parseFloat(payload)));   <!--- normally a single # - doubled since in a <cfoutput> --->
                UpdateTotalPrice();
          },
          "xml");
}

function UpdateTotalPrice() {
    var price = 0;
    for(var e=1;e<=#MAX_NUMBER_ITEM#;e++)
    {
        var node = document.getElementById("Item_"+e);
        var ID = node.selectedIndex;
        if(ID != 0) {
            prix += parseFloat(document.getElementById("Price_"+e).childNodes[0].nodeValue.substring(1));       // substring(1): removes the $ added above
        }
    }
    document.getElementById('TotalPrice').childNodes[0].nodeValue = '$' + dollarize(prix);
}

function onChangeItem(e) {
    var ID = document.getElementById("Item_"+e).value;
    downloadPrice("#application.CFC_PATH#gestion-equipements.cfc?method=trouvePrixStandardEquipement&ID="+ID,
            "Price_"+e);
}

第二栏：

<cfloop from="1" to="#MAX_NUMBER_ITEM#" index="e">
    ...
        <cfselect Name="Item_#e#" ID="Item_#e#" bind="........." bindonload="yes" queryPosition="below" onChange="onChangeItem(#e#)"><option value="0">--</cfselect>

第 3 列中的每个价格项目：

<cfdiv ID="Price_#e#" align="right">$0.00</cfdiv>       <!--- content of the div (i.e. $0.00) must NOT be empty, otherwise childNodes[0] above will fail --->

总价：

<cfdiv ID="TotalPrice">$0.00</cfdiv>
于 2013-08-03T02:33:31.900 回答