Архивы WEB - Страница 12 из 54

Диалоговые окна на boostrap5 + jquery

08.06.2022 Павел Грибов WEB

Лень двигатель прогресса (с). В одной из задач, используется довольно большое количество однотипных окон с вопросами и кнопками -Да, Нет, Ок и т.д. Чтобы не рисовать каждый раз эти окна руками в коде html, можно поступить лучше: оформить создание диалогового окна «на лету» с вызовом пользовательской функции по нажатию какой-то из кнопок.

Решение:

function UUID_V4() {
    var S4 = function() {
       return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
    };
    return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());
}

function Dialog(title,message,buttons=Array(),callback=function(){}){
  var uuid=UUID_V4();  
       html='<div class="modal fade" id="'+uuid+'" tabindex="-1" role="dialog" aria-labelledby="'+uuid+'Label" aria-hidden="true">';
  html=html+' <div class="modal-dialog modal-lg">';
  html=html+'  <div class="modal-content">';
  html=html+'    <div class="modal-header">';
  html=html+'      <h5 class="modal-title" id=""'+uuid+'Label">'+title+'</h5>';
  html=html+'      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>';
  html=html+'    </div>';
  html=html+'    <div class="modal-body">';
  html=html+'        <p>'+message+'</p>';
  html=html+'    </div>';
  html=html+'    <div class="modal-footer">';
  buttons.forEach(function(bt, index, array) {
    if (index==0){
      html=html+'<button type="button" onclick="'+callback.name+'(\''+bt+'\')" class="btn btn-secondary" data-bs-dismiss="modal">'+bt+'</button>';  
    } else {
      html=html+'<button type="button" onclick="'+callback.name+'(\''+bt+'\')" class="btn btn-primary" data-bs-dismiss="modal">'+bt+'</button>';  
    };    
  });
  html=html+'    </div>';
  html=html+'  </div>';
  html=html+' </div>';
  html=html+'</div>';
  $("body").append(html);
  $("#"+uuid).modal("show");
  $("#"+uuid).on("hidden.bs.modal", function () {
    console.log("--закрыли окно");
    $("#"+uuid).remove();
  });
};
Dialog("Привет","Тут какой-то текст",["Ок","Отмена"],ResultTestDialog);

function ResultTestDialog(result){
    console.log("!",result);
}

function UUID_V4() {

var S4 = function() {

return (((1+Math.random())*0x10000)|0).toString(16).substring(1);

};

return (S4()+S4()+"-"+S4()+"-"+S4()+"-"+S4()+"-"+S4()+S4()+S4());

}

function Dialog(title,message,buttons=Array(),callback=function(){}){

var uuid=UUID_V4();

html='<div class="modal fade" id="'+uuid+'" tabindex="-1" role="dialog" aria-labelledby="'+uuid+'Label" aria-hidden="true">';

html=html+' <div class="modal-dialog modal-lg">';

html=html+' <div class="modal-content">';

html=html+' <div class="modal-header">';

html=html+' <h5 class="modal-title" id=""'+uuid+'Label">'+title+'</h5>';

html=html+' <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>';

html=html+' </div>';

html=html+' <div class="modal-body">';

html=html+' <p>'+message+'</p>';

html=html+' </div>';

html=html+' <div class="modal-footer">';

buttons.forEach(function(bt, index, array) {

if (index==0){

html=html+'<button type="button" onclick="'+callback.name+'(\''+bt+'\')" class="btn btn-secondary" data-bs-dismiss="modal">'+bt+'</button>';

} else {

html=html+'<button type="button" onclick="'+callback.name+'(\''+bt+'\')" class="btn btn-primary" data-bs-dismiss="modal">'+bt+'</button>';

};

});

html=html+' </div>';

html=html+'</div>';

$("body").append(html);

$("#"+uuid).modal("show");

$("#"+uuid).on("hidden.bs.modal", function () {

console.log("--закрыли окно");

$("#"+uuid).remove();

});

};

Dialog("Привет","Тут какой-то текст",["Ок","Отмена"],ResultTestDialog);

function ResultTestDialog(result){

console.log("!",result);

}

Оставить комментарий bootstrap, dialogs, javascript

