2014-01-10 57 views
1

我正在創建一個帶有可編輯字段的jqgrid。我有jqgrid中的2個複選框列,其中一個來自multiselect:true(以獲取唯一的rowId),其他列在列模型內部創建。jqgrid中的多個複選框列。處理onchange事件

我想處理我的列模型中複選框的onchange(checked/unchecked)事件,獨立於其他複選框列(multiselect:true)。任何幫助讚賞。以下是代碼片段。

[{name : "userRole", label: 'OV', width: 40, editable:true, edittype:'checkbox',formatter: 'checkbox', editoptions: {value:"True:False"}, 
formatoptions: { disabled: false},frozen:true}] 
multiselect: true, 
onSelectRow: function(rowid){ 
      jQuery(this).editRow(rowid, true); 
      } 
+0

取代在您的colmodel中使用'formatter:'checkbox'',爲複選框定義您自己的'formatter'函數。所以你可以包含你的'onchange'函數。 –

回答

3

這樣定義自己的格式化功能在您的colmodel,

[{name : "userRole", label: 'OV', width: 40, 
editable:true, edittype:'checkbox',formatter: checkboxFormatter, 
    editoptions: {value:"True:False"}, 

而且你格式化複選框一樣,

function checkboxFormatter(cellvalue, options, rowObject) { 
return "<input type='checkbox' name='checkboxIsCC' 
       onchange='your_own_function();'>"; 
} 

希望這有助於你。

5

您可以使用beforeSelectRow回調。 The demo演示了這種方法。它使用下面的代碼

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")) { 
     alert("checkbox is " + 
       ($target.is(":checked")? "checked" : "unchecked") + 
       " in the column \"" + colModel[iCol].name + 
       "\" in the row with rowid=\"" + rowid + "\""); 
    } 
    return true; 
} 
0

我有一個問題是,不僅我有超過1個複選框,但我也不得不更新基於該複選框的選擇同一列的複選框值以及修改相同的行列。

關於其他複選框的修改,當jqgrid通過'setCell'或'setRowData'操作修改數據時,它會刪除click事件。還有一個問題是,對於複選框,edit functions沒有任何用處。

我設法從其他人的解決方案中得到一些東西,並使用委託jquery函數,它允許每次創建與選擇器匹配的對象時都完成點擊的綁定。同樣在這種情況下,一次只能檢查1個只有1列的複選框。

$(document).delegate("#alarmDownloadListView td[aria-describedby*='stopArm'] input", 'click', function() { 
// Function that modifies all the other checkboxes of the same column 
    deselectOthersStopArmAlarms(this, j); 
    // Set the Pre and Pos Alarm values to default 
    var fileIndex = $(this).closest('tr').index(); 
// Modification of the same row cells 
    if($(this).is(':checked')){ 
     alarmsGrid.jqGrid('setCell',fileIndex,'preAlarm', defaultPrePosStopArmAlarmValue); 
    }else{ 
     alarmsGrid.jqGrid('setCell',fileIndex,'preAlarm', null); 
    } 
}); 

不介意代碼的確切操作,重要的是綁定函數所執行的操作。 CSS選擇器將此函數綁定到在我的colmodel中名稱爲stopArm的所有複選框。

我希望這個答案對一些人有用。我發現代表非常有用! :)