如何在 laravel 中正确实施 CRUD json 字段

Question

使用以下代码，我为不同数量的产品属性动态添加字段：

$("#addRow").click(function () {
 var html = '';
 html += '<div id="inputFormRow">';
 html += '<div class="input-group mb-3">';
 html += '<input type="text" name="properties[{{i}}][key]" class="form-control m-input ml-3" value="{{ old('properties['.$i.'][key]') }}" placeholder="Key" autocomplete="off">';
 html += '<input type="text" name="properties[{{i}}][value]" class="form-control m-input ml-3" value="{{ old('properties['.$i.'][value]') }}" placeholder="Value" autocomplete="off">';
 html += '<div class="input-group-append ml-3">';
 html += '<button id="removeRow" type="button" class="btn btn-danger">Remove</button>';
 html += '</div>';
 html += '</div>';
        
 $('#newRow').append(html);
});

  // remove row
$('#removeRow').on('click', function () {
 $(this).closest('#inputFormRow').remove();
});

这是我的 html

@isset($product)
 @foreach($product->properties as $i=>$prod)
   <div class="input-group mb-3">
    <input type="text" name="properties[{{ $i }}][key]" value="{{ $prod[$i]['key'] }}" class="form-control m-input ml-3" placeholder="Key" autocomplete="off">
    <input type="text" name="properties[{{ $i }}][value]" value="{{ $prod[$i]['value'] }}" class="form-control m-input ml-3" placeholder="Value" autocomplete="off">
   <div class="input-group-append ml-3">
   <button id="removeRow" type="button" class="btn btn-danger">Remove</button>
   </div>
  </div>
 @endforeach
@endisset

<div id="newRow"></div>
<button id="addRow" type="button" class="btn btn-info">Add field</button>

但是我无法制作动态计数器，您以后如何编辑这些字段？如何add/remove？我找到了一个课程，其中我得到了这个实现的想法，但是为了简单起见，他们采用了固定数量的字段，这很容易，但是如何使用动态字段来实现？

Answer 1

First（用于动态计数器）在 addRow 选择器之前添加此 i 变量。然后在 .click() 函数中增加它

let i = 0;
$("#addRow").click(function () {
    i++;
   // now do your append() code
}

第二个（add/remove行） Html+jquery 添加行的代码已经存在。 (Your Remove code may not work for multiple non-unique id) 要删除一行，请在 <div id="inputFormRow"> 这一行下方添加一个 button 并使用 class 说 dynamic-remove 如下所示：

<div id="inputFormRow">
<button type="button" class="dynamic-remove">Remove</button>

然后添加 jquery 代码用于点击此按钮：

$('.dynamic-remove').click(function(){
    $(this).parent().remove()
})

第三（编辑动态行）使用 foreach 并放置您要附加的 html 代码并填充它们：

@foreach($model_array as $i => $model)
    // your html code populated via $model object
@endforeach

如何在 laravel 中正确实施 CRUD json 字段

How to properly implement CRUD json fields in laravel

crud

laravel