jqgrid在编辑框中不正确选择下拉选项值

jqgrid incorrect select drop down option values in edit box(jqgrid在编辑框中不正确选择下拉选项值)

问题描述

我正在使用表单编辑.表单中有两个选择框.一个选择框是国家，另一个选择框是州.州选择框取决于所选的国家，并将动态填充.例如:

I am using form edit. There are two select boxes in the form. One select box is the country, another select box is the state. The state select box depends on the country selected and will be populated dynamically. For example:

国家:

美国(期权价值=1)
英国(期权价值=2)

US (option value=1)
UK (option value=2)

美国的州:

阿拉巴马州(期权价值=1)
加利福尼亚州(期权价值=2)
佛罗里达州(选项值=3)
夏威夷(选项值=4)

Alabama (option value=1)
California (option value=2)
Florida (option value=3)
Hawaii (option value=4)

英国的州:

伦敦(期权价值=5)
牛津(期权价值=6)

London (option value=5)
Oxford (option value=6)

正如您在上面看到的，英国的州 id 以 5 开头.当我编辑包含 Country id=2 (UK) 和 State id=6 (Oxford) 的记录时，编辑表单将正确显示 - Country 是 UK，State 是 Oxford.但是如果你下拉状态选择框选项文本是正确的(它显示伦敦牛津)但选项值将从 0 开始.正确的是选项值应该从 5 开始.

As you can see above the id of state for uk starts with 5. When I edit a record which contained Country id=2 (UK) and State id=6 (Oxford), the edit form will shows correctly - Country is UK and State is Oxford. But if you drop down the state select box the option text is correct (it shows London Oxford) but the option value will starts from 0. What should be correct is that the option value should starts from 5.

如果您选择并将国家下拉框更改为美国，然后再次更改回英国，则选项值将正确填充(从 5 开始).

If you select and change the country drop down box to US then change back again to UK, the option value will be populated correct (starts from 5).

我的问题是，当编辑表单加载时，我们如何根据编辑框中的国家/地区使用正确的选项值填充州的选择框?

My question is, how can we populate the select box for the state with the correct option value based on the country in edit box when the edit form loads?

推荐答案

您的问题的答案在某种程度上取决于您收到美国州"和英国州"下显示的信息的来源.jqGrid 支持的两种可能性: 1) value 参数的使用editoptions" rel="noreferrer">editoptions 2) dataUrl 和 buildSelect 参数的使用.com/jqgridwiki/doku.php?id=wiki:common_rules#editoptions" rel="noreferrer">editoptions.在本地编辑或可能选项列表是静态的情况下，第一种方法是最好的方法.在这种情况下，将使用第二个选择，即根据 AJAX 请求从数据库中获取有关州、国家和某个国家的州的信息.我在示例中描述了使用 value 参数以不依赖于服务器组件的解决方案.在使用 dataUrl 和 buildSelect 的情况下，实现的大部分内容是相同的.

The answer on your question depend a little from the source where you receive the information about displayed under "State for US" and "State for UK". The are two possibilities supported by jqGrid: 1) the usage of value parameter of editoptions 2) the usage of dataUrl and buildSelect parameter of the editoptions. The first way is the best one in case of local editing or in the case if the list of possible options is static. The second choose will be used in the case, that the information about states, countries and the states of some country will be get per AJAX request from the database. I describe the solution on the example the usage of value parameter to have no dependencies to the server components. The most parts on the implementation are the same in case of the usage of dataUrl and buildSelect.

我制作了 现场示例，展示了您的需求.

I made the live example which demonstrate what you need.

主要的问题是editoptions的value在初始化的时候只使用了一次.在 dataInit 函数内部，可以覆盖 值，但在第一个选择/下拉框中的值更改后，必须手动重建第二个带有状态的选择/下拉框.为此，必须了解，选择 HTML 元素的 id 由行 id '_' 和列名构成:rowId + "_State".此外，重要的是，editoptions 的value 必须重置为初始值，以便任何状态 id 都可以解码为状态名称.

The main problem is that the value of the editoptions are used only once at the time on the initialization. Inside of dataInit function one can overwrite the value, but after the changing of the value in the first select/drop-down box with countries the second select/drop-down box with states must be rebuild manually. To do so one have to understand, that the select HTML element has id constructed from row id '_' and the column name: rowId + "_State". Moreover it is important, that the the value of the editoptions must be reset to the initial value, so that any state id can be decoded to the state name.

这是来自示例的代码:

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 不支持表单编辑的本地编辑我无法测试代码.尽管如此，我希望我能充分利用所需的更改.

UPDATED: I updated the code above to make it working with in case of form editing too. You can see it live here. Because jqGrid not support local editing for form editing I could not tested the code. Nevertheless I hope that I made the most of required changes.

UPDATED 2:我扩展了上面的代码以支持

UPDATED 2: I extended the above code to support

1. 内联编辑、表单编辑、搜索工具栏和高级搜索
2. 编辑表单中的上一个或下一个导航按钮
3. 改进了选择中的键盘支持(修复了某些浏览器中刷新依赖选择的问题)

演示的新版本在这里.您在下面找到的演示的修改代码:

The new version of the demo is here. The modified code of the demo you find below:

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:您将找到演示代码的最新版本 这里.

UPDATED 3: The last version of the code of the demo you will find here.

这篇关于jqgrid在编辑框中不正确选择下拉选项值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！