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

是否有一种方式来获得与此类似一个开关按钮http://www.ok-soft-gmbh.com/jqGrid/SimpleLocalGridWidthRadioButton2.htm 与选择/取消选择所有包含复选框的复选框的行为。行选择和复选框在该行可以不链接，就像在与单选按钮的例子。如何在点击jqgrid中的行时取消选中复选框？

UPDATE：

这里是我的代码片段：

$("#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/

正如你所看到的，问题是，当我点击先前检查的行，它会取消选中该复选框。

来源

2016-01-20 Renton

不是真正的正是你要寻找的清晰。你可以发布一个JsFiddle到目前为止，并描述它是如何不正确的？ –

我试图让那里行选择不会在该行检查复选框的行为，并在检查复选框，将不会选择该行。我希望我很清楚。 – Renton

点击行不会检查你的复选框，除非有代码的地方，明确地做到这一点。所以我会猜测，当你点击一个复选框时，你所遇到的问题是你的行的onclick处理程序被调用。为防止这一点，添加stopPropegation（）：

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

还有stopImmediateProgagation（），但stopPropagation（）应该是足够您的具体情况。

如果这不能解决问题，请张贴的jsfiddle或提供实时链接，这样它会更容易看到什么你的代码做什么。

UPDATE：您onRowSelect处理器（60行）的目标是在该行中所有的复选框，它会像你期望如果你更新64行到瞄准特定的复选框，你有兴趣：

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

而不是

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

UPDATE2：

是的，这并不能完全解决问题。我在你的小提琴上尝试了几种方法，似乎每种尝试处理这种方法的合理方法都只是最终与插件过度对抗。根据文档，'多选：真'和'多盒：真'选项应该足够了。我会向插件维护者提交一个错误报告。

来源

2016-01-20 22:57:31

我很感激你的帮助，但它不能解决我的问题。我用jsfiddle更新了片段和链接的问题。 – Renton

我上面更新了我的答案，它会对原始代码进行最小限度的修改以实现所需的行为。 –

也许它与所有与复选框的列混淆。我简化了网格，并在我的问题中更新了您的提议，以便您可以看到它仍然无法按原样工作。请看看。 – Renton

$(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中的复选框组件时遇到同样的问题。以上snippe代码是解决问题的有效方法。实际上，js的事件机制导致了麻烦。

来源

2016-12-15 18:55:29 Warner

@EJoshuaS这是一个答案。你只需要阅读完整的文字。 – kaiser

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

回答

相关问题