单击jqgrid中的行时如何取消选中复选框？

Question

有没有一种方法可以使用类似于带有单选按钮http://www.ok-soft-gmbh.com/jqGrid/SimpleLocalGridWidthRadioButton2.htm 的复选框来获取行为 带有用于选择/取消选择全部的复选框。 行选择和该行上的复选框可能未链接，就像在带有单选按钮的示例中一样。

更新：

这是我的 sn-p：

$("#list").jqGrid({
            datatype: "local",
            data: mydata,
            colNames: ["Client", "Date", "Amount", "Tax", "Total", "Shipped via", "Notes"],
            colModel: [
                {name: "name", width: 70, frozen: true},
                {name: "invdate", width: 80, align: "center", sorttype: "date",
                    formatter: "date", formatoptions: {newformat: "d-M-Y"}, datefmt: "d-M-Y"},
                {name: "amount", width: 75, formatter: "number", sorttype: "number", align: "right"},
                {name: "tax", width: 55, formatter: "number", sorttype: "number", align: "right"},
                {name: "total", width: 65, formatter: "number", sorttype: "number", align: "right"},                    
                {name: "ship_via", width: 100, align: "center", formatter: "select",
                    edittype: "select", editoptions: {value: "FE:FedEx;TN:TNT;IN:Intim", defaultValue: "IN"}},
                {name: "note", width: 70, sortable: false}
            ],
            rowNum: 10,
            rowList: [5, 10, 20],
            pager: "#pager",
            gridview: true,
            rownumbers: true,
            sortname: "invdate",
            viewrecords: true,
            sortorder: "desc",
            caption: "Handling of changing of chechboxes in the grid",
            height: "auto",
            multiselect: true,
                multiboxonly: true,
            beforeSelectRow: function (rowid, e) {
              var $target = $(e.target), $td = $target.closest("td"),
                  iCol = $.jgrid.getCellIndex($td[0]),
                  colModel = $(this).jqGrid("getGridParam", "colModel");
              if (iCol >= 0 && $target.is(":checkbox")) {
                  return false;
              }

              return true;

            },
            onSelectRow: function (rowid, isSelected, event) {

                var rowData = $("#list").jqGrid("getRowData", rowid);

                var checkbox = jQuery(this).find('#' + rowid + ' input#jqg_list_'+rowid+'[type=checkbox]');

                if ($(checkbox).is(':checked')) {
                    $(checkbox).attr('checked', false);
                }
            },
        });

http://jsfiddle.net/yNw3C/12696/

如您所见，问题是当我点击之前选中的行时，它会取消选中复选框。

Answer 1

点击该行不会选中您的复选框，除非有明确的代码来实现这一点。所以我猜你遇到的问题是当你点击一个复选框时你的行的 onclick 处理程序被调用。为了防止这种情况，添加 stopPropegation():

$('table checkbox').click(function(event) {
  event.stopPropagation();
});

还有 stopImmediateProgagation()，但 stopPropagation() 应该足以满足您的情况。

如果这不能解决问题，请发布 JsFiddle 或提供实时链接，以便更容易看到您的代码在做什么。

更新： 您的 onRowSelect 处理程序（第 60 行）针对该行中的所有复选框，如果您更新第 64 行以针对您感兴趣的特定复选框，它将像您期望的那样工作：

var checkbox = jQuery(this).find('#' + rowid + ' input#jqg_list_'+rowid+'[type=checkbox]');

而不是

var checkbox = jQuery(this).find('#' + rowid + ' input[type=checkbox]');

更新2：

是的，这并不能完全解决您的问题。我在你的小提琴上尝试了几种方法，似乎每一种试图处理这个问题的合理方法最终都会与插件进行太多的斗争。根据文档，“multiselect：true”和“multiboxonly：true”选项应该足够了。我会向插件维护者提交错误报告。

Answer 2

  $(function () {
    $('#toggleAll').click(function (event) {
                var checked = event.target.checked;
                $("input[name='checkIds']").each(function (e) {
                    this.checked = checked;
                })
                event.stopPropagation();
     });
   }

  var chkBoxs = "<input type='checkbox' id='toggleAll' />";
  var colNames = [chkBoxs];

当我在 jqGrid 中使用复选框组件时，我遇到了同样的问题。上面的代码片段是解决问题的有效方法。 实际是js的事件机制导致的麻烦。