jQuery-bootgrid模态对话框

Question

我有一个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外面有一个完全相同的按钮，点击后会按预期显示对话框。有什么想法可以解决这个问题吗？

- KingKerosin

Answer 1

在点击事件上打开模态框 参考

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

希望它能够正常运行 :)

- Maria Jeysingh Anbu

---

这会在每一行上都放置一个点击处理程序。最好在表格本身上放置一个点击处理程序，然后过滤任何从行冒泡上来的点击。这样，如果网格分页，您就不必重新应用处理程序，并且事件处理程序更少（更高效）：$('table').on("click", ".command-delete", function(e){ console.log('your stuff happens here'); }); - philw

Answer 2

这是一个很好的想法，能否请您以脚本格式展示一下。我们可以替换脚本的哪个部分呢？

这样做的好处是，如果网格页面发生变化，您就不必重新应用处理程序，而且事件处理程序也会更少（更高效）：$('table').on("click",".command-delete", function(e){ console.log('your stuff happens here'); }); – philw Jun 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");
    });
});

- ZaibTabs

---

我尝试了以下操作，它确实在jquery.bootgrid中显示了按钮，但该按钮无响应。 - ZaibTabs