依赖的下拉列表jqgrid

时间:2011-08-22 22:14:23

标签: asp.net-mvc jqgrid

我需要使用jqgrid加载一个依赖的下拉列表。这是我的代码的一部分(我正在使用MVC)

{ name: 'parIDUnidadMedida', index: 'parIDUnidadMedida', width: 80, align: 'center', editable: true, edittype: "select",
                    editrules: { required: true },
                    editoptions: {
                        multiple: false,
                        size: 1,
                        dataUrl: '@Url.Content("~/")' + 'CertificadoGarantiaExtendidaOpciones/ListarUnidadesMedida/',
                        buildSelect: function (data) {
                            var response = jQuery.parseJSON(data);
                            var s = '<select>';
                            if (response && response.length) {
                                for (var i = 0, l = response.length; i < l; i++) {
                                    var ri = response[i];
                                    s += '<option value="' + ri.Value + '">' + ri.Text + '</option>';
                                }
                            }
                            return s + "</select>";
                        },
                        dataEvents: [{
                            type: 'change',
                            fn: function (e) {
                                var varIDUnidadMedida = e.currentTarget.value;
                                newOptions = '';
                                var arrPlazos = $.ajax({
                                    url: '@Url.Content("~/")' + 'CertificadoGarantiaExtendidaOpciones/ListarPlazos/' + varIDUnidadMedida,
                                    async: false
                                }).responseText;

                                var response = jQuery.parseJSON(arrPlazos);
                                for (var i = 0; i < response.length; i++) {
                                    newOptions += '<option value="' + response[i].Value + '">' + response[i].Text + '</option>';
                                }

                                $('parPlazo').html(newOptions);
                            }
                        }]
                    }
                },
                { name: 'parPlazo', index: 'parPlazo', width: 80, align: 'center', editable: true, edittype: "select",
                    editrules: { required: true },
                    editoptions: {
                        multiple: false,
                        size: 1
                    }
                },

如您所见,parIDUnidadMedida选择控制更改是否必须更新parPlazo ...

你帮我吗?我不知道如何解决它。

问候。

1 个答案:

答案 0 :(得分:0)

好的...在找到答案之后我得到了它.. 你看我做了一些小修正,但主要原因因为它不起作用是因为我从未加载过第二个下拉列表(parPlazo)。所以select parPlazo没有id或名字。显然它永远不会达到

这是代码。我希望这可以帮助你。 此致

{ name: 'parIDUnidadMedida', index: 'parIDUnidadMedida', width: 80, align: 'center', editable: true, edittype: "select",
                    editrules: { required: true },
                    editoptions: {
                        multiple: false,
                        size: 1,
                        dataUrl: '@Url.Content("~/")' + 'CertificadoGarantiaExtendidaOpciones/ListarUnidadesMedida/',
                        buildSelect: function (data) {
                            var response = jQuery.parseJSON(data);
                            var s = '<select>';
                            if (response && response.length) {
                                for (var i = 0, l = response.length; i < l; i++) {
                                    var ri = response[i];
                                    s += '<option value="' + ri.Value + '">' + ri.Text + '</option>';
                                }
                            }
                            return s + "</select>";
                        },
                        dataEvents: [{
                            type: 'change',
                            fn: function (e) {
                                var varIDUnidadMedida = e.currentTarget.value;
                                $.ajax({
                                    url: '@Url.Content("~/")' + 'CertificadoGarantiaExtendidaOpciones/ListarPlazos/' + varIDUnidadMedida,
                                    type: 'GET',
                                    success: function (PlazosJson) {
                                        var plazos = eval(PlazosJson);
                                        var plazosHtml = "";
                                        $(plazos).each(function (i, option) {
                                            plazosHtml += '<option value="' + option.Value + '">' + option.Text + '</option>';
                                        });

                                        // Poblar los datos
                                        if ($(e.target).is('.FormElement')) {
                                            // En caso de se formulario de edicion, añadir
                                            var form = $(e.target).closest('form.FormGrid');
                                            $("select#parPlazo.FormElement", form[0]).html(plazosHtml);
                                        } else {
                                            // Edicion de una linea
                                            var row = $(e.target).closest('tr.jqgrow');
                                            var rowId = row.attr('id');
                                            var rowId = jQuery("#grid").jqGrid('getGridParam', 'selrow');
                                            jQuery("select#" + rowId + "_parPlazo").append(plazosHtml);
                                        }
                                    }
                                });
                            }
                        }]
                    }
                },
                { name: 'parPlazo', index: 'parPlazo', width: 80, align: 'center', editable: true, edittype: "select",
                    editrules: { required: true },
                    editoptions: {
                        multiple: false,
                        size: 1,
                        dataUrl: '@Url.Content("~/")' + 'CertificadoGarantiaExtendidaOpciones/ListarPlazos/1',
                        buildSelect: function (data) {
                            var response = jQuery.parseJSON(data);
                            var s = '<select>';
                            if (response && response.length) {
                                for (var i = 0, l = response.length; i < l; i++) {
                                    var ri = response[i];
                                    s += '<option value="' + ri.Value + '">' + ri.Text + '</option>';
                                }
                            }
                            return s + "</select>";
                        }
                    }
                },