Question

我使用jqGrid 4.2.0。在EditForm中有两个选择： 1）REGION_ID - 填写表格开头 2）TOWN_ID - 必须显示所选区域的城镇

当我第一次打开表单并更改REGION时，城镇列表没有改变，并且未调用函数 regionOnChange 。但是当我关闭表单并在更改区域后再次单击“添加”按钮时，城镇列表会发生变化。

请帮助解决这个问题。

colModel: [
                  { name: 'Id', index: 'Id', width: 30, align: 'left', hidden: true, editrules: { edithidden: true} },
                  { name: 'NAME', index: 'NAME', width: 250, align: 'left', editable: true, editoptions: { size: 64} },
                { name: 'REGION_ID', index: 'REGION_ID', hidden: true, edittype: "select", editable: true, editrules: { edithidden: true }
                    , editoptions: { dataUrl: '/Directory/GetRegion?countryId_=0',
                        buildSelect: function(data) {
                            var d = jQuery.parseJSON(data)
                            var s = '<select id="TOWN_ID">';
                            if (d.length) {
                                $.each(d, function(i) {                                        
                                        s += '<option value="' + this.id + '">' + this.name + '</option>';
                                });
                            }
                            return s + "</select>";
                        }
                        }
                    },                    
                { name: 'TOWN_ID', index: 'TOWN_ID', hidden: true, edittype: "select", editable: true, editrules: { edithidden: true }
                    , editoptions: { dataUrl: '/Directory/GetTowns?regionId_=62',
                        buildSelect: function(data) {
                            var d = jQuery.parseJSON(data)
                            var s = '<select>';
                            if (d.length) {
                                $.each(d, function(i) {                                        
                                        s += '<option value="' + this.id + '">' + this.name + '</option>';
                                });
                            }
                            return s + "</select>";
                        }
                    }
                },

...

jQuery("#list").jqGrid('navGrid', '#pager',
            { del: false, add: true, edit: false, search: false, jqModal: true },  //options
            {},                                                     //edit option
            {width: 450, jqModal: true, closeAfterAdd: true, afterSubmit: processAddEdit, afterShowForm: processShowForm
                ,onInitializeForm: onInitFrm },                     //add option
            {},                                                     //del
            {},                                                     //search
            {}                                                                                                            
            );

这是选择了另一个REGION

之后TOWN列表如何变化的代码

    function onInitFrm(formid) {    
       $("select").filter("#REGION_ID").change(regionOnChange);
    }
    function processShowForm(formid) {           
        $("select").filter("#REGION_ID").change(regionOnChange);
    }

    function regionOnChange(reg) {
        var f = $("select[id='REGION_ID'] option:selected").val();
        $("select[id='TOWN_ID'] option").remove();
        if (f > 0) {
            $.getJSON("/Directory/GetTowns", { regionId_: f }, getTown);
        }
    }

    function getTown(tow) {
        $("select[id='TOWN_ID'] option").remove();
        $("select[id='TOWN_ID']").append("<option value=0> </option>");

        $.each(tow, function(i) {         
            $("select[id='TOWN_ID']").append("<option value=" + this.id + ">" + this.name + "</option>");
        });
    }

Answer 1

我已添加此行修正了它：, dataEvents: [{ type: 'change', fn: regionOnChange}] 编辑选项。））

在EditForm中选择jqGrid

1 个答案: