jqgrid - 如何向 jqGrid 的列选择器对话框注入额外的 html 代码？

Question

是否可以在 jqGrid 列选择器对话框的对话框中注入额外的 html 代码？如果是这样，那么最好的方法是什么？

$('#jqgridTest').columnChooser({
    title: "Saved Builds",
    //Inject some html codes here??
});

Answer 1

您可以检查 columnCooser 对话框的 HTML 结构，您将看到以下内容

因此，您可以根据需要对 columnCooser 对话框进行任何修改。您只需在您需要的地方插入您需要的 HTML 片段。例如插入“嗨！” 按钮 我使用了以下 JavaScript 代码onClickButton：

onClickButton: function () {
    var $button = $('<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false" type="button"><span class="ui-button-text">Hi!</span></button>');
    $(this).jqGrid('columnChooser');
    $("#colchooser_" + this.id +
        " ~ div.ui-dialog-buttonpane > div.ui-dialog-buttonset");
        //.prepend($button);
    $button.click(function () {
        alert('"Hi!" button is clicked!');
    });
}

结果（请参阅此处的相应演示）单击“嗨！”后会出现如上图所示的内容。按钮：