如何在JQGrid标题添加用户定义的复选框

Question

尝试如下

jqGrid({
datatype: 'json',
colNames: ["<input type='checkbox' name = 'chkAllOutputField'/>", "other columns" ]

复选框显示在标题上，但无论您如何点击它都不会被选中/取消选中。

如何通过单击

进行选中/取消选中

Answer 1

在这里找到一种方式：How can I add a checkbox into a jQgrid header

<input type="checkbox" onclick="checkBox(event)" /> 

并添加了以下方法......

function checkBox(e) 
{ 
   e = e||event;/* get IE event ( not passed ) */ 
   e.stopPropagation? e.stopPropagation() : e.cancelBubble = true; 
} 

Answer 2

我不明白你想用列标题内的复选框实现什么情况，但是为了能够改变复选框的“已检查”状态，你应该取消绑定jqGrid使用的“click”事件句柄为标题。例如，如果列具有名称“foo”（名称：“foo”）并且网格具有id =“list”，则标题的对应元素具有id =“list_foo”并且您可以使用

$("th#list_foo").unbind('click');

这样做

$("th#list_foo input").click(function(){
    // implement your custom behavior
    alert("clicked!");
});

Answer 3

这是让jqgrid标头中的复选框生效的更好方法。

如果你看到html代码，输入标签周围有一个div标签，它有一个类 - ui-jqgrid-sortable。这样就无法选中复选框。

删除它，它按预期工作。

下面的解决方案

在复选框中添加ID

<input type="checkbox" id="hdrCbox" onclick="checkBox(event)" />

初始化网格或表格时添加以下行。

$('#hdrCbox').parent().removeClass('ui-jqgrid-sortable');