弹出编辑模式下的jqgrid级联下拉列表

Question

我有两个下拉列表，第一个是从数据库值填充的，第二个 (PriceCode) 取决于用户在第一个 (CurrCd) 中选择的内容。我的问题是如何动态填充第二个列表？我试图在 dataEvents 中执行此操作，但无法在编辑模式下引用第二个下拉列表。是否有正确且合乎逻辑的方法？

到目前为止，这是我的代码：

 grid.jqGrid({
            datatype: 'local',
            jsonReader: als.common.jqgrid.jsonReader('EntityCd'),
            mtype: 'POST',
            pager: '#billingPager',
            loadonce: true,
            colNames: ['Currency', 'Status', 'Bill Curr', 'Price Code'],
            colModel: [
                {
                               { name: 'DefaultCurr', index: 'DefaultCurr', width: 20, sortable: false },
                { name: 'BillStatus', index: 'BillStatus', width: 13, sortable: false },
                {
                    name: 'CurrCd', index: 'CurrCd', width: 20, sortable: false,
                    editable: true,
                    edittype: 'select', stype: 'select',
                    editoptions: {
                        dataUrl: als.common.getServerPath() + 'LegalEntitiesAjax/GetCurrencies',
                        dataEvents:[{
                            type:"change",
                            fn: function (e) {

                                //populate price code list here                           
                                //below does not work to populate PriceCode

                                $.ajax({
                                    type: 'POST',
                                    traditional: true,
                                    contentType: 'application/json; charset=utf-8',
                                    url: als.common.getServerPath() + 'LegalEntitiesAjax/GetPriceList',
                                    data: JSON.stringify({ curcd: this.value }),
                                    async: false,
                                    success: function (data) {                                       

                                        for(i=0; i < data.length; i++) {
                                            $('select#PriceCode').append('<option val=\"' + data[i].PriceCode + '">' + data[i].Description + '</option>');
                                        }


                                    },
                                    error: function (val) { }
                                });


                            }
                        }],

                        buildSelect: function (data) {
                            var currSelector = $("<select id='selCurr' />");
                            $(currSelector).append($("<option/>").val('').text('---Select Currency---'));
                            var currs = JSON.parse(data);
                            $.each(currs, function () {
                                var text = this.CurName;
                                var value = this.CurCode;
                                $(currSelector).append($("<option />").val(value).text(text));
                            });

                            return currSelector;
                        }
                    }
                },
                { name: 'PriceCode', index: 'PriceCode', width: 20, sortable: false, editable: true, edittype: 'select', stype: 'select'}
            ],
            loadtext: 'Loading...',
            caption: "Bill Entities",
            scroll: true,
            hidegrid: false,
            height: 300,
            width: 650,
            rowNum: 1000,
            altRows: true,
            altclass: 'gridAltRowClass',
            onSelectRow: webview.legalentities.billing.onBillingSelected,
            loadComplete: function (data) {
                if (data.length > 0)
                {

                }
                var rowIds = $('#billingGrid').jqGrid('getDataIDs');
                $("#billingGrid").jqGrid('setSelection', rowIds[0]);
            },
            rowNum: 1000
        });
        grid.jqGrid('navGrid', '#billingPager', {
            add: ($("#dev").text() == "True" || $("#globalqc").text() == "True"),
            edit: false,
            del: false,
            search: false,
            refresh: false
        },
        { // Edit Options  
        },
        { // Add Options
            addCaption: 'Add New Billing Entity',
            beforeInitData: function (formid) {

            },
            url: als.common.getServerPath() + 'LegalEntitiesAjax/AddBillingEntity/',
            recreateForm: true,
            closeAfterAdd: true,
            reloadAfterSubmit: true
        },
        { // Del Options
        });

Answer 1

The old answer 展示了如何实现依赖选择。您使用表单编辑。因此，表单编辑的 PriceCode 列的 <select> 元素将具有 id="PriceCode"。您可以使用 $("#PriceCode").html(/*new options*/); 在 CurrCd 列的 change 事件处理程序中更改 <select> 编辑字段 PriceCode 列的选项。

弹出编辑模式下的jqgrid级联下拉列表

jqgrid cascading dropdown lists in pop up edit mode

javascript

editmode

jqgrid