根据Laravel中所选的选项加载数据[到HTML表中]

yb3bgrhw  于 2023-05-01  发布在  其他
关注(0)|答案(1)|浏览(138)

请勿混淆我不会尝试修改数据库中填写的选择选项的信息。我正在尝试将数据加载到一个HTML表(在视图刀片中),基于从选择中选择的选项,是的,选择选项是从数据库中填充的,但我不希望删除和**“重新填充”**选择选项数据。不,不。

我在Stackoverflow中看到了其他例子,这就是原因。
例如,请参见下表。
实施例1.
表**“汽车”**

id_cars | manufacturer | car_model  | car_year 
1       | Dodge        | Charger RT | 2012     
2       | Chevrolet    | Camaro ZL1 | 2015     
3       | Mini         | Cooper SS  | 2010     
4       | BMW          | M6         | 2016     
5       | BMW          | M3         | 2016
6       | Ferrari      | 308 GTS    | 1977
7       | BMW          | M1         | 1980
8       | Ford         | Mustang GT | 2015

另一张table。表**“汽车商店”**(假设它是一个巨大的商店,它不是真实的)

id_shop | id_car | price  | stock
  1     |   2    | 40000  |  500
  2     |   1    | 50000  |  600
  3     |   4    | 60000  |  300
  4     |   3    | 22000  |  700
  5     |   6    | 32000  |  100
  6     |   8    | 30000  |  200
  7     |   7    | 34000  |  300
  8     |   5    | 45000  |  400

表**“销售额”**(每年、每月x12)

id | car_seller       | id_shop | sales_per_month | total_sales_value_per_year | user_car_seller_id
1  | John Williams    |   3     |    2            | 1440000                    |  1
2  | Emily Smith      |   1     |    3            | 1440000                    |  2
3  | Caroline Brown   |   2     |    5            | 3000000                    |  3
4  | Mia Miller       |   4     |    7            | 1848000                    |  4
5  | Mia Miller       |   5     |    6            | 2304000                    |  4
6  | Mia Miller       |   8     |    12           | 6480000                    |  4
7  | Alexander Thomas |   6     |    3            | 1080000                    |  5
7  | Alexander Thomas |   7     |    7            | 2856000                    |  5

现在看风景。“car_details.blade.php”

<x-app-layout>

  <p class="h5">Sales by model car</p>

  <!--MAYBE COULD WORK WITH A FORM or using JAVASCRIPT, MAYBEE I do not know-->
  <form action="table1">
    @csrf
    <select class="form-control w-full" onchange="fillTable">
      <option value="">Select an option...</option> 
      @foreach ($car_shop as $cars)
        <option>Sales&nbsp;{{ $cars->sales_id }}&nbsp;Cars for sale:{{ $cars->car_name }}</option>
      @endforeach
    </select>
  </form>
    
  <!--THIS IS THE TABLE-->

  <table class="table table-stripped" id="table1">
    <tr>
      <th>Car Name</th>
      <!--OR MAYBE I NEED TO PUT THE FOLLOWING CODE, 
          BUT I THINK It wouldn't work PROBABLY,
          IT WILL THROW ME AN ERROR SIMILAR TO: property [car_name] does not exit on this collection instance
          I think that could be happen-->
      <td>{{ $cars->car_name }}</td>
    </tr>
    <tr>
      <th> Car Year</th>
      <td></td>
    </tr>
    <tr>
      <th>Total sales per Month</th>
      <td></td>
    </tr>
    <tr>
      <th>Total sales value per Year</th>
      <td></td>
    </tr>
  </table>

</x-app-layout>

最后,控制器**“CarShopController”**

use Illuminate\Support\Facades\DB;
use Illuminate\Support\Facades\Auth;
use App\Models\Cars;
use App\Models\Car_Shop;
use App\Models\Sales;

