JqGridを使用している場合、ページの読み込み時とクリック時の編集可能なビューでセルを強制的に読み込むにはどうすればよいですか?
以下のように「セル編集」を設定した場合、チェックボックスはセルをクリックしたときにのみ表示されます。
{ name: 'MyCol', index: 'MyCol', editable:true, edittype:'checkbox', editoptions: { value:"True:False" },
cellEdit:true,
また、チェックボックスをクリックすると、AJAX投稿をサーバーに即座に送信する方法があります。ユーザーがEnterキーを押すことに頼る必要はありませんか?
チェックボックスを常にクリック可能にするには、チェックボックスフォーマッタの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...
});
});
これは古いものですが、多くの見方があるため、ここにもソリューションを追加することにしました。
JQueryの.delegate関数を使用して、loadCompleteイベントを使用する義務から解放される遅延バインディング実装を作成しています。
以下を追加してください:
$(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');
私はそれが誰かを助けることを願っています。
以下のリンクで完全なコードを共有しました。必要な場合はご覧ください。
より良いソリューション:
<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>
あなたのcolModelで:
...
{name:'allowAccess', template: checkboxTemplate},
...