[JQUERY] 편집 상자에 옵션 값 아래로있는 jqGrid 잘못된 선택 드롭

편집 상자에 옵션 값 아래로있는 jqGrid 잘못된 선택 드롭

해결법

1. ---

   1.귀하의 질문에 대한 대답은 당신이 "우리 주"에 표시에 대한 정보를 수신 소스와 "영국에 대한 국가"에서 조금 다릅니다. 1) editoptions 값 파라미터 2)의 editoptions dataUrl 및 buildSelect 파라미터의 사용의 사용 :이있는 jqGrid 지원 두 가지 가능성이있다. 첫 번째 방법은 지역 편집의 경우 또는 가능한 옵션 목록이 정적 인 경우 경우에 가장 좋은 하나입니다. 두 번째는 국가, 국가와 일부 국가의 상태에 대한 정보가 데이터베이스에서 AJAX의 요청에 따라 GET 될 것이라고, 경우에 사용됩니다를 선택합니다. 나는 값 매개 변수의 사용은 서버 구성 요소에 대한 종속성이없는 한 예를 들어에 대한 솔루션을 설명합니다. 구현의 대부분의 지역은 dataUrl 및 buildSelect의 사용의 경우와 동일합니다.

   귀하의 질문에 대한 대답은 당신이 "우리 주"에 표시에 대한 정보를 수신 소스와 "영국에 대한 국가"에서 조금 다릅니다. 1) editoptions 값 파라미터 2)의 editoptions dataUrl 및 buildSelect 파라미터의 사용의 사용 :이있는 jqGrid 지원 두 가지 가능성이있다. 첫 번째 방법은 지역 편집의 경우 또는 가능한 옵션 목록이 정적 인 경우 경우에 가장 좋은 하나입니다. 두 번째는 국가, 국가와 일부 국가의 상태에 대한 정보가 데이터베이스에서 AJAX의 요청에 따라 GET 될 것이라고, 경우에 사용됩니다를 선택합니다. 나는 값 매개 변수의 사용은 서버 구성 요소에 대한 종속성이없는 한 예를 들어에 대한 솔루션을 설명합니다. 구현의 대부분의 지역은 dataUrl 및 buildSelect의 사용의 경우와 동일합니다.

   나는 당신이 필요로 보여 라이브 예를했다.

   가장 큰 문제는 editoptions의 값이 초기화의 시간에 한 번만 사용하는 것입니다. dataInit 기능을 하나의 내부는 값을 덮어 쓸 수 있지만 국가들과 첫 번째 선택 / 드롭 다운 상자에서 값의 변경 한 후 두 번째 선택 / 드롭 다운 상자 상태로 수동으로 다시 작성해야합니다. ROWID + "_state"하나는 이해 할 수 있도록 선택 HTML 요소 ID 행 ID '_'및 열 이름으로 구성 것을 수행합니다. 또한 그것은 editoptions의 값이 임의의 상태 ID가 상태 이름에 디코딩 될 수 그래서, 초기 값으로 재설정되어야한다는 중요하다.

   다음은 예제 코드입니다 :

   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();
                       // to have short list of options which corresponds to the country
                       // from the row we have to change temporary the column property
                       grid.setColProp('State', { editoptions: { value: statesOfCountry[v]} });
                   },
                   dataEvents: [
                       {
                           type: 'change',
                           fn: function(e) {
                               // To be able to save the results of the current selection
                               // the value of the column property must contain at least
                               // the current selected 'State'. So we have to reset
                               // the column property to the following
                               //grid.setColProp('State', { editoptions:{value: statesOfCountry[v]} });
                               //grid.setColProp('State', { editoptions: { value: states} });
                               resetStatesValues();
   
                               // build 'State' options based on the selected 'Country' value
                               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>';
                                   }
                               }
   
                               // populate the new
                               if ($(e.target).is('.FormElement')) {
                                   // form editing
                                   var form = $(e.target).closest('form.FormGrid');
                                   $("select#State.FormElement", form[0]).html(newOptions);
                               } else {
                                   // inline editing
                                   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: "Demonstrate dependend select/dropdown lists (edit on double-click)"
   }).jqGrid('navGrid','#pager', 
             { edit: true, add: true, del: false, search: false, refresh: false },
             { // edit options
                 recreateForm:true,
                 onClose:function() {
                     resetStatesValues();
                 }
             },
             { // add options
                 recreateForm:true,
                 onClose:function() {
                     resetStatesValues();
                 }
             });
   

   업데이트 : 나는 그것이 형태의 경우도 편집 작업을하기 위해 위의 코드를 업데이트했습니다. 당신은 여기 살고 볼 수 있습니다. 있는 jqGrid 편집 형태 로컬 편집을 지원하지 때문에 내가 코드를 테스트 할 수 없었다. 그럼에도 불구하고 내가 필요한 변경의 대부분을 만들 수 있기를 바랍니다.

   2 업데이트 : 나는 지원에 위의 코드를 확장

   데모의 새로운 버전은 여기에있다. 아래 찾을 데모의 수정 된 코드 :

   var countries = { '1': 'US', '2': 'UK' },
       //allCountries = {'': 'All', '1': 'US', '2': 'UK'},
       // we use string form of allCountries to have control on the order of items
       allCountries = ':All;1:US;2:UK',
       states = { '1': 'Alabama', '2': 'California', '3': 'Florida', '4': 'Hawaii', '5': 'London', '6': 'Oxford' },
       allStates = ':All;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 = { '': states, '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"),
       removeAllOption = function (elem) {
           if (typeof elem === "object" && typeof elem.id === "string" && elem.id.substr(0, 3) !== "gs_") {
               // in the searching bar
               $(elem).find('option[value=""]').remove();
           }
       },
       resetStatesValues = function () {
           // set 'value' property of the editoptions to initial state
           grid.jqGrid('setColProp', 'state', { editoptions: { value: states} });
       },
       setStateValues = function (countryId) {
           // 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[countryId]} });
       },
       changeStateSelect = function (countryId, countryElem) {
           // build 'state' options based on the selected 'country' value
           var stateId, stateSelect, parentWidth, $row,
               $countryElem = $(countryElem),
               sc = statesOfCountry[countryId],
               isInSearchToolbar = $countryElem.parent().parent().parent().hasClass('ui-search-toolbar'),
                                 //$(countryElem).parent().parent().hasClass('ui-th-column')
               newOptions = isInSearchToolbar ? '<option value="">All</option>' : '';
   
           for (stateId in sc) {
               if (sc.hasOwnProperty(stateId)) {
                   newOptions += '<option role="option" value="' + stateId + '">' +
                       states[stateId] + '</option>';
               }
           }
   
           setStateValues(countryId);
   
           // populate the subset of contries
           if (isInSearchToolbar) {
               // searching toolbar
               $row = $countryElem.closest('tr.ui-search-toolbar');
               stateSelect = $row.find(">th.ui-th-column select#gs_state");
               parentWidth = stateSelect.parent().width();
               stateSelect.html(newOptions).css({width: parentWidth});
           } else if ($countryElem.is('.FormElement')) {
               // form editing
               $countryElem.closest('form.FormGrid').find("select#state.FormElement").html(newOptions);
           } else {
               // inline editing
               $row = $countryElem.closest('tr.jqgrow');
               $("select#" + $.jgrid.jqID($row.attr('id')) + "_state").html(newOptions);
           }
       },
       editGridRowOptions = {
           recreateForm: true,
           onclickPgButtons: function (whichButton, $form, rowid) {
               var $row = $('#' + $.jgrid.jqID(rowid)), countryId;
               if (whichButton === 'next') {
                   $row = $row.next();
               } else if (whichButton === 'prev') {
                   $row = $row.prev();
               }
               if ($row.length > 0) {
                   countryId = grid.jqGrid('getCell', $row.attr('id'), 'country');
                   changeStateSelect(countryId, $("#country")[0]);
               }
           },
           onClose: function () {
               resetStatesValues();
           }
       };
   
   grid.jqGrid({
       data: mydata,
       datatype: 'local',
       colModel: [
           { name: 'name', width: 200, editable: true },
           { name: 'country', width: 100, editable: true, formatter: 'select', stype: 'select', edittype: 'select',
               searchoptions: {
                   value: allCountries,
                   dataInit: function (elem) { removeAllOption(elem); },
                   dataEvents: [
                       { type: 'change', fn: function (e) { changeStateSelect($(e.target).val(), e.target); } },
                       { type: 'keyup', fn: function (e) { $(e.target).trigger('change'); } }
                   ]
               },
               editoptions: {
                   value: countries,
                   dataInit: function (elem) { setStateValues($(elem).val()); },
                   dataEvents: [
                       { type: 'change', fn: function (e) { changeStateSelect($(e.target).val(), e.target); } },
                       { type: 'keyup', fn: function (e) { $(e.target).trigger('change'); } }
                   ]
               }},
           { name: 'state', width: 100, formatter: 'select', stype: 'select',
               editable: true, edittype: 'select', editoptions: { value: states },
               searchoptions: { value: allStates, dataInit: function (elem) { removeAllOption(elem); } } }
       ],
       onSelectRow: function (id) {
           if (id && id !== lastSel) {
               if (lastSel !== -1) {
                   $(this).jqGrid('restoreRow', lastSel);
                   resetStatesValues();
               }
               lastSel = id;
           }
       },
       ondblClickRow: function (id) {
           if (id && id !== lastSel) {
               $(this).jqGrid('restoreRow', lastSel);
               lastSel = id;
           }
           resetStatesValues();
           $(this).jqGrid('editRow', id, {
               keys: true,
               aftersavefunc: function () {
                   resetStatesValues();
               },
               afterrestorefunc: function () {
                   resetStatesValues();
               }
           });
           return;
       },
       editurl: 'clientArray',
       sortname: 'name',
       ignoreCase: true,
       height: '100%',
       viewrecords: true,
       rownumbers: true,
       sortorder: "desc",
       pager: '#pager',
       caption: "Demonstrate dependend select/dropdown lists (inline editing on double-click)"
   });
   grid.jqGrid('navGrid', '#pager', { del: false }, editGridRowOptions, editGridRowOptions);
   grid.jqGrid('filterToolbar', {stringResult: true, searchOnEnter: true, defaultSearch : "cn"});
   

   3 업데이트 : 당신이 여기에서 찾을 데모의 코드의 마지막 버전.

