[英]Customizing the Add/Edit Dialog in jqGrid
對不起,我無法發布圖片,我太新了。
在jqGrid添加/編輯對話框中,我想根據之前做出的選擇加載可選項的列表。 在上圖中,應根據條件選擇中選擇的值加載值選擇。 我相信要走的路線是在editoptions對象中使用dataurl但我在這方面遇到了問題。 令人不安的第一個問題是基於此處的文檔,當標准值的更改允許我更新值列表時,似乎沒有可觸發的事件。
另外,我對如何從ajax請求返回數據感到困惑。 在文檔中它說:
設置editoptions dataUrl參數editoptions dataUrl參數僅對edittype:select元素有效。 dataUrl參數表示應從中獲取html select元素的url。 設置此選項后,元素將填充AJAX請求中的值。 數據應該是帶有所需選項的有效HTML select元素“
這是否意味着我需要生成html並將其作為響應的一部分返回? 以前我用json傳遞了所有數據。
的jqGrid沒有簡單支承在從屬選擇的editoptions
。 所以要實現的是必須在主要選擇上使用change
事件來手動更新第二個(依賴)選擇的選項列表。
在演示中,您將了解如何實現依賴選擇。 我在演示'local'數據類型中使用,因此設置editoptions
value
屬性而不是dataUrl
,但應該做的主模式保持不變。 此外,在演示中,我不僅使用表單編輯,還使用內聯編輯。 代碼在兩種情況下都有效。 由於jqGrid在表單編輯模式下不支持本地編輯,因此表單的提交不起作用。 我可以使用我在這里描述的技巧,但代碼會更長,並且將包含許多遠離你的主要問題的東西。 所以我決定在提交不起作用的表單中發布代碼。
您可以在下面找到演示中的代碼:
var countries = { '1': 'US', '2': 'UK' },
states = { '1': 'Alabama', '2': 'California', '3': 'Florida', '4': 'Hawaii', '5': 'London', '6': 'Oxford' },
statesOfUS = { '1': 'Alabama', '2': 'California', '3': 'Florida', '4': 'Hawaii' },
statesOfUK = { '5': 'London', '6': 'Oxford' },
// the next maps contries by ids to states
statesOfCountry = { '1': statesOfUS, '2': statesOfUK },
mydata = [
{ id: '0', Country: '1', State: '1', Name: "Louise Fletcher" },
{ id: '1', Country: '1', State: '3', Name: "Jim Morrison" },
{ id: '2', Country: '2', State: '5', Name: "Sherlock Holmes" },
{ id: '3', Country: '2', State: '6', Name: "Oscar Wilde" }
],
lastSel = -1,
grid = $("#list"),
resetStatesValues = function () {
// set 'value' property of the editoptions to initial state
grid.jqGrid('setColProp', 'State', { editoptions: { value: states} });
};
grid.jqGrid({
data: mydata,
datatype: 'local',
colModel: [
{ name: 'Name', width: 200 },
{
name: 'Country',
width: 100,
editable: true,
formatter: 'select',
edittype: 'select',
editoptions: {
value: countries,
dataInit: function (elem) {
var v = $(elem).val();
// to have short list of options which corresponds to the country
// from the row we have to change temporary the column property
grid.jqGrid('setColProp', 'State', { editoptions: { value: statesOfCountry[v]} });
},
dataEvents: [
{
type: 'change',
fn: function (e) {
// build 'State' options based on the selected 'Country' value
var v = $(e.target).val(),
sc = statesOfCountry[v],
newOptions = '',
stateId,
form,
row;
for (stateId in sc) {
if (sc.hasOwnProperty(stateId)) {
newOptions += '<option role="option" value="' + stateId + '">' +
states[stateId] + '</option>';
}
}
resetStatesValues();
// populate the subset of contries
if ($(e.target).is('.FormElement')) {
// form editing
form = $(e.target).closest('form.FormGrid');
$("select#State.FormElement", form[0]).html(newOptions);
} else {
// inline editing
row = $(e.target).closest('tr.jqgrow');
$("select#" + $.jgrid.jqID(row.attr('id')) + "_State", row[0]).html(newOptions);
}
}
}
]
}
},
{
name: 'State',
width: 100,
editable: true,
formatter: 'select',
edittype: 'select',
editoptions: { value: states }
}
],
onSelectRow: function (id) {
if (id && id !== lastSel) {
if (lastSel !== -1) {
resetStatesValues();
grid.jqGrid('restoreRow', lastSel);
}
lastSel = id;
}
},
ondblClickRow: function (id) {
if (id && id !== lastSel) {
grid.jqGrid('restoreRow', lastSel);
lastSel = id;
}
resetStatesValues();
grid.jqGrid('editRow', id, true, null, null, 'clientArray', null,
function () { // aftersavefunc
resetStatesValues();
});
return;
},
editurl: 'clientArray',
sortname: 'Name',
ignoreCase: true,
height: '100%',
viewrecords: true,
rownumbers: true,
sortorder: "desc",
pager: '#pager',
caption: "Demonstrate dependend select/dropdown lists (edit on double-click)"
}).jqGrid('navGrid', '#pager', { edit: true, add: true, del: false, search: false, refresh: true },
{ // edit options
recreateForm: true,
viewPagerButtons: false,
onClose: function () {
resetStatesValues();
}
},
{ // add options
recreateForm: true,
viewPagerButtons: false,
onClose: function () {
resetStatesValues();
}
});
更新 :請參閱演示中最新版本的答案的 “更新2”部分。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.