Laravel Türkiye Discord Kanalı Forumda kod paylaşılırken dikkat edilmesi gerekenler!Birlikte proje geliştirmek ister misiniz?

İnput ile bootstrap-table kullanımı

gokaydd

Merhabalar;
bootstrap-table ile ayrıntılara tıklandığında ek girdiler almak istiyorum.
Ancak aşağıda ki kodda detailFormatter sadece tıklandığında detay sayfasını oluştur/sil yaptığı için form post edildiğinde verileri çekemiyorum.

Önerileriniz var mıdır?

<table id="table" class="table table-striped" data-toggle="table" data-detail-view="true"
    data-detail-formatter="detailFormatter">
    <thead>
        <tr>
            <th data-field="name">İsim</th>
            <th data-field="email">E-posta</th>
            <th data-field="other1" data-visible="false">Ek Bilgiler</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>
                <input type="text" class="form-control" placeholder="İsim">
            </td>
            <td>
                <input type="text" class="form-control" placeholder="İsim">
            </td>
            <td>
                <div class="row">
                    <div class="col-md-6 mt-2">
                        <input type="text" class="form-control" placeholder="...">
                    </div>
                    <div class="col-md-6 mt-2">
                        <input type="text" class="form-control" placeholder="...">
                    </div>
                </div>
            </td>
        </tr>
    </tbody>
</table>

<script>
    $(function() {
        var $table =  $('#table').bootstrapTable({
            detailView: true,
            detailFormatter: function(index, row) {
                var html = [];
                html.push(row.other1);
                return html.join('');
            },
        });
    });
</script>

gokaydd

Merhabalar;
Çözüm aşağıdaki gibidir.

<table id="myTable" data-toggle="table">
    <thead>
        <tr>
            <th data-field=""></th>
            <th data-field="name">Name</th>
            <th data-field="price">Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td class="add">+</td>
            <td><input type="text" name="" class="form-control"></td>
            <td><input type="text" name="" class="form-control"></td>
        </tr>
        <tr class="detail-view" style="display: none;">
            <td colspan="12">
                <div>
                    <input type="file" class="filepond" name="" id="">
                    <script>FilePond.create(document.querySelector(".filepond"), { labelIdle: "Resminizi Sürükleyip Bırakın (JPG, PNG, GIF (maks. 5MB))", imageResizeMode: "force", imagePreviewHeight: 100, imageCropAspectRatio: "1:1", imageResizeTargetWidth: 100, imageResizeTargetHeight: 100 });</script>
                </div>
            </td>
        </tr>

        <tr>
            <td class="add">+</td>
            <td><input type="text" name="" class="form-control"></td>
            <td><input type="text" name="" class="form-control"></td>
        </tr>
        <tr class="detail-view" style="display: none;">
            <td colspan="12">
                <input type="text" name="" id="">
            </td>
        </tr>
    </tbody>
</table>

<script>
    $(document).ready(function() {
        $('#myTable').bootstrapTable();
        $('#myTable tbody tr td.add').click(function(event) {
            var nextRow = $(this).closest('tr').next('.detail-view');
            nextRow.toggle();
        });
    });
</script>