jQuery-bootgrid模式对话框

Posted 2021-04-24

我有一个jQuery-bootgrid，如主页上的示例中所述。在最后一列中，我有两个用于编辑/删除行内容的按钮。

我想要做的就是在用户单击“删除”按钮时显示模式对话框。但是，点击没有任何反应。没有错误，没有警告，没有。

这是bootgrid命令部分的代码：

"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>";
            },

我在bootgrid外面有完全相同的按钮，单击它会按预期显示对话框。任何想法在哪里查看或导致这种行为的原因是什么？

答案

单击事件Reference打开模态

  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");
        });
    });

希望它有效:)

另一答案

这是一个很好的主意，请你以脚本格式表示。我们可以替换哪部分脚本。

这样你就不必重新应用处理程序，如果网格页面，并且有更少的事件处理程序（更有效）：$（'table'）。on（“click”，“。command-delete”，function（ e）{console.log（'你的东西发生在这里'）;}）; - 6月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");
    });
});