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

これを試して.. 

<?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 に答える
1

これを行う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ロジックをまとめました。これは、colorsテーブルのフィールドを取得し、それらを元のテーブルに次のサイズで置き換え/追加します。

$("#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]。これが更新されたフィドルです。この例では、サイズを無効にして色のみを表示する場合は処理されませんが、（組織のカラーテーブルがまだ存在するため）実装に問題はありません。

于 2013-01-10T08:10:28.120 に答える