0

我有一个启用了添加对话框以添加新行的 jqgrid。我希望它的工作方式是用户将从下拉项目列表中进行选择，并且选择的项目将导致第二个下拉列表填充基于第一个项目的数据。

例如，如果我的网格有两列，一列代表国家，一列代表州，当用户单击添加按钮时，国家输入将是一个下拉列表，通过 ajax 调用动态填充国家。然后，当用户选择一个国家/地区时，将根据所选国家/地区填充州下拉菜单。

目前我正在做类似以下的事情：

            beforeProcessing: function () {
                var allcountries = ajaxcall();
                $('#clientReportsGrid').setColProp('Countries', { editoptions: { value: allcountries, class: 'edit-select' }, editrules: { required: true, edithidden: true} });
            },
            loadComplete: function () {
                $('#Countries').change(function () {
                    // States will be populated here
                    alert("changed");
                });
            }

beforeProcessing 的第一部分工作正常，并且按预期填充国家下拉列表。但是，loadComplete 中的事件不会附加到 ID 为“Countries”的选择输入，并且永远不会发生警报。似乎尚未使用 loadComplete 触发创建选择对象，但如果是这种情况，我不确定将填充状态的逻辑放置在何处。

有任何想法吗？

4

2 回答 2

1

jqGrid 没有对依赖选择的直接支持，但在答案中您会找到该场景的实现。最大的问题是代码不小，但分析一个工作代码就像编写自己的代码一样快。

于 2012-06-29T17:24:44.877 回答
0

我最终做了类似以下的事情，它有点多余，但它可以工作并且代码不太重：

首先，在 beforeProcessing 回调中，我用它们的初始值填充国家和州下拉列表：

beforeProcessing: function () {
            var allcountries = ajaxCallToFetchCounties();
            $('#clientReportsGrid').setColProp('Countries', { editoptions: { value: allcountries, class: 'edit-select' }, editrules: { required: true, edithidden: true} });
            var states = ajaxCallToFetchStates();
            $('#clientReportsGrid').setColProp('States', { editoptions: { value: states , class: 'edit-select' }, editrules: { required: true, edithidden: true} });
        }

然后在寻呼机的添加选项中，我使用 beforeShowForm 回调将一个方法附加到国家/地区选择输入的更改事件，并在该方法中，我根据当前国家/地区获取状态并重新填充选择控件：

beforeShowForm: function (form) {
                $("#Countries").unbind("change").bind("change", function () {
                    var states = ajaxCallToFetchStates();
                    //Manually clear and re-populate the states select box here with the new list of states.
                });
                $('#tr_AccountCode', form).show();
            }
于 2012-07-04T19:25:36.580 回答