Блог

Я создаю веб-сайт с таблицей начальной загрузки. Есть строки со столбцами, каждая строка с кнопкой редактирования. Чтобы загрузить таблицу, покажите любые столбцы и скройте другие.

При нажатии на кнопку открывается окно-моддал с данными этой строки. Есть небольшая проблема: когда столбец скрыт, информация не отображается, потому что я использую метод POST.

Моя идея заключается в том, чтобы присвоить ширину 0 скрытым столбцам, данные будут находиться на веб-сайте, но 0 ширины.

Мой код:

 <table class='table-bordered' id='tableprod'
                                   data-toggle='table'
                                   data-toolbar='#toolbar'
                                   data-show-refresh='true'
                                   data-show-toggle='true'
                                   data-sort-name='name'
                                   data-sort-order='desc'
                                   data-show-columns='true'
                                   data-pagination='true'
                                   data-search='true'>

                        <thead class='thead-inverse'>
                            <tr>  
                                <th data-switchable='false' data-checkbox='true'></th>
                                <th data-switchable='false'></th>
                                <th data-sortable='true'>EDICIÓ</th>  
                                <th data-sortable='true'>PÀG.</th>  
                                <th data-sortable='true' data-switchable='false'>CODI</th>  
                                <th data-switchable='false'>IMATGE</th>
                                <th data-sortable='true'>DESCRIPCIÓ CAT</th> 
                                <th data-sortable='true' data-visible='false'>DESCRIPCIÓ ESP</th> 
                                <th data-sortable='true'>MARCA</th> 
                                <th data-sortable='true'>GRAMATJE</th>
                                <th data-sortable='true' data-visible='false'>DESTACAT</th> 
                                <th data-sortable='true'>PVP-CAT</th> 
                                <th data-sortable='true'>PVP-LEV</th> 
                                <th data-sortable='true'>PVP-AND</th>
                                <th data-sortable='true'>PVP-CEN</th>
                                <th data-sortable='true'>PVP-NOR</th>
                                <th data-sortable='true'>PVP-VAS</th>
                                <th data-sortable='true'>PVP-SPAR</th>
                                <th data-sortable='true' data-visible='false'>USER</th>
                                <th data-sortable='true' data-visible='false'>FECHA-MOD</th>
                                <th data-sortable='false' data-switchable='false'>EDIT</th>
                            </tr> 
                        </thead>
  

это загружает данные из php-скрипта…

Скрытые столбцы не отображают значения модального окна. Я думаю, что решение состоит в том, чтобы показать все столбцы, кроме любых столбцов с шириной 0, эффект тот же, что и у скрытых столбцов.

Мой код для добавления значений в модальное окно:

 /* EDIT MODAL WINDOW */

            $('#edit').on('show.bs.modal', function (event) {

                  var $button = $(event.relatedTarget) // Button that triggered the modal
                  var row = $button.closest("tr"), // edit button is in the same row as data you want to change
                  $tds = row.find("td"); // get all table cells in that row

                  $.each($tds, function(index,value) {

                    var field = $(this).data("field");

                    console.log($(this).text());

                    $('[name="'   field  '"]').val($(this).text()); //input name in the modal window
                  });

                 var src_value = $tds.closest("td").find('img').attr('src');
                 $('[name="imagen"]').attr("src",src_value);

            });
  

И из другого файла php обновите базу данных:

 $codigo = $_POST['codigo'];
$edicion = $_POST['edicion'];
$pagina = $_POST['pagina'];
$descripcion_esp = $_POST['descripcion_esp'];
$descripcion_cat = $_POST['descripcion_cat'];
$marca = $_POST['marca'];
$gramaje = $_POST['gramaje'];
$destacado= $_POST['destacado'];
$pvp_cat = $_POST['pvp_cat'];
$pvp_lev = $_POST['pvp_lev'];
$pvp_and = $_POST['pvp_and'];
$pvp_cen = $_POST['pvp_cen'];
$pvp_nor = $_POST['pvp_nor'];
$pvp_vas = $_POST['pvp_vas'];
$pvp_spar = $_POST['pvp_spar'];

$query = "UPDATE....."
  

Как изменить ширину столбцов начальной загрузки-таблицы?

Я не уверен, в чем проблема, но если вы просто хотите скрыть столбец, который вы могли бы использовать data-visible :

 <th data-visible="false">Column</th>
  

У меня есть обходной путь для вашего случая, просто скройте столбцы, используя data-visible , как показано в приведенном выше коде, а затем покажите их, когда вы захотите повторить tds с помощью :

 $('table').bootstrapTable('showColumn', 'columnName');
  

И когда вы закрываете модальный, скрываете их снова :

 $('table').bootstrapTable('hideColumn', 'columnName');
  

Вы могли бы показать весь скрытый столбец, используя each() метод с .bootstrapTable('getHiddenColumns') :

 $.each($('table').bootstrapTable('getHiddenColumns'), function (key, column) {
    $('table').bootstrapTable('showColumn', column['field']);
});
  

Надеюсь, это поможет.