JavaScript JTable - 多个级联的空值 lists/dropdowns

Question

我正在使用来自 http://jtable.org/ 的最新版本的 JTable（昨天下载）。我按如下所示设置我的 JTable（我还包括下面的服务器端代码，它是用 C# 编写的）。列表功能有效（数据显示在 table 中），添加功能有效，删除功能有效。但是，当我转到“编辑行”时，尝试填充 "ElevationsMulti" 字段的数据时出现错误。我得到一个简单的错误，"Cannot load options for field ElevationsMulti."

J表代码：

    $('#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 });
        }
    }

此处错误：

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

参数字典包含 's84.Controllers.Report_SingleEstimateController' 中方法 'System.Web.Mvc.JsonResult GetElevations(Int32, Int32)' 的不可为空类型 'System.Int32' 的参数 'PlanNameID' 的空条目。可选参数必须是引用类型、可空类型或声明为可选参数。

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

如何让 JTable 等待加载 ElevationsMulti 字段直到加载 PlanNameID 字段？

Answer 1

问题已解决。

问题来自于在 JTable 中使用类型 "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 - 多个级联的空值 lists/dropdowns

JavaScript JTable - Null value with multiple cascaded lists/dropdowns

javascript

c#

jtable