将按钮添加到 jqgrid 列标题

2022-01-19 00:00:00 jquery javascript jqgrid

有没有办法在列标题旁边添加一个按钮?让我们说在排序指标"之后?

Is there a way to add a button just next to column header? lets say just after the 'Sort indicators' ?

举个例子

提前致谢.

推荐答案

我想你知道你可以在列标题中包含 HTML 标记.应该只在 colNames 中放置 HTML 片段而不是文本.我想您想在所有列标题中添加 一些带有图标的按钮，并在单击该按钮时执行一些自定义操作.

I suppose that you knows that you can include HTML markup in the column headers. One should just place HTML fragment instead of the text in the colNames. I suppose that you want to add in all column headers some button with an icon and do some custom actions if the button are clicked.

您可以通过多种方式实现该要求.在 演示中，我只展示了许多可能的实现中的一种:

You can implement the requirement in many ways. In the demo I show just one from many possible implementation:

单击自定义按钮时，将显示一个警报，其中显示单击标题的列的名称.

on clicking on the custom button an alert will be displayed which shows the name of the column which header was clicked.

对应的代码是

var $grid = $("#list");
//... here the grid will be created
$grid.closest("div.ui-jqgrid-view").find("div.ui-jqgrid-hdiv table.ui-jqgrid-htable tr.ui-jqgrid-labels > th.ui-th-column > div.ui-jqgrid-sortable")
    .each(function () {
        $('<button>').css({float: "right", height: "17px"}).appendTo(this).button({
            icons: { primary: "ui-icon-gear" },
            text: false
        }).click(function (e) {
            var idPrefix = "jqgh_" + $grid[0].id + "_",
                thId = $(e.target).closest('div.ui-jqgrid-sortable')[0].id;
            // thId will be like "jqgh_list_name"
            if (thId.substr(0, idPrefix.length) === idPrefix) {
                alert('Clicked the button in the column "' + thId.substr(idPrefix.length) + '"');
                return false;
            }
        });
    });

相关文章