PostgreeSQL: бекап и востановление таблиц по маске

30.05.2022 Павел Грибов WEB

Задача: сделать бекап таблиц по маске и их восстановление

Решение:

для создания бекапа добавим ключи:

—if-exists — если есть, то удалить таблицу

—inserts — вместо copy использовать nsert

-c — очистка данных перед вставкой

pg_dump  --table=xyz* -Fc --file=ocpi.dump2 база-dev -U юзер_pg --if-exists --inserts -c

pg_restore --dbname база -Fc ocpi.dump2 -U юзер_pg

pg_dump --table=xyz* -Fc --file=ocpi.dump2 база-dev -U юзер_pg --if-exists --inserts -c

pg_restore --dbname база -Fc ocpi.dump2 -U юзер_pg

Оставить комментарий

JavaScript: создаем и позволяем скачать csv файл

05.05.2022 Павел Грибов WEB

Задача: из некого массива данных создать файл и предложить его к закачке пользователем, без участия серверной части.

Решение: Для создания файла воспользуемся функцией Blob, которая позволяет оперировать с бинарными данными. Далее создадим в DOM элемент <a>, поместим в href бинарные данные и сэмулируем нажатие на ссылку. Примерно так:

  //собираем csv файл
                      csv="OKPU;P1;P2;\n";
                      data.result.forEach(function(entry) {
                        csv=csv+entry.okpu+";"+entry.P1+";"+entry.P2+"\n";  
                      });
                        let a = document.createElement("a");
                        let file = new Blob([csv], {type: 'application/csv'});
                        a.href = URL.createObjectURL(file);
                        a.download = "sender_okpu_data.csv";
                        a.click();

//собираем csv файл

csv="OKPU;P1;P2;\n";

data.result.forEach(function(entry) {

csv=csv+entry.okpu+";"+entry.P1+";"+entry.P2+"\n";

});

let a = document.createElement("a");

let file = new Blob([csv], {type: 'application/csv'});

a.href = URL.createObjectURL(file);

a.download = "sender_okpu_data.csv";

a.click();

Оставить комментарий javascript, закачка, создание csv

JavaScript: удаление html тэгов из стороки

11.04.2022 Павел Грибов WEB

Задача: удалить из переменной все тэги вида <тэг>бла-бла</тэг>

Решение: воспользуемся регуляркой

txt="<a>Ссылка</a> А тут всё хорошо";
txt=txt.replace(/(<([^>]+)>)/ig, "");
console.log(txt)

txt="<a>Ссылка</a> А тут всё хорошо";

txt=txt.replace(/(<([^>]+)>)/ig, "");

console.log(txt)

Выведет в консоль только «А тут всё хорошо»

Оставить комментарий html, javascript, удаление тэгов

Переход к следующему input полю при нажатии кнопки Enter

25.03.2022 Павел Грибов WEB

Задача: есть таблица, в каждой ячейке которой находится поле input. Необходимо чтобы после ввода данных в поле и нажатии Enter проиходил переход на следующую ячейку

Решение:

 $('body').on('keydown', 'input, select', function(e) {        
            if (e.key === "Enter") {
                var self = $(this), form = self.parents('table:eq(0)'), focusable, next;
                focusable = form.find('input,textarea').filter(':visible');
                next = focusable.eq(focusable.index(this)+1);
                if (typeof next!=undefined){
                    if (typeof next[0]!=undefined){
                        if (next[0].disabled==true){
                            next = focusable.eq(focusable.index(this)+3);    
                        };
                        if (next.length) next.focus();
                    };
                };
                return false;
            }
    });

$('body').on('keydown', 'input, select', function(e) {

if (e.key === "Enter") {

var self = $(this), form = self.parents('table:eq(0)'), focusable, next;

focusable = form.find('input,textarea').filter(':visible');

next = focusable.eq(focusable.index(this)+1);

if (typeof next!=undefined){

if (typeof next[0]!=undefined){

if (next[0].disabled==true){

next = focusable.eq(focusable.index(this)+3);

};

if (next.length) next.focus();

};

return false;

}

});

Оставить комментарий

« 1 … 10 11 12 13 14 … 54 »

Пн	Вт	Ср	Чт	Пт	Сб	Вс
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30