Question

首先，如果我需要更好地表达这一点以便更有意义，请告诉我。感谢阅读。

我目前正在开发一个创建大量表单元素的网页，其中每个表单元素的id，name和value取决于之前的一些用户选择，如下例所示，其中id，name和value依赖于在$ arr当时包含的任何值上，

?>
<div id='<?= $arr['param_name'] ?>Div' class='dynamicDiv'>
    <b><?= $arr['param_desc'] ?></b>
    <br/>
    <input type='Text' id='<?= $arr['param_name'] ?>' 
        name='<?= $arr['param_name'] ?>'
        value='<?= $arr['default_val'] ?>' class='dynamicTextBox'>
</div>
<?php

那部分很好，但是有很多提交按钮，它们是动态生成的，但都是硬编码的。这些输入按钮的jQuery是硬编码的，如下例所示，

<input type='Submit' value=' Query Data' name='funcSearch' 
    onclick="queryAngle(('<?php echo $result[0]['query_id'] ?>'),('<?php echo $_GET['schema'] ?>'),
    ($('#firstFrame').val()), ($('#lastFrame').val()),($('#skip').val()), ($('#atomID1').val()),  
    ($('#atomID2').val()), ($('#atomID3').val())); false;" class='dynamicParamButton'><br/><br/>

因为有十几个这样的提交按钮，每个都是硬编码的，并且大多数至少是这个按钮尺寸的两倍，所以它变得相当复杂。我想采取某种面向对象的方法来使这个东西可以维护，但是需要一些帮助来确定从哪里开始。有一个好的开始吗？也许我应该在PHP中生成一个提交按钮作为字符串，或者有一些jQuery功能来解决这个问题？

为了完整性，上面粘贴的示例中的提交按钮将值发送到javascript文件中的以下函数，

function queryAngle(query_id, schema, firstFrame, lastFrame, frameSkip, atomID1, atomID2, atomID3) {
if (query_id === "") {
    $("#QueryInfo").html("<p>Error Please enter valid arguments</p>");
    return;
}
$("#waiting").show(500);
$("#interface").hide(0);

$.post('./function_files/angleFunction.php',
    {
        query_id: query_id,
        simschema: schema,
        firstFrame: firstFrame,
        lastFrame: lastFrame,
        frameSkip: frameSkip,
        atomID1: atomID1,
        atomID2: atomID2,
        atomID3: atomID3
    },

    function (data) {
        showResultReady(data);
    });
}

但是这些函数也有十几个，比如这里显示的queryAngle，还有queryDensity，queryTorsion等等。它们都基本上做同样的事情 - 分别将值传递给文件，angleFunction.php，densityFunction.php，torsionFunction.php，并且有一种方法可以为这个带来一些抽象或面向对象的透视图。。感谢您的帮助或想法。

Answer 1

根据我的经验，没有任何超级简单易用的动态生成JavaScript的方法，你通常会在这里或那里找到丑陋的代码。

也就是说，动态生成表单似乎是表单库的工作。我想大多数框架都提供了这样的东西，因为它是一个非常常见的任务。你没有说明你使用的是哪个框架，如果你没有使用它，我的第一个建议就是开始使用它。

我自己和Zend_Form合作过，他们的工作非常好，只需要一点点编码就可以获得你想要的工具。例如，Zend_Form用于使用Dijit的表单

创建一个简单的自动完成

$element = new Zend_Dojo_Form_Element_FilteringSelect($variable);
$element->setStoreId($variable . "_store");
$element->setStoreType("dojox.data.QueryReadStore");
$element->setStoreParams(array("url" => "url/autocomplete-key-value?company=1"));

这不是嵌套元素，但您可以了解它们的工作原理。如果你发布了你正在使用的框架，你可能会得到更好的答案。

我希望它有所帮助！

动态生成Javascript提交按钮

1 个答案: