インライン編集で jqGrid 4.4.0 を使用しています。この質問のために、私のグリッドには 4 つの列があります。ID 列 (SomeGridRowId)、jQuery オートコンプリート付きのテキスト列 (Autocomplete)、1 文字のテキスト列 (SingleChar)、非表示のboolean
列 (CanEditSingleChar) です。列の値に基づいて、単一文字列の編集を有効または無効にする必要がありCanEditSingleChar
ます。onSelectRow
andを使用して既存の行でこれを機能させましたsetColProp
が、何らかの理由で、新しく挿入された行で正しく動作させることができません。新しい行を追加してオートコンプリートから値を選択すると、そのSingleChar
列は常に編集できなくなります。Chrome および IE 開発者ツールを使用して Javascript をステップ実行しました。列の値とプロパティは適切に設定されていますが、SingleChar
列のeditable
プロパティはこれを反映していません。
膨大なコード スニペットで申し訳ありませんが、何も省略したくありません。
$("#coolGrid").jqGrid({
url: '@Url.Action("GetCoolGridData")',
postData: {
someId: function () { return $("#someId").val(); },
otherStaticArg: function () { return 1; }
},
datatype: 'json',
mtype: 'POST',
loadonce: true,
cellsubmit: 'clientArray',
editurl: 'clientArray',
scroll: true,
pager: $("#coolGridPager"),
rowNum: 200,
sortname: 'SomeGridRowId',
sortorder: 'asc',
viewrecords: true,
height: '100%',
colNames: ['SomeGridRowId', 'CanEditSingleChar', 'Autocomplete', 'SingleChar'],
colModel: [
{ name: 'SomeGridRowId', index: 'SomeGridRowId', hidden: true },
{ name: 'CanEditSingleChar', index: 'CanEditSingleChar', hidden: true },
{
name: 'Autocomplete',
index: 'Autocomplete',
width: 220,
editable: true,
edittype: 'text',
editoptions: {
dataInit: function (elem) {
$(elem).autocomplete({
source: '@Url.Action("GetSomeGridAutocomplete")',
minLength: 2,
select: function (event, ui) {
var rowId = getRowId($(this));
if (ui.item) {
$("#coolGrid").jqGrid('setCell', rowId, 'CanEditSingleChar', ui.item.CanEditSingleChar, '', '');
$("#coolGrid").jqGrid('setCell', rowId, 'Autocomplete', ui.item.label, '', '');
setSingleCharEditMode(rowId);
}
}
});
}
}
},
{
name: 'SingleChar',
index: 'SingleChar',
width: 10,
editable: true, //default to true, most are editable
edittype: 'text'
}
],
onSelectRow: function (clickedRow) {
if (clickedRow && clickedRow != $.coolGridLastSelectedRow) {
$("#coolGrid").jqGrid('saveRow', $.coolGridSelectedRow, false, 'clientArray');
$.coolGridLastSelectedRow = clickedRow;
}
setSingleCharEditMode($.coolGridLastSelectedRow);
$("#coolGrid").jqGrid('editRow', $.coolGridLastSelectedRow, true);
},
afterInsertRow: function (rowid, rowdata, rowelem) {
if (rowid == 'new_row') { //shown solely for completeness, pretty sure this is not the problem
var newRowIndex = $("#coolGridNewRowIndex").val();
if (!newRowIndex)
newRowIndex = 1;
var newRowId = rowid + "_" + newRowIndex;
$("#new_row").attr('id', newRowId);
newRowIndex++;
$("#coolGrid").val(newRowIndex);
$("#coolGrid").jqGrid('setSelection', newRowId, true);
}
}
});
$("#coolGrid").jqGrid('navGrid', '#coolGridPager',
{
add: false,
del: false,
edit: false,
search: false,
beforeRefresh: function () {
$("#coolGrid").jqGrid('setGridParam', { datatype: 'json' });
}
});
$("#coolGrid").jqGrid('inlineNav', '#coolGridPager',
{
edit: false,
add: true,
addtext: "Add",
save: false,
cancel: false,
restoreAfterSelect: false,
addParams: {
position: 'last',
addRowParams: {
keys: true
}
}
});
そしてsetSingleCharEditMode
機能:
function setSingleCharEditMode(rowid) {
var rowData = $("#coolGrid").jqGrid('getRowData', rowid);
if (rowData.CanEditSingleChar === "false") {
$("#coolGrid").jqGrid('setColProp', 'SingleChar', { editable: false });
} else {
$("#coolGrid").jqGrid('setColProp', 'SingleChar', { editable: true });
}
}
私はたくさんのことを試し、他のSOの質問の山を調べ、狂ったようにグーグルで調べました....すべて役に立ちませんでした。私は髪を引っ張ることに頼ってきました。すべて新しい行で、別の列editable
のオートコンプリート後にある列のプロパティを制御するにはどうすればよいですか?select
編集
私はここに実用的な例を持っています。行を追加してから、列の「非定型 *」のいずれかを選択すると、Autocomplete
この動作を再現できます。