Question

我创建了一个销售组件的网站。每个组件有9个产品。如何添加一个下拉按钮，可以按价格或名称排列产品？

    <?php
 $query = "SELECT * FROM products ORDER BY id ASC";
 $result = mysqli_query($connect, $query);
 if(mysqli_num_rows($result) > 0)
 {
 while($row = mysqli_fetch_array($result))
 {
 ?>
 <div class="col-md-4">
 <form method="post" action="shop.php?action=add&id=<?php echo $row["id"]; ?>">
 <div style="border: 1px solid #eaeaec; margin: -1px 19px 3px -1px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); padding:10px;" align="center">
 <h5 class="text-info"><?php echo $row["p_name"]; ?></h5>
 <img src="<?php echo $row["image"]; ?>" class="img-responsive">
 <h5 class="text-danger">$ <?php echo $row["price"]; ?></h5>
 <div class="col-xs-8">
 <input type="text" name="quantity" class="form-control" value="1">

 </div>
 <input type="hidden" name="hidden_name" value="<?php echo $row["p_name"]; ?>">
 <input type="hidden" name="hidden_price" value="<?php echo $row["price"]; ?>">
 <input type="submit" name="add" class="btn btn-primary" value="Add to Cart" align="right">

 </div>
 </form>
 </div>
 <?php
 }
 }
 ?>

 <?php
 }
 ?>
 </div>
 </div>

Answer 1

也许你也可以使用Javascript并添加一些选择框，让用户有机会选择他们想要排序的属性，以及ASC或DESC中的排序方向。下面的代码片段可能会有所启发：

<?php
    $query      = "SELECT * FROM products ORDER BY id ASC";
    $result     = mysqli_query($connect, $query);

    // CREATE VARIABLES TO HOLD THE SELECT OPTIONS VALUES FOR THE SORTING...
    $sortParam1 = 'price';
    $sortParam2 = 'name';
    $sortDir1   = 'ASC';
    $sortDir2   = 'DESC';

    // START BUILDING THE OUTPUT...
    $output     = "<div class='col-md-12'>";         //<== WRAPPER FOR SORING & DIRECTION BOXES
    $output    .= "<form method='post' action='' id='sorting_form'>"; //<== FORM FOR THE SORTING: SUBMITS TO SAME SCRIPT

    // SORTING
    $output    .= "<div class='col-md-6'>";
    $output    .= "<select name='sorting' id='sorting'class='form-control'>";
    $output    .= "<option value='id'>Sorting</option>";
    $output    .= "<option value='{$sortParam1}'>{$sortParam1}</option>";
    $output    .= "<option value='{$sortParam2}'>{$sortParam2}</option>";
    $output    .= "</select>";
    $output    .= "</div>";

    // DIRECTION
    $output    .= "<div class='col-md-6'>";
    $output    .= "<select name='direction' id='direction'class='form-control'>";
    $output    .= "<option value='ASC'>Sort Direction</option>";
    $output    .= "<option value='{$sortDir1}'>{$sortDir1}</option>";
    $output    .= "<option value='{$sortDir2}'>{$sortDir2}</option>";
    $output    .= "</select>";
    $output    .= "</div>";

    $output    .= "</form>";        //<== CLOSE SORTING FORM...
    $output    .= "</div>";         //<== CLOSE WRAPPER...
    $rowData   = "";

    // WE USE JQUERY BELOW TO SUBMIT THE SORTING FORM ONCE USER
    // SELECTS ANY OPTION FROM.... SO WE NOW HANDLE THAT SCENARIO HERE USING PHP
    if(isset($_POST['sorting']) || isset($_POST['direction']) ){
        $sortDirection  = isset($_POST['direction'])    ? $_POST['direction']   : $sortDir1;    // DEFAULTS TO ASC
        $sortField      = isset($_POST['sorting'])      ? $_POST['sorting']     : 'id';         // DEFAULTS TO id

        $query          = "SELECT * FROM products ORDER BY {$sortField} {$sortDirection}";
        $result         = mysqli_query($connect, $query);
    }

    if(mysqli_num_rows($result) > 0){
        while($row = mysqli_fetch_array($result))   {
            // USE HEREDOC TO CAPTURE THE DATA WITHIN THE LOOP...
            $rowData  .=<<<R_DATA
            <div class="col-md-4">
                <form method="post" action="shop.php?action=add&id={$row["id"]}">
                    <div style="border: 1px solid #eaeaec; margin: -1px 19px 3px -1px; box-shadow: 0 1px 2px rgba(0,0,0,0.05); padding:10px;" align="center">
                        <h5 class="text-info">{$row["p_name"]}</h5>
                        <img src="{$row["image"]}" class="img-responsive">
                        <h5 class="text-danger">\$ {$row["price"]}</h5>
                        <div class="col-xs-8">
                            <input type="text" name="quantity" class="form-control" value="1">
                        </div>
                        <input type="hidden" name="hidden_name" value="{$row["p_name"]}">
                        <input type="hidden" name="hidden_price" value={$row["price"]}">
                        <input type="submit" name="add" class="btn btn-primary" value="Add to Cart" align="right">
                    </div>
                </form>
            </div>
R_DATA;

        } // CLOSE WHILE LOOP
    } // CLOSE IF CONDITIONAL LOGIC

    // ADD THE DATA GATHERED FROM WHILE LOOP ($rowData) TO THE OUTPUT: $output
    $output  .= $rowData;
    $output  .= "</div>\n</div>";  // THESE APPEAR IN YOUR CODE BUT SEEM IRRELEVANT HERE...

    //  DISPLAY THE OUTPUT
    echo $output;

?>
<!-- ENTER JAVASCRIPT: JQUERY -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js" integrity="sha384-I6F5OKECLVtK/BL+8iSLDEHowSAfUo76ZL9+kGAgTRdiByINKJaqTPH/QVNS1VDb" crossorigin="anonymous"></script>
<script type="text/javascript">
    (function($){
        $(document).ready(function(e){
            var sortForm        = $("#sorting_form");
            var sortBox         = $("#sorting");
            var directionBox    = $("#direction");
            var bothBoxes       = sortBox.add(directionBox);

            // IF EITHER OF THE SORTING OR DIRECTION IS CHANGED
            // JUST SUBMIT THE FORM
            bothBoxes.on("change", function(evt){
                sortForm.submit();
            });

        });
    })(jQuery);
</script>

添加按价格排序并按名称排序

1 个答案: