如何在點擊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中的行時取消選中複選框？

回答

相關問題