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

JavaScript JTable - Null value with multiple cascaded lists/dropdowns

本文关键字:下拉列表 Null 列表 级联 JTable- JavaScript      更新时间:2024-04-11

我使用的是http://jtable.org/(昨天下载)。我设置了如下所示的JTable(我还包含了下面用C#编写的服务器端代码)。List功能起作用(数据显示在表中),Add功能起作用,Delete功能起作用。但是,当我转到"编辑行"时,在尝试填充"ElevationsMulti"字段的数据时出现错误。我得到一个错误,简单地说,"无法加载字段ElevationsMulti的选项。"

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字段。换句话说,"高程多"字段依赖于一个依赖于另一个字段的字段(多个嵌套下拉列表)。

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)"的不可为null类型"System.Int32"的参数"PlanNameID"的null条目。可选参数必须是引用类型、可为null的类型,或者声明为可选参数

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

如何使JTable等待加载ElevationsMulti字段,直到加载PlanNameID字段之后?

问题已解决。

问题来自于在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;
    }