jqGrid에서 편집 양식을 로드할 때 선택한 국가에 따라 올바른 옵션으로 주 드롭다운을 채우는 방법은 무엇입니까?
- Barbara Streisand원래의
- 2024-11-03 14:20:30616검색
jqgrid 편집 상자의 드롭다운 옵션 값이 올바르지 않습니다
양식 편집 시 드롭다운 상자 두 개를 사용해야 합니다. 형태. 첫 번째 드롭다운 상자에서는 국가를 선택하고, 두 번째 드롭다운 상자에서는 해당 국가가 속한 주를 선택합니다. 국가 드롭다운 상자의 옵션 값은 국가 ID와 동일하고, 주 드롭다운 상자의 옵션 값은 국가 ID와 관련됩니다. 예:
국가:
美国 (选项值=1) 英国 (选项值=2)
미국 주:
阿拉巴马州 (选项值=1) 加利福尼亚州 (选项值=2) 佛罗里达州 (选项值=3) 夏威夷州 (选项值=4)
영국 주:
伦敦 (选项值=5) 牛津 (选项值=6)
영국이 속한 주의 옵션값이 5부터 시작되는 것을 알 수 있다. 편집 레코드에 국가 ID=2(UK) 및 주 ID=6(Oxford)이 포함되어 있으면 편집 양식이 올바르게 표시됩니다. 국가는 영국이고 주는 Oxford입니다. 그런데 상태 드롭다운 상자를 확장해 보면 옵션 텍스트는 올바른데(런던과 옥스퍼드가 표시됨) 옵션 값이 0부터 시작하는 것을 볼 수 있습니다. 올바른 결과는 옵션 값이 5부터 시작해야 한다는 것입니다.
국가 드롭다운을 선택하여 미국으로 변경한 다음 다시 영국으로 변경하면 옵션 값이 올바르게 채워집니다(5부터 시작).
질문: 편집 상자를 사용하여 편집 양식을 로드할 때 국가에 따라 상태 드롭다운 상자의 옵션 값을 올바르게 채우는 방법은 무엇입니까?
답변:
질문에 대한 답변은 '미국 주'와 '영국 주'에 대한 정보를 어디서 얻느냐에 따라 다릅니다. jqGrid는 1) editoptions의 value 매개변수를 사용하거나 2) editoptions의 dataUrl 및 buildSelect 매개변수를 사용하는 두 가지 가능성을 지원합니다. 첫 번째 방법은 로컬 편집이나 옵션 목록이 정적일 수 있는 경우에 가장 적합합니다. 두 번째 방법은 AJAX 요청을 통해 데이터베이스에서 국가에 대한 국가, 주 및 주 정보를 얻을 때 사용됩니다. 다음 예에서는 솔루션의 첫 번째 사례를 보여줍니다(value 매개 변수 사용).
서버 구성 요소에 대한 종속성을 방지하려면 로컬 예를 사용할 수 있습니다. dataInit 함수에서 값을 덮어쓰지만 첫 번째 선택/드롭다운 상자에서 값을 변경한 후 두 번째 선택/드롭다운 상자를 수동으로 다시 작성해야 합니다. 이렇게 하려면 선택 HTML 요소의 ID가 테이블 행 ID '_'와 열 이름: rowId "_State"로 구성된다는 점을 이해해야 합니다. 또한 모든 상태 ID를 상태 이름으로 디코딩하려면 editoptions 값을 초기 값으로 재설정해야 합니다.
아래 샘플 코드:
var countries = { '1': 'US', '2': 'UK' };
var states = { '1': 'Alabama', '2': 'California', '3': 'Florida', '4': 'Hawaii', '5': 'London', '6': 'Oxford' };
var statesOfCountry = {
1: { '1': 'Alabama', '2': 'California', '3': 'Florida', '4': 'Hawaii' },
2: { '5': 'London', '6': 'Oxford' }
};
var 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" }
];
var lastSel = -1;
var grid = jQuery("#list");
var resetStatesValues = function () {
grid.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();
// 为了拥有与国家对应的选项列表，我们需要暂时更改列属性
grid.setColProp('State', { editoptions: { value: statesOfCountry[v]} });
},
dataEvents: [
{
type: 'change',
fn: function(e) {
// 为了能够保存当前选择的查看结果，列属性值至少应该包含
// 当前选定的状态。因此，我们必须将列属性重置为以下值
//grid.setColProp('State', { editoptions:{value: statesOfCountry[v]} });
//grid.setColProp('State', { editoptions: { value: states} });
resetStatesValues();
// 根据选定的国家值创建状态选项
var v = parseInt($(e.target).val(), 10);
var sc = statesOfCountry[v];
var newOptions = '';
for (var stateId in sc) {
if (sc.hasOwnProperty(stateId)) {
newOptions += '<option role="option" value="' +
stateId + '">' +
states[stateId] + '</option>';
}
}
// 填充新值到 select/drop-down
if ($(e.target).is('.FormElement')) {
// 表单编辑
var form = $(e.target).closest('form.FormGrid');
$("select#State.FormElement", form[0]).html(newOptions);
} else {
// 内联编辑
var row = $(e.target).closest('tr.jqgrow');
var rowId = row.attr('id');
$("select#" + rowId + "_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.restoreRow(lastSel);
}
lastSel = id;
}
},
ondblClickRow: function (id, ri, ci) {
if (id && id !== lastSel) {
grid.restoreRow(lastSel);
lastSel = id;
}
resetStatesValues();
grid.editRow(id, true, null, null, 'clientArray', null,
function (rowid, response) { // aftersavefunc
grid.setColProp('State', { editoptions: { value: states} });
});
return;
},
editurl: 'clientArray',
sortname: 'Name',
height: '100%',
viewrecords: true,
rownumbers: true,
sortorder: "desc",
pager: '#pager',
caption: "使用依赖 select/drop-down 列表（双击编辑）"
}).jqGrid('navGrid','#pager',
{ edit: true, add: true, del: false, search: false, refresh: false },
{ // 编辑选项
recreateForm:true,
onClose:function() {
resetStatesValues();
}
},
{ // 添加选项
recreateForm:true,
onClose:function() {
resetStatesValues();
}
});
업데이트: 위 코드는 양식 편집 상황에서도 제대로 작동하도록 업데이트되었습니다. jqGrid는 양식 편집을 위한 로컬 편집을 지원하지 않으므로 이 코드는 테스트할 수 없습니다. 그래도 필요한 대부분의 변경이 이루어졌기를 바랍니다.
업데이트 2: 위 코드는 다음을 지원하도록 확장되었습니다.
- 인라인 편집, 양식 편집, 검색 도구 모음 및 고급 검색
- 편집 양식의 이전 또는 다음 탐색 버튼
- 다양한 브라우저 키보드 지원 내 선택 개선(새로 고침 선택 관련 문제 수정) 일부 브라우저에 따라 다름)
최신 버전의 데모는 [여기](http://www.trirand.com/blog/jqgrid/jqgridfromformwithdependentseditboxes.html)에서 찾을 수 있습니다.
다음 수정된 데모 코드:
美国 (选项值=1) 英国 (选项值=2)
위 내용은 jqGrid에서 편집 양식을 로드할 때 선택한 국가에 따라 올바른 옵션으로 주 드롭다운을 채우는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!