jqGridを使用すると、ページの読み込み時とクリックしたときの編集可能なビューでのセルの読み込みを強制する方法を教えてください。編集可能なチェックボックス列のjqGrid
以下のように 'セル編集'を設定すると、セルをクリックしたときにのみチェックボックスが表示されます。チェックボックスをクリックでも
{ name: 'MyCol', index: 'MyCol', editable:true, edittype:'checkbox', editoptions: { value:"True:False" },
cellEdit:true,
、サーバーにAJAXポストを送るのではなく、即座に入る押すユーザーに頼らの方法は何ですか？
チェックボックスフォーマッタのdisabledプロパティを使用し、チェックボックスは常にクリック可能なことができるようにするために：
{ name: 'MyCol', index: 'MyCol',
editable:true, edittype:'checkbox', editoptions: { value:"True:False"},
formatter: "checkbox", formatoptions: {disabled : false} , ...
を2番目の質問に答えるために、あなたはセットアップにあるチェックボックスのイベントハンドラを持つことになります、その結果、たとえば、AJAX POSTをサーバに送信するために関数が呼び出されます。ここにあなたを始めるためのいくつかのコード例があります。あなたはloadCompleteイベントにこれを追加することができます。
// Assuming check box is your only input field:
jQuery(".jqgrow td input").each(function(){
jQuery(this).click(function(){
// POST your data here...
});
});
これは古いものですが、私はあまりにもここに私の解決策を追加することにしましたので、ビューをたくさん持っています。
私はloadCompleteイベントを使用しての義務からあなたを解放します遅延バインディングの実装を作成するためのjQueryの.delegate機能を利用しています。
ただ、次の行を追加します。
$(document).delegate('#myGrid .jqgrow td input', 'click', function() { alert('aaa'); });
これは、後半グリッド行上にあるすべてのチェックボックスにそのハンドラをバインドします。 複数のチェックボックス列がある場合は、ここで問題が発生する可能性があります。
私は以下のリンクで完全なコードを共有していました。必要があるかどうかを調べることができます。
私は同じ問題を抱えていたし、私はすぐにチェックボックスのクリックを処理するための良い解決策を見つけたとします。主な考え方は、ユーザーが編集不可能なチェックボックスをクリックしたときにeditCellメソッドをトリガーすることです。あなたは、グリッドのイベントを定義する必要があり、これを除いて
jQuery(".jqgrow td").find("input:checkbox").live('click', function(){
var iRow = $("#grid").getInd($(this).parent('td').parent('tr').attr('id'));
var iCol = $(this).parent('td').parent('tr').find('td').index($(this).parent('td'));
//I use edit-cell class to differ editable and non-editable checkbox
if(!$(this).parent('td').hasClass('edit-cell')){
//remove "checked" from non-editable checkbox
$(this).attr('checked',!($(this).attr('checked')));
jQuery("#grid").editCell(iRow,iCol,true);
}
});
：ここにコードされ、ユーザーがそれをクリックしたときに
afterEditCell: function(rowid, cellname, value, iRow, iCol){
//I use cellname, but possibly you need to apply it for each checkbox
if(cellname == 'locked'){
//add "checked" to editable checkbox
$("#grid").find('tr:eq('+iRow+') td:eq('+iCol+') input:checkbox').attr('checked',!($("#regions").find('tr:eq('+iRow+') td:eq('+iCol+') input:checkbox').attr('checked')));
//trigger request
jQuery("#grid").saveCell(iRow,iCol);
}
},
afterSaveCell: function(rowid, cellname, value, iRow, iCol){
if(cellname == 'locked'){
$("#grid").find('tr:eq('+iRow+') td:eq('+iCol+')').removeClass('edit-cell');
}
},
Webサーバーにすべてのグリッド行を送信する1つの送信機能があります。
私はこのコードを使用してこの問題を解決：
var checkboxFix = [];
$("#jqTable td[aria-describedby='columnId'] input").each(function() {
checkboxFix.push($(this).attr('checked'));
});
その後、私は値と混合し、以下のコードから得ました。
$("#jqTable").jqGrid('getGridParam', 'data');
私はそれが誰かを助けてくれることを願っています。
リチャードに感謝しますが、これはうまくいかないことがわかりました。私のチェックボックスはjqGridの第1列にありますが、ユーザーがその第1列のセル内をクリックしてチェックボックス自体をクリックしなかった場合、このコードは誤って "チェックボックス値が変更されました"をトリガします。私の仕事はこれでした： $（ '＃jqGrid'）on（ 'change'、 '：checkbox'、function（e）{}）; –
よりよい解決策：あなたのcolModelで
<script type="text/javascript">
var boxUnformat = function (cellvalue, options, cell) { return '-1'; },
checkboxTemplate = {width:40, editable:true,
edittype: "checkbox", align: "center", unformat: boxUnformat,
formatter: "checkbox", editoptions: {"value": "Yes:No"},
formatoptions: { disabled: false }};
jQuery(document).ready(function($) {
$(document).on('change', 'input[type="checkbox"]', function(e){
var td = $(this).parent(), tr = $(td).parent(),
checked = $(this).attr('checked'),
ids = td.attr('aria-describedby').split('_'),
grid = $('#'+ids[0]),
iRow = grid.getInd(tr.attr('id'));
iCol = tr.find('td').index(td);
grid.editCell(iRow,iCol,true);
$('input[type="checkbox"]',td).attr('checked',!checked);
grid.saveCell(iRow,iCol);
});
});
</script>
：
...
{name:'allowAccess', template: checkboxTemplate},
...
グレート答え@Justin !!ありがとう、それが私の質問だったら、私はあなたにダニを与えるだろう。 – Dan
素晴らしい！私はこれを選択された答えとすることができました。 – Nigel
あなたは大歓迎です！この質問はとても残念ですが、うまくいけば答えはまだ助けになるでしょう:) –