添加按钮到jqgrid列标题 [英] Add button to jqgrid column header

问题描述

有没有办法在列标题旁边添加按钮？我们可以说'排序指标'之后？

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

这篇关于添加按钮到jqgrid列标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！