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

【问题标题】：How to add user defined checkbox at JQGrid header如何在 JQGrid 标题处添加用户定义的复选框
【发布时间】：2011-03-10 09:46:01
【问题描述】：

尝试如下

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

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

如何通过单击使其选中/取消选中

【问题讨论】：

标签： jqgrid

【解决方案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; 
}

【讨论】：

【解决方案2】：

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

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

这样做

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

【讨论】：

当消息框显示“点击”时，复选框被选中。但是在消息框上单击确定按钮后，它再次被取消选中。我需要它作为通用复选框。
通过stackoverflow.com/questions/4158812/…找到一种方法并添加了以下方法... function checkBox(e) { e = e| |event;/* 获取 IE 事件（未通过） */ e.stopPropagation? e.stopPropagation() : e.cancelBubble = true; }
list_foo 是 list_

【解决方案3】：

这是使 jqgrid 标头中的复选框起作用的更好方法。

如果您看到 html 代码，则输入标签周围有一个 div 标签，它具有类 - ui-jqgrid-sortable。这会阻止选中复选框。

删除它，它可以按您的预期工作。

下面的解决方案

在复选框中添加一个 id

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

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

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

【讨论】：