javascript 将按钮添加到 jqgrid 列标题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8213162/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add button to jqgrid column header
提问by Sam
Is there a way to add a button just next to column header? lets say just after the 'Sort indicators' ?
有没有办法在列标题旁边添加一个按钮？让我们说就在“排序指标”之后？
for a example
举个例子
| Id (button) | Name (button) |
| Id（按钮）| 名称（按钮）|
Thanks in advance.
提前致谢。
回答by Oleg
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 allcolumn headers some button with an icon and do some custom actions if the button are clicked.
我想您知道可以在列标题中包含 HTML 标记。人们应该只在 .html 文件中放置 HTML 片段而不是文本colNames。我想您想在所有列标题中添加一些带有图标的按钮，并在单击该按钮时执行一些自定义操作。
You can implement the requirement in many ways. In the demoI 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.
单击自定义按钮时，将显示一个警报，显示单击标题的列的名称。
The corresponding code is
对应的代码是
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;
}
});
});
回答by Lucas Welper
In the past, I have used jquery to add a button to the header. Where my column name was "id":
过去，我曾使用 jquery 在标题中添加按钮。我的列名是“id”：
$('#gs_id').after('<button id="clear_filters" class="button blue">Reset</button>');
回答by Premanshu
.append may be helpful. Add a class to the column and then append button to that with requisite css.
.append 可能会有所帮助。向该列添加一个类，然后使用必要的 css 将按钮附加到该列中。