public function show(Cars $car)
{
    // BUT I wouldn't use the $car variable

    $car_sales = DB::TABLE('car_shop')
        ->JOIN('cars', 'car_shop.id_car', '=', 'cars.id_cars')
        ->JOIN('sales', 'car_shop.id_shop', '=', 'sales.id_shop')
        ->selectRAW("sales.id AS sales_id, CONCAT(cars.manufacturer,' ',cars.model) AS 'car_name', cars.car_year, ")
        ->where('sales.user_car_seller_id', '=', Auth::user()->id)->get();

    return view('car.car_details', ['car_shop' => $car_sales]);
}

现在我将解释一切,这是非常类似我的项目我没有把我的项目的代码,因为它太长,控制器,视图和数据库。真的是太长了。虽然如果我只显示一小段代码,它不会被理解

HTML选择选项将显示卖方(用户登录)已售出的汽车。
然后,空表将显示销售的***完整详细信息***,由卖方(用户登录)进行。
我有一个类似的功能项目,一个选择选项与选项取决于用户登录,和一个空表,必须根据选择的选项填充。

  • 卖家希望查看根据所选车型在1年内的总销售额。*这就是我的目标
    我将解释,Mia米勒(见表)有3个销量,选择选项将仅显示Mia Miller的销量,然后Mia Miller将选择Ferrari 308 GTS的销量,下表(<table></table>)将填写所选汽车的数据。

如果Mia米勒选择空选项,则表的数据将被删除,并且它将再次为空。或者,如果Mia米勒选择了其他车型,数据将被替换。
该功能不会重定向到另一个页面,所有的工作在同一个页面上。
现在,我该怎么做?我现在还不知道。这样做让我想起了微软asp中使用的数据表。net。
这就是我正在尝试的,但它是在Laravel和HTML中,我认为JavaScript可以工作,或者表单也可以工作。但我认为,从控制器的东西应该做别的。

重要!显示所有记录和过滤表的结果不是我的目标,它很有用,但我不需要所有记录都显示在一次。

zbdgwd5y

zbdgwd5y1#

提交表单意味着重新加载页面。如果您不想重新加载页面,请使用JavaScript。JavaScript方法不需要表单元素。如果您已经在$car_shop中拥有了所需的所有数据,那么您只需将data-*属性添加到<option>中,并在所选选项更改时使用它们填充下表。

<select id="car-select" class="form-control w-full">
    <option selected disabled>Select an option...</option> 
    @foreach ($car_shop as $cars)
        <option
            data-car-name="{{ $cars->car_name }}"
            data-car-year="{{ $cars->... }}"
            data-car-sales-month="{{ $cars->... }}"
            data-car-sales-year="{{ $cars->... }}">Sales {{ $cars->sales_id }} Cars for sale:{{ $cars->car_name }}</option>
    @endforeach
</select>

<table class="table table-stripped" id="details-table">
    <tr>
        <th>Car Name</th>
        <td id="car-name"></td>
    </tr>
    <tr>
        <th> Car Year</th>
        <td id="car-year"></td>
    </tr>
    <tr>
        <th>Total sales per Month</th>
        <td id="total-sales-month"></td>
    </tr>
    <tr>
        <th>Total sales value per Year</th>
        <td id="total-sales-year"></td>
    </tr>
</table>

<script>
const carSelect = document.getElementById("car-select");

const tableCarName = document.getElementById("car-name");
const tableCarYear = document.getElementById("car-year");
const tableTotalSalesMonth = document.getElementById("total-sales-month");
const tableTotalSalesYear = document.getElementById("total-sales-year");

carSelect.addEventListener('change', event => {
    const selectedOption = event.target.selectedOptions[0];

    tableCarName.innerText = selectedOption.dataset.carName;
    tableCarYear.innerText = selectedOption.dataset.carYear;
    tableTotalSalesMonth.innerText = selectedOption.dataset.carSalesMonth;
    tableTotalSalesYear.innerText = selectedOption.dataset.carSalesYear;
});
</script>

相关问题