在过滤器工具栏旁边添加按钮

Question

按钮应该与过滤器工具栏文本框完全位于过滤器工具栏结束后的行中，即我想要一个与过滤器工具栏文本框在同一行中的按钮。 我尝试了这个，但它无法正常工作

$('#gridTable').after("div.ui-jqgrid-view").find("div.ui-jqgrid-hdiv table.ui-jqgrid-htable tr.ui-search-toolbar").each(function () {
        $('<button>').css({ float: "right", height: "16px", width: "16px" }).appendTo(this).button({
            icons: { primary: "ui-icon-refresh" },
            text: false,
            title: "Clear Filters"
        }).click(function (e) {
            alert("hi");
                   });
    });

Answer 1

jqGrid在搜索工具栏中不支持当前stype: "custom"（仅在搜索对话框中）。因此，要在搜索工具栏中添加自定义元素（如按钮），您必须执行以下操作。首先，需要在搜索工具栏中放置自定义元素。如果你想在搜索工具栏的末尾有一个按钮，你可以在网格中添加虚拟的最后一列（在colModel中）：

{ name: 'sbutton', width: 20, fixed: true, search: false, sortable: false }

该定义将在搜索工具栏的内部将空div放在列上。要在div中放置按钮，可以使用例如以下代码

var $th = $($grid[0].grid.hDiv).find(".ui-jqgrid-htable>thead>.ui-search-toolbar>th:nth-child(" +
        $grid[0].grid.headers.length + ")");
$th.find(">div").append($("<button id='mySearch' style='margin-top:1px;height:20px;width:20px'></button>").button({
    text: false, icons: {primary: "ui-icon-search"}
}));

其中$grid定义为var $grid = $("#gridId");。

The demo演示了这种方法：

Answer 2

试试这个：

$(".ui-search-toolbar th:last").find("div:first").html("<button id='button' style='width:20px;height:20px' title=''>Button<\/button>");