Question

我使用http://jtable.org/的最新版JTable（昨天下载）。我设置了我的JTable，如下所示（我还包括下面的服务器端代码，用C＃编写）。 List函数有效（数据显示在表中），Add函数有效，Delete函数有效。但是，当我转到编辑一行时，尝试填充＆＃34; ElevationsMulti＆＃34;的数据时出错。领域。我得到一个错误，简单地说，＆＃34;无法加载字段ElevationsMulti的选项。＆＃34;

JTable代码：

    $('#ReportsContainer').jtable({
        title: 'Reports',
        actions: {
            listAction: '/Report_SingleEstimate/GetReportNames?customerId=' + customerId,
            createAction: '/Report_SingleEstimate/AddReport',
            updateAction: '/Report_SingleEstimate/EditReport',
            deleteAction: '/Report_SingleEstimate/DeleteReport'
        },
        fields: {
            ReportID: {
                key: true,
                list: false
            },
            ReportName: {
                title: 'Report Name'
            },
            CustomerID: {
                title: 'Customer',
                list: false,
                options: '/Estimates/GetCustomers',
                defaultValue: customerId
            },
            PlanNameID: {
                title: 'Plan Name',
                dependsOn: 'CustomerID',
                options: function (data) {
                    if (data.source == 'list') {
                        return '/Estimates/GetListOfPlanNames?customerId=0';
                    }

                    //data.source == 'edit' || data.source == 'create'
                    return '/Estimates/GetListOfPlanNames?customerId=' + data.dependedValues.CustomerID;
                }
            },
            ProductID: {
                title: 'Product',
                options: '/Estimates/GetProducts'
            },
            HeaderFieldsMulti: {
                title: 'Fields',
                options: '/Report_SingleEstimate/GetHeaderFields',
                type: 'multiselectddl',
                list: false
            },
            ElevationsMulti: {
                title: 'Elevations',
                type: 'multiselectddl',
                dependsOn: ['PlanNameID', 'ProductID'],
                options: function (data) {
                    if (data.source == 'list') {
                        return '/Elevation/GetAllElevations';
                    }

                    return '/Report_SingleEstimate/GetElevations?PlanNameID=' + data.dependedValues.PlanNameID +
                           '&ProductID=' + data.dependedValues.ProductID;
                },
                list: false
            }
        }
    });

    $('#ReportsContainer').jtable('load');

不确定它是否会对JTable产生影响，但ElevationsMulti依赖于PlanNameID和ProductID字段，PlanNameID字段取决于CustomerID字段。换句话说，ElevationsMulti字段取决于依赖于另一个字段的字段（多个嵌套下拉列表）。

C＃服务器端代码：

    [HttpPost]
    public JsonResult GetElevations(int PlanNameID, int ProductID)
    {
        try
        {
            int estimateId = Estimates.getEstimateId(PlanNameID, ProductID);
            List<MyDropdownList> elevations = Estimate_ElevationList.listElevationsByEstimateForDropdown(estimateId);

            return Json(new { Result = "OK", Options = elevations });
        }
        catch (Exception ex)
        {
            return Json(new { Result = "ERROR", Message = ex.Message });
        }
    }

错误：

进一步的调试给了我一个更具体的错误。

参数字典包含参数＆＃39; PlanNameID＆＃39;的空条目。非可空类型的System.Int32＆＃39; for method＆＃39; System.Web.Mvc.JsonResult GetElevations（Int32，Int32）＆＃39; in＆＃39; strol.Report_SingleEstimateController＆＃39;。可选参数必须是引用类型，可空类型，或者声明为可选参数。

基本上，JTable将PlanNameID作为空值发送到服务器。这似乎表明当JTable为ElevationsMulti字段调用服务器时，JTable尚未加载PlanNameID字段的选项。

如何在加载PlanNameID字段之前让JTable等待加载ElevationsMulti字段？

Answer 1

问题解决了。

问题来自于在JTable中使用Type“multiselectddl”。我更改了JTable中的代码，该代码将multiselectddl创建为与常规下拉列表相同的代码。这是代码：

    _createInputForRecordField: function (funcParams) {
        ...

        //Create input according to field type
        if (field.type == 'date') {
            return this._createDateInputForField(field, fieldName, value);
        } else if (field.type == 'textarea') {
            return this._createTextAreaForField(field, fieldName, value);
        } else if (field.type == 'password') {
            return this._createPasswordInputForField(field, fieldName, value);
        } else if (field.type == 'checkbox') {
            return this._createCheckboxForField(field, fieldName, value);
        } else if (field.options) {
            if (field.type == 'multiselectddl') {
                return this._createDropDownListMultiForField(field, fieldName, value, record, formType, form);
            } else if (field.type == 'radiobutton') {
                return this._createRadioButtonListForField(field, fieldName, value, record, formType);
            } else {
                return this._createDropDownListForField(field, fieldName, value, record, formType, form);
            }
        } else {
            return this._createTextInputForField(field, fieldName, value);
        }
    },

    _createDropDownListMultiForField: function (field, fieldName, value, record, source, form) {
        //Create a container div
        var $containerDiv = $('<div class="jtable-input jtable-multi-dropdown-input"></div>');

        //Create multi-select element
        var $select = $('<select multiple="multiple" class="' + field.inputClass + '" id="Edit-' + fieldName + '" name=' + fieldName + '></select>')
            .appendTo($containerDiv);

        var options = this._getOptionsForField(fieldName, {
            record: record,
            source: source,
            form: form,
            dependedValues: this._createDependedValuesUsingForm(form, field.dependsOn)
        });

        this._fillDropDownListWithOptions($select, options, value);

        return $containerDiv;
    }

JavaScript JTable - 具有多个级联列表/下拉列表的空值

1 个答案: