Question

我有以下情况：

USER可以从列表中选择要在UI表中查看的列（属于数据库中不同表的列（MySQL）。

我们假设这是一个CRM软件。因此，如果用户选择表“联系人”，他还可以从其他表（已加入的表）中选择数据，例如“公司”，“行业”等等。

我创建了一个应该包含每个现有字段的表单（在表和连接表中）和一个 jQuery脚本，它将自动检查相关表当检查某个列内时（对于以后的Join）

所以我的表单看起来像这样（一般形式，没有变量）：

$(document).ready(function()
{
    
    $('input[data-type="child"]').change(function()
    {
        if ($(this).is(':checked'))
        {
            $(this).parents().eq(1).find('input[data-type="parent"]').prop('checked',true);
        }
        else 
        {
            if ($(this).not(':checked') && $(this).siblings(':checked').length == 0)
            {
                $(this).parents().find('input[data-type="parent"]').prop('checked', false);
            }  
        }  
    });
    
    $('div').find('input[data-type="parent"]').change(function()
    {
        var parent = $(this).parent();
        if ($(this).is(':checked'))
        {
            $(parent).children().find('input[data-type="child"]').prop('checked', true)
        }
        else
        {
            $(parent).children().find('input[data-type="child"]').prop('checked', false)
        }
    });
});

body
{
    padding-top: 15px;
}

.parent
{
    padding-top: 20px ;
}

.children
{
    padding-left:15px;
}

div.parent > label
{
    font-size: 25px;
    padding-left: 3px;
}

div.children > label
{
    font-size: 20px;
    padding-left: 3px;
}

div.children > input
{
    margin-top:15px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="parent">
				<input data-type="parent" type="checkbox" value="p1" name="parent[]" value="p2" id="p1"><label for="p1">Table 1 <b><i>(will be hidden in UI)</i></b></label><br>
				<div class="children">
					<input data-type="child" type ="checkbox" name="child[]" value ="c1.1" id="c1.1"><label for="c1.1">Column 1.1</label><br>
					 <input data-type="child" type ="checkbox" name="child[]" value ="c1.2" id="c1.2"><label for="c1.2">Column 1.2</label><br>
					<input data-type="child" type ="checkbox" name="child[]" value ="c1.3" id="c1.3"><label for="c1.3">Column 1.3</label><br>
					<input data-type="child" type ="checkbox" name="child[]" value ="c1.4" id="c1.4"><label for="c1.4">Column 1.4</label><br>
				</div>
			</div>
			<div class="parent">
				<input data-type="parent" type="checkbox" value="p2" name="parent[]" value="p1" id="p2"><label for="p2">Table 2 <b><i>(will be hidden in UI)</i></b></label><br>
				<div class="children">
					<input data-type="child" type ="checkbox" name="child[]" value ="c2.1" id="c2.1"><label for="c2.1">Column 2.1</label><br>
					<input data-type="child" type ="checkbox" name="child[]" value ="c2.2" id="c2.2"><label for="c2.2">Column 2.2</label><br>
					<input data-type="child" type ="checkbox" name="child[]" value ="c2.3" id="c2.3"><label for="c2.3">Column 2.3</label><br>
					<input data-type="child" type ="checkbox" name="child[]" value ="c2.4" id="c2.4"><label for="c2.4">Column 2.4</label><br>
				</div>
			</div>

问题是每个表都有可变数量的列，名称不同。我有一个PHP脚本，它将为我提供表的每个相关列（当然主键和外键除外）。因此，对于这些列中的每一列，我必须添加如下内容：

<input data-type="child" type ="checkbox" name="child[]" value ="column_name" id="column_name"><label for="column_name">Column name</label><br>

对整个HTML使用echo（除此之外，对于父级和div的HTML）是唯一的方法吗？或者是否有其他“更清洁”的方法来调整大型HTML代码到PHP？

感谢。

Answer 1

绝对回声是最糟糕的方式。使用模板引擎，查看Twig：http://twig.sensiolabs.org/

Answer 2

我建议只从PHP创建相同的表单。例如：

 <?php

    function create contactTable($data) {

      foreach( $data as $coumnName ) {

        $checkbox = '<input data-type="child" type ="checkbox" name="child[]" value ='p1.".coumnName."' id='p1.".coumnName."'><label for="column_name">Column name</label>';

        return $checkbox;

      }

   }
 ?>

这有助于您轻松维护和调试HTML。

Answer 3

如果您不想使用外部引擎，则回声将起作用。为了使这个过程更快，我建议为每个需要重复构建的html元素编写一个PHP函数。在伪代码中，您可能希望您的php看起来像这样

$html = ""
For each table {
    $html .= openParent(); //to build your opening tag for the parent div and initial input element.
    $html .= openChildren() //creates the opening tag for your div with class children
        for each child {
            $html .= constructChild($valueToInsert, $tableIndex, $valIndex); //this will build a child input and insert the value you provided to the right places
        }
    $html .= closeParent(); //close the parent div tag
}

echo $html; //do whatever other behavior you need here, special char escaping etc.

我希望这是有道理的。通过将HTML分解为可重用的函数模板，可以提高可读性并减少文件大小。对于像这样的情况，这是我之前使用的方法，我认为它运作得很好。我显然没有充实我的榜样，因为你需要根据你的用例进行调整。

编辑：这是constructChild函数可能看起来像

function constructChild($val, $tIndex, $cIndex)
{
$indexString = "c$tIndex.$cIndex";
    $returnString = "<input data-type='child' type ='checkbox' name='child[]' value ='$indexString' id='$indexString'><label for='$indexString'>$val</label><br>"
}

哪种方法是将大型HTML代码调整为可变数量的PHP变量的最有效/最优雅的方法？

3 个答案: