Жизнь замечательных грибов
Здесь собраны статьи, наработки, исправление ошибок и решение проблем связанных с разработкой для WEB
Задача: отследить переключение вкладок пользователем
Решение:
|
1 2 3 4 5 |
var tabEl = document.querySelector('#myTab') tabEl.addEventListener('shown.bs.tab', function (e) { atab=$(e.target).attr("id"); console.log("--щелкнули по табу"+atab); }) |
Без поправок в CSS, модальное окно, открытое в модальном окне, выглядит не презентабельно — нет краёв.
Что бы поправить ситуацию, достаточно добавить CSS:
|
1 2 3 4 5 6 7 |
.modal:nth-of-type(even) { z-index: 1062 !important; } .modal-backdrop.show:nth-of-type(even) { z-index: 1061 !important; } |
Небольшой сборник нужных трюков
|
1 2 3 4 5 |
"createdRow": function( row, data, dataIndex ) { if (data.deleted == true ) { $(row).addClass('deleted'); } }, |
2. Вынос кнопки «Поиск» в свой контейнер
|
1 2 3 4 5 6 7 8 9 |
<label for="TableSearch" class="col-form-label me-2">Поиск</label> <div class="me-3"> <input type="text" id="TableSearch" class="form-control"> </div> ... oTable = $('#ezs_grid').DataTable(); $('#TableSearch').keyup(function(){ oTable.search($(this).val()).draw() ; }); |
3. Вынос кнопки «строк на странице» в свой контейнер
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<label class="me-3">Показать <select onchange="EzsGridList()" name="lengthtable" id="lengthtable" class="dataTable-selector"> <option selected="" value="10">10</option> <option value="20">20</option> <option value="30">30</option> <option value="40">40</option> </select> строк </label> ... ezs_table=$('#ezs_grid').DataTable( { dom: 'rtipB', destroy: true, altEditor: true, "pageLength": lengthtable.value, "pagingType": "full_numbers", buttons: [ |
4. Вынос кнопок экспорта в свой контейнер
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var buttons = new $.fn.dataTable.Buttons(table, { buttons: [ { text:"Excel",extend: 'excel', className: 'excel_export_style', init: function(api, node, config) { $(node).removeClass('btn btn-secondary') } }, { text:"Print",extend: 'print', className: 'print_export_style', init: function(api, node, config) { $(node).removeClass('btn btn-secondary') } } ] }).container().appendTo($('#export_buttons')); |
5. Отслеживание клика на строке таблицы
|
1 2 3 4 5 6 7 |
$('#clientsgrid').on('dblclick', 'tbody td', function () { tr = $(this).closest('tr'); row = table.row( tr ); data=row.data(); user_id=data.id; console.log(user_id); }); |
6. Перегрузка данных таблицы
|
1 |
table.ajax.reload(); |
7. Рендер своих данных для столбца
|
1 2 3 4 5 6 7 8 |
"columns": [ { "data": null, render: function (data, type, row, meta) { console.log(row); return '<span onclick="EzsEdit('+row.id+')">E</span><span id="ezs_service_'+row.id+'" onclick="DeleteEzs('+row.id+')">D</span>'; }, disabled: true }, |
8. Перебор всех загруженных данных таблицы
|
1 2 3 4 5 6 |
params_ezs_table.rows().data().each(function(entry) { //console.log(entry) if (entry.id==id){ param_ezs_value.value=entry.value; }; }); |
9. Получение id выделенной строки
|
1 2 3 4 5 6 |
rows=segment_table.rows('.selected').data(); if (rows.length>0){ ShowDialogAttachAgreement(rows[0].id); } else { ToastMessage("error","Внимание!","Выберите сегмент для присвоения договора"); }; |
Задача: задать местоположение кнопок экспорта, назначить им собственный стиль
Решение:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
var buttons = new $.fn.dataTable.Buttons(table, { buttons: [ { text:"Excel",extend: 'excel', className: 'excel_export_style', init: function(api, node, config) { $(node).removeClass('btn btn-secondary') } }, { text:"Print",extend: 'print', className: 'print_export_style', init: function(api, node, config) { $(node).removeClass('btn btn-secondary') } } ] }).container().appendTo($('#export_buttons')); |
Проблема обнаруживается в webview приложений на android. А именно, если где-то в коде есть radiobutton обёрнутый чем угодно, то при клике по нему, кратковременно (на долю секунды) выделяется вся строчка целиком.
Решение: достаточно добавить в стилевое оформление этого элемента cursor:default
Update: достаточно применить к body -webkit-tap-highlight-color: rgba(255, 255, 255, 0);