时间戳

首页 > 解决方案 > 在数据库中插入芯片并在 Laravel 8 和 Materialize CSS 中从数据库中显示它

laravel - 在数据库中插入芯片并在 Laravel 8 和 Materialize CSS 中从数据库中显示它

问题描述

我想在数据库中一次插入多个芯片。

这是我的添加任务页面，有一个选择字段。如果我选中该复选框，则可以看到另一个字段。要输入筹码，我可以为一个选择框输入多个筹码。如何将这些筹码输入数据库？

我还想以复选框的形式向用户展示这些芯片。如果我使用选择框中的复选框并输入多个筹码，那么这些多个筹码将成为用户侧的复选框。我怎样才能做到这一点？

<div class="col-md-12 grid-margin stretch-card">
    <div class="card">
        <div class="card-body">
        <h4 class="card-title">Add Task</h4>
            <form class="forms-sample" action="{{ route('store.task', $checklist->id) }}" method="POST">
                @csrf
                <div class="form-group">
                    <label for="exampleInputUsername1">Task Name</label>
                    <input name="name" type="text" class="form-control" id="name" required>
                    <span id="task" class="text-danger"></span>
                    @error('name')
                        <span class="text-danger">{{ $message }}</span>
                    @enderror
                </div>

                <div class="form-group">
                    <label for="exampleTextarea1">Description</label>
                    <textarea name="description" class="form-control" name="summernote" id="summernote1" required></textarea>
                </div>
                @error('description')
                    <span class="text-danger">{{ $message }}</span>
                @enderror

                <div class="row">
                    <div class="col-md-6">
                        <select class="form-control" id="select" required>
                            <option disabled="" selected="">--Select Option--</option>
                            <option value="text">Text</option>
                            <option value="textarea">Text Area</option>
                            <option value="checkbox">Check Box</option>
                            <option value="radio">Radio</option>
                        </select>
                    </div>

                    <div class="col-md-6">
                        <input name="name" type="text" class="form-control" id="name1" style="display: none">
                        <textarea name="description" class="form-control" id="textbox" style="display: none"></textarea>
                        <div class="chips" id="chips" style="display: none">
                            <input class="custom-class">
                        </div>
                        <div class="chips" id="chips1" style="display: none">
                            <input class="custom-class">
                        </div>
                    </div>
                </div>
                <button name="submit" type="submit" class="btn btn-primary mr-2">Add</button>
            </form>
        </div>
    </div>
</div>

我的任务表包含以下字段： id、name、description和checklist_id

我应该添加哪个字段以及如何将这些筹码插入数据库并以复选框的形式显示？

标签： laravellaravel-8chips

解决方案

我设法将芯片数据存储在数据库中。我将数据传递给按钮的“单击”事件上的隐藏 div，如下所示：

<script>
    $(document).ready(function(){

        $("#button").on("click", function() {

            var chips = M.Chips.getInstance($('.chips')).chipsData;
            var sendChips = JSON.stringify(chips);
            $('#chipss').val(sendChips);
        });
    });
</script>

空的 div 是：

<input id="chipss" type="hidden" name="chip3">

将此数据传递到数据库：

Task::insert([
          'name' => $request->name,
          'description' => $request->description,
          'checklist_id' => $checklist_id,
          'options' => $request->select,
          'created_at' => Carbon::now(),
          'created_by' => session('firstname'),
          'value' => $request->chip3
      ]);

在您的任务模式中，您必须将其转换为数组：

protected $casts = [
    'value' => 'array'
];

而且您的值字段必须是数据库中的 json，请务必添加 json 类型的值字段。

为了显示这些数据，我想分享以下代码：

<div class="form-group">
    @foreach(json_decode($work->value,true) as $value)
    <div class="form-check form-check-primary">
        <label class="form-check-label">
        <input type="checkbox" class="form-check-input" name="value" value="1"> {{ $value['tag'] }} <i class="input-helper"></i></label>
    </div>
    @endforeach
</div>

这将只显示您插入的筹码数据。

推荐阅读