2. ---

   2.나는 형태로 편집을 사용하고 있습니다. 형태로 세를 선택 상자가 있습니다. 한 선택 상자 하나 개 선택 상자는 도시가, 또 다른 선택 상자가 거리이다, 나라입니다. 도시 선택 상자는 선택한 국가에 따라 동적으로 채워집니다. 거리 선택 상자는 선택한 도시에 따라 동적으로 채워집니다. 내가 MySQL의에서 국가, 도시, 거리를 저장합니다. 나는 국가를 선택하면 어떻게 MySQL의 테이블에서 변경 도시 선택 상자를 할

   나는 형태로 편집을 사용하고 있습니다. 형태로 세를 선택 상자가 있습니다. 한 선택 상자 하나 개 선택 상자는 도시가, 또 다른 선택 상자가 거리이다, 나라입니다. 도시 선택 상자는 선택한 국가에 따라 동적으로 채워집니다. 거리 선택 상자는 선택한 도시에 따라 동적으로 채워집니다. 내가 MySQL의에서 국가, 도시, 거리를 저장합니다. 나는 국가를 선택하면 어떻게 MySQL의 테이블에서 변경 도시 선택 상자를 할

from https://stackoverflow.com/questions/4469650/jqgrid-incorrect-select-drop-down-option-values-in-edit-box by cc-by-sa and MIT license