Модальное диалоговое окно jQuery-bootgrid

У меня есть загрузочная сетка jQuery, как описано в примерах на главной странице. В последнем столбце у меня есть две кнопки для редактирования/удаления содержимого строки.

Все, что я хочу сделать, это показать модальное диалоговое окно, когда пользователь нажимает кнопку «Удалить». Однако при нажатии ничего не происходит. Ни ошибки, ни предупреждения, ничего.

Вот код части команд загрузочной сетки:

"commands": function(column, row) {
                return "<button type=\"button\" class=\"btn btn-sm btn-primary command-edit\" data-row-id=\"" + row.EventId + "\"><span class=\"icon glyphicon glyphicon-pencil\"></span>@Translator.TranslateGlobal(Keys.Global.Edit)</button> " +
                    "<button class=\"btn-default btn\" data-content-close=\"Close\" data-content-id=\"Div\" data-content-save=\"Save\" data-target=\"#6698CB2F-2948-45D9-8902-2C13A7ED6335\" data-title=\"Title\" data-toggle=\"modal\" type=\"button\">Show modal</button>";
            },

У меня есть точно такая же кнопка за пределами загрузочной сетки, и при нажатии она показывает диалоговое окно, как и ожидалось. Любые идеи, где посмотреть или что вызывает такое поведение?


javascript jquery bootstrap-modal jquery-plugins jquery-bootgrid
person KingKerosin    schedule 13.03.2015    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Открытие модального окна по событию клика Справочник

  formatters: {
            "commands": function (column, row) {
                return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\"  data-toggle=\"modal\" data-target=\"#confirmation\"><span class=\"fa fa-pencil\"></span></button> " +
                    "<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" ><span class=\"fa fa-trash-o\"></span></button>";
            }
        }
    }).on("loaded.rs.jquery.bootgrid", function () {
        /* Executes after data is loaded and rendered */
        $(this).find(".command-delete").click(function (e) {
            $($(this).attr("data-target")).modal("show");
        });
    });

Надеюсь, что это работает :)

person Maria Jeysingh Anbu    schedule 16.06.2015
comment
Это помещает обработчик кликов в каждую строку. Вам лучше поместить один на саму таблицу, а затем отфильтровать его для любого клика, всплывающего из строки. Таким образом, вам не нужно повторно применять обработчик, если страницы сетки, и обработчиков событий гораздо меньше (более эффективно): $('table').on(click,.command-delete, function(e){ console .log('Ваши вещи происходят здесь'); }); - person philw; 26.06.2015

arrow_upward
-1
arrow_downward

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

Таким образом, вам не нужно повторно применять обработчик, если страницы сетки, и обработчиков событий намного меньше (более эффективно): $('table').on("click",".command-delete", function( e){ console.log('ваши вещи происходят здесь'); }); – Фил 26 июня

 formatters: {
        "commands": function (column, row) {
            return "<button type=\"button\" class=\"btn btn-xs btn-default command-edit\"  data-toggle=\"modal\" data-target=\"#confirmation\"><span class=\"fa fa-pencil\"></span></button> " +
                "<button type=\"button\" class=\"btn btn-xs btn-default command-delete\" ><span class=\"fa fa-trash-o\"></span></button>";
        }
    }
}).on("loaded.rs.jquery.bootgrid", function () {
    /* Executes after data is loaded and rendered */
    $(this).find(".command-delete").click(function (e) {
        $($(this).attr("data-target")).modal("show");
    });
});
person ZaibTabs    schedule 10.09.2018
comment
Я попробовал следующее: он отображает кнопки в jquery.bootgrid, но кнопка не реагирует. - person ZaibTabs; 21.09.2018