0

我的复选框示例http://jsfiddle.net/8PVZ5/1/

当我检查sizes输出将是这样的

在此处输入图像描述

如果我检查了两个或多个变体，我可以将它们组合成这样。

在此处输入图像描述

我的数组输出

Array
(
    [0] => Array
        (
            [id] => 1
            [name] => Sizes
            [parent] => 0
            [children] => Array
                (
                    [0] => Array
                        (
                            [id] => 2
                            [name] => S
                            [parent] => 1
                        )

                    [1] => Array
                        (
                            [id] => 3
                            [name] => L
                            [parent] => 1
                        )

                    [2] => Array
                        (
                            [id] => 4
                            [name] => M
                            [parent] => 1
                        )

                )

        )

    [1] => Array
        (
            [id] => 5
            [name] => Colors
            [parent] => 0
            [children] => Array
                (
                    [0] => Array
                        (
                            [id] => 6
                            [name] => Blue
                            [parent] => 5
                        )

                    [1] => Array
                        (
                            [id] => 7
                            [name] => Yellow
                            [parent] => 5
                        )

                )

        )

)
4

3 回答 3

1

这是一种方法：

  • 首先创建一个包含所有颜色的数组

  • 循环遍历所有尺寸并为每个尺寸添加颜色（参见下面的代码）

    $colors = array();
$colorsChildren = $yourColorArray['children'];
foreach($colorsChildren as $color): // loop through all the individual color options
    $colors[] = $color; //add the color and it's data to the array;
endforeach;

$combinedArray = array();
$sizeChildren = $yourSizeArray['children'];
foreach($sizeChildren as $size):
    $size['colors'] = $colors; // add all the colors to each size
    $combinedArray[] = $size; // add the size (with the colors) to the new array
endforeach;
于 2013-01-10T07:45:17.373 回答
1

我整理了一个 jQuery 逻辑，它 greps 您的颜色表的字段并将它们替换/附加到原始表的大小：

$("#v1").on("click", function () {
    if (this.checked) {
        $(".v1").show()
    } else {
        $(".v1").hide()
    }
});
$("#v2").on("click", function () {
    if (this.checked) {
        if(!$('.v1').hasClass('colorfields')) {
            $('.v1').addClass('colorfields');
            var $add = $('.v2').find('tr:gt(0)');
            $('.v1').find('tr:gt(0)').each(function() {
                var $row = $(this),
                    size = $row.find('td:eq(0)').text();
                $add.clone().each(function() {
                    var $newRow = $(this);
                    $newRow.insertAfter($row).addClass('with-col');
                    $newRow.prepend('<td>'+size+'</td>');
                    $newRow.find('input').each(function() {
                        var fieldname = $(this).attr('name').toString(),
                        newName = fieldname.replace(/field/g,'field['+size.toLowerCase()+']');
                        $(this).attr('name',newName);
                    });
                });
                $('.v1').find('tr:eq(0) td:eq(0)').attr('colspan',7);
                $row.addClass('no-col').hide();
            }); 
        } else { 
            $('.no-col').hide();
            $('.with-col').show();
        }
    } else {
        $('.no-col').show();
        $('.with-col').hide();
    }
});

我还重命名了您的字段，以便在后端获得一个关联数组，这更容易处理。字段名称如下所示：field[SIZECODE][FIELDID]，或者，如果颜色表可见：field[SIZECODE][COLORCODE][FIELDID]。这是更新的小提琴。此示例不处理停用尺寸并仅显示颜色的情况，但是（因为 org 颜色表仍然存在）实施起来应该没有问题。

于 2013-01-10T08:10:28.120 回答
1

尝试这个.. 

<?php
//Suppose your array is like 
$tempArray = array(
    "0" => Array
        (
        "id" => 1,
        "name" => "Sizes",
        "parent" => 0,
        "children" => Array(
            "0" => Array("id" => 2, "name" => "S", "parent" => 1),
            "1" => Array("id" => 3, "name" => "L", "parent" => 1),
            "2" => Array("id" => 4, "name" => "M", "parent" => 1)
        )
    ),
    "1" => Array
        (
        "id" => 5,
        "name" => "Colors",
        "parent" => 0,
        "children" => Array(
            "0" => Array("id" => 6, "name" => "Blue", "parent" => 5),
            "1" => Array("id" => 7, "name" => "Yellow", "parent" => 5)
        )
    )
);
?>
<!-- CSS -->
<style>
    table {border:1px solid #ddd; margin:5px; width:400px;}
td {border:1px solid #ddd; padding:5px;}
td.label { width:50px;}
.sizes,.colors,.colors_sizes{display: none;}
</style>

    <!-- Script required -->
    <script type="text/javascript" src="jquery.js"></script>

    <script>
        $(document).ready(function(){
    $("#v1").click(function () {   
        if (this.checked) {
                $(".table").show();
                if($("#v2").attr("checked")==true){
                      $(".colors_sizes").show();
                      $(".colors").hide();
                        $(".sizes").hide(); 
                }else{
                    $(".sizes").show();
                    $(".colors").hide();
                    $(".colors_sizes").hide();            
                }

        }else{
                if($("#v2").attr("checked")==true){
                    $(".table").show();
                    $(".colors_sizes").hide();
                    $(".sizes").hide();
                    $(".colors").show();                
                }else{
                $(".table").hide();
                }
            }
    });

    $("#v2").click(function () {     
        if (this.checked) {
                $(".table").show();
                if($("#v1").attr("checked")==true){
                      $(".colors_sizes").show();
                       $(".colors").hide();
                        $(".sizes").hide(); 
                }else{
                    $(".colors").show();
                    $(".sizes").hide(); 
                    $(".colors_sizes").hide();               
                }

        }else{
                if($("#v1").attr("checked")==true){
                    $(".table").show();
                    $(".colors_sizes").hide();
                    $(".colors").hide();
                    $(".sizes").show();                
                }else{
                $(".table").hide();
                }
            }
    });
    });
    </script>

    <!-- HTML and PHP code -->
    Variations : 
    <input id="v1" value="v1" type="checkbox" name="v1"> Sizes
    <input id="v2" value="v2" type="checkbox" name="v2"> Colors
    <table cellspacing="0" class="table" style="display:none;">
        <?php 
        foreach($tempArray['0']['children'] as $sizes){?>

            <tr class="sizes">
                <td><?php echo $sizes['name']; ?></td>             
                <td><input type="checkbox"/>Execute</td>
            </tr>
          <?php foreach($tempArray['1']['children'] as $colors){ ?>
            <tr class="colors">
                <td><?php echo $colors['name']; ?></td>    
                <td><input type="checkbox"/>Execute</td>
            </tr>
            <tr class="colors_sizes">
                <td><?php echo $sizes['name']; ?></td>
                <td><?php echo $colors['name']; ?></td>    
                <td><input type="checkbox"/>Execute</td>
            </tr>
            <?php } ?>
        <?php } ?>
    </table>

希望这会帮助你。

于 2013-01-10T08:25:36.197 回答