Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- Напиши с нуля функцию editRow, которая будет создавать модальное окно, как это делать описано тут https://getbootstrap.com/docs/5.0/components/modal/. Модальное окно должно вставляться после <div class="page-content">, а после закрытия окна, оно должно удаляться из dom. Что должно быть в модальном окне и как оно будет устроено. Само модальное окно из себя представляет редактор строки в таблице. При открытии модального окна внутри него будут создаваться input или же select для редактирования колонок данной строчки, а создать input и select, или нет, для данной колонки можно выяснить через проверку наличия input или select в thead во второй tr, где если есть input-ы и select-ы, то только в этом случае добавлять их в модальное окно. <thead class="table-light" >
- <tr>
- <th style = "width: 70px;">IMG</th>
- <th style = "width: 4%;" class="sortable noselect" onclick="sendSortRequest('id', this)">#ID <i style = "color: #0caadc;"></i></th>
- <th style = "width: 4%;" class="sortable noselect" onclick="sendSortRequest('itemLabel', this)">Метка <i style = "color: #0caadc;"></i></th>
- <th style = "width: 20%;" class="sortable noselect" onclick="sendSortRequest('itemName', this)">Название <i style = "color: #0caadc;"></i></th>
- <th style = "width: 4%;" class="sortable noselect" onclick="sendSortRequest('itemDamage', this)">Damage <i style = "color: #0caadc;"></i></th>
- <th style = "width: 20%;" class="sortable noselect" onclick="sendSortRequest('nbt_hash', this)">nbt_hash <i style = "color: #0caadc;"></i></th>
- <th style = "width: 20%;" class="sortable noselect" onclick="sendSortRequest('itemmaxSize', this)">Размер стака <i style = "color: #0caadc;"></i></th>
- <th></th>
- </tr>
- <tr >
- <th style = "width: 70px;"> <select class="select_search_id"><option value="3">NaN</option><option value="1">Забанен</option><option value="0">Бан снят</option></select></th>
- <th><input style = "width: 80px;" class="input_search input_search_id"></th>
- <th><input style = "width: 100%;" class="input_search input_search_itemLabel"></th>
- <th><input class="input_search input_search_itemName"></th>
- <th><input style = "width: 80px;" class="input_search input_search_itemDamage"></th>
- <th><input class="input_search input_search_nbt_hash"> </th>
- <th><input style = "width: 80px;" class="input_search input_search_itemmaxSize"></th>
- <th><div class="btn-sm btn btn-secondary fas fa-filter" onclick="clearAllFilters()"></div></th>
- </tr>
- </thead>. На каждый input в модальном окне, будет повешан класс такого вида, input_edit input_edit_тип-данных, где input_edit просто класс для стиля, а input_edit_тип-данных, то же самое и с select, но вместо input_edit_тип-данных класс будет называться select_edit_тип-данных, класс предназначен для идентификации что это за input или select, при этом название тип-данных будет браться из thead, из th в соответствующем input или select просто тебе нужно будет отделить от допустим класса input_search_nbt_hash, вот эту часть input_search_ и за место неё подставить input_edit_nbt_hash или же если соответствовать моему описан ию это будет input_edit_тип-данных, то есть получаеться это наследование класса от input в thead, как и для select, с переименованием что бы соответствовать контексту. Так же заголовок над каждым input и над каждый select должен браться из thead Из перовй группы tr, tr по сути 2, в первой tr в th храняться названия колонок, а во второй tr, в th сами input-ы, к примеру itemLabel это Метка. Сами td как target в row, можно будет получить, обратившись по row-1 где 1 это id строки в mysql, но в данном контексте это row-1 это id tr. Вот сам код одного row '
- <tr id="row-' . $val['id'] . '" class="m-hide bg">
- <td class="m-none CR" style = "width: 40px;">
- <div class="image-area">
- <img class="m-img" src="' . $image_link . '" onclick = "image_uploader(\'' . $val['id'] . '\')" />
- </div>
- </td>
- <td class="m-none CR" style = "width: 80px;">' . $val['id'] . '</td>
- <td class="m-none CR" style = "width: 20%;">' . $val['itemLabel'] . '</td>
- <td class="m-t-td CR" style = "width: 20%;">' . $val['itemName'] . '</td>
- <td class="m-t-td CR" >' . $val['itemDamage'] . '</td>
- <td class="m-t-td CR" style = "width: 20%;">' . ($val['nbt_hash'] == NULL ? "___" : $val['nbt_hash']) . '</td>
- <td class="m-t-td CR" >' . $val['itemmaxSize'] . '</td>
- <td class="m-t-td CR" ><a onclick = "editRow(this)" class="btn btn-outline-secondary btn-sm save" title="Редактировать"> <i class="far fa-edit "></i> </a>
- </td>
- </tr>'; Сама функция editRow вызываеться через нажатие на кнопку, посредством события onclick с аргументом this. Сам новый элемент row генерируеться сервером, php стороной, возвращая тоже самое что я кидал выше, только без <tr id="row-' . $val['id'] . '" class="m-hide bg">, а лишь возвращает содержимое tr. Пускай при нажатии на кнопку сохранить изменения вызваеться функция по отправки данных на сервер, с методом UPDATE.
- sendHttpRequest('UPDATE', "/api/?resource=base/items", rowData, function (status, data) {
- if (status === 'ERROR') {
- console.error(data);
- } else {
- }
- }); объект rowData,содержит в себе все поля input и их значения, и каждый ключ в rowData, его название берёться из класса input, путём отсечения input_edit в input_edit_тип-данных, где тип-данных будет ключём для rowData. А в ответ от сервера прилетает html код, с новым содержимым row, этот код надо будет перезаписать соответствующие содержимое под tr с соответствующим row-АЙДИ. Так же я думаю не будет лишним добавить что содержимое tbody яполучаю от сервера, в виде html кода. Так же учти что! input находиться ВНУТРИ th. Так же я хочу что бы модальное окно было по центру окна браузера! Вот пример рабочего кода, где моадльное окно по центру экрана=<div class="modal-dialog modal-dialog-centered">
- тут остальной код
- </div>. И так же учти, что из списка классов в class="input_search input_search_id"> надо удалить всё кроме класса с input_search, это можно сделать примерно вот так const inputType = inputElement.className.split(' ').filter(className => className.includes('input_search_')).map(className => className.replace('input_search_', 'input_edit_')).join(' ');. Так же учти что есть и select, то есть выпадающий список. И его тоже надо обрабатывать. Заместо input_edit_, делай select_edit_.
Advertisement
Add Comment
Please, Sign In to add comment
