グリッドには、国のドロップダウンと州/州のドロップダウンがあります。ユーザーが [国] ドロップダウンを選択すると、現在選択されている国の州/州を行にロードするリストを取得する必要があります。
dataUrl を使用して (MVC 3、.Net を使用して) サーバーからリストを取得します。グリッドの列にコードを記述して、dataInit editoption を定義し、現在の国 ID を含むように dataUrl を変更しました。ただし、dataInit イベントが発生する前に dataUrl が呼び出されるようです。
これをさらに複雑にするために、アプリケーション全体で再利用されるベース グリッド ビューを作成しました。アプリケーション内に 30 ～ 60 の異なるグリッドがあるため、これが必要です。したがって、各グリッドのユーザーは、列、そのタイプ、編集タイプ、フォーマットなどを定義するだけです。ベース グリッド ビューは、その場で jqgrid を生成するだけです (Vs.Net の MVC 3 フレームワーク内の RAZOR ビュー エンジンを使用して記述されます)。
依存列を持つように定義されている選択型の各列のカミソリ コード (basegrid) で、dataInit 関数のコードを生成してその値を取得し、列の定義の dataUrl を更新します。
私の結論:
私の州/州列の dataInit メソッドは、dataUrl が呼び出された後に呼び出されるようです (つまり、リストを取得するためにサーバーを呼び出した後)。これが dataInit の通常の動作である場合は、別の列イベント メソッドが必要です。
要件：
1) 他の列に依存する可能性のある複数の選択がある可能性があるため、標準のグリッド 'BeforeEditCell' イベントを使用できません。同様に、basegrid のユーザーは実行時に依存関係を決定します。(レーザー コードは各列を反復処理し、グリッド構文を生成します)。
2) 読み込みのために URL が呼び出される前に、dataUrl を変更したいと思います。リストの呼び出しをロードするために実行したくない
3) リストを JavaScript 配列にロードすることは避けたいと思います。したがって、dataUrl を使用する必要があります。
宣言される内容のスニペットを次に示します。他の列はより単純なセットアップに従うため削除しましたが、スクリプトは似ています。
jQuery("#gridList").jqGrid({
url: '/Home/HonourAwardGridData',
datatype: "json",
colNames: [
'Country',
'Province / State',
],
colModel: [
{
name: 'Country',
index: 'Country',
width: 90,
sortable: true,
editable: true,
editrules: {
edithidden: false,
required: false },
hidden: false,
edittype: 'select',
editoptions: {
dataEvents: [
{ type: 'change', fn: function(e) { $("#gridList").jqGrid("saveCell", saveRow, saveCol); } },
],
dataUrl: '/Common/GetCountryValues?pageId=HonourAward',
buildSelect: BuildLookupEntitySelect
},
},
{
name: 'ProvinceState',
index: 'ProvinceState',
width: 90,
sortable: true,
editable: true,
editrules: {
edithidden: false,
required: false },
hidden: false,
edittype: 'select',
editoptions: {
dataEvents: [
{ type: 'change', fn: function(e) { $("#gridList").jqGrid("saveCell", saveRow, saveCol); } },
],
dataUrl: '/Common/GetProvinceValues?pageId=HonourAward&countryId={0}',
dataInit: function(elem) {
var myGrid = $('#gridList');
var selRowId = mygrid.jqGrid('getGridParam', 'selrow');
var depColName = 'Country';
var depColValue = mygrid.jqGrid('getCell', selRowId, depColName);
var newDataUrl = '/Common/GetProvinceValues?pageId=HonourAward&countryId={0}';
newDataUrl = newDataUrl.replace("{0}", depColValue);
$("#grid").jqGrid('setColProp', depColName, {dataUrl: newDataUrl});
},
buildSelect: BuildLookupEntitySelect
},
}
],
rowNum: 200,
cellEdit: true,
cellSubmit: 'remote',
cellurl: '/Home/EditHonourAwardGridData',
multiselect: true,
grouping: false,
jsonReader: {
root: "rows", //array containing actual data
page: "page", //current page
total: "total", //total pages for the query
records: "records", //total number of records
repeatitems: false,
id: 'RecordId' //index of the column with the PK in it
},
toppager: true,
shrinkToFit: false,
rownumbers: false,
autowidth: true,
height: 'auto',
autoencode: true,
altRows : true,
pager: '#gridPager',
viewrecords: true,
sortable: false,
afterEditCell: function (id, name, val, IRow, ICol) {
saveRow = IRow;
saveCol = ICol;
}
});
jQuery("#gridList").jqGrid('navGrid', '#gridPager', { search: false,
edit: true,
add: false,
del: false,
editfunc: function(id) {
var row = jQuery("#gridList").jqGrid('getRowData', id);
var dialogTitle = 'Honours and Career Awards' + ' - ' + row['Name'];
LoadReportUpdateView('HonourAwardUpdate', dialogTitle, row.RecordId);
},
addfunc: function() {
LoadReportAddView('HonourAwardAdd', 'Honours and Career Awards' + ' - Add New');
}
})
.navButtonAdd('#gridPager', {
caption: "Columns",
onClickButton: function () {
ChooseColumns("#gridList", 'HonourAward', 'Select columns for Honours and Career Awards grid');
},
position: "last"
});
});
あなたが提供できる助け、または指示を前もって感謝します。