javascript - 您可以在 Datatables 中使用 mRender 来呈现动态下拉列表吗？

Question

上图显示了我到目前为止所做的事情。我有一个主页，其中包含工作列表。当用户单击作业时，会弹出一个模态，并在模态中显示有关该作业的所有信息，主要是作业的参数。我在模态中创建了一个表，其id为：EditJobstepTable。然后，当显示模式时，我调用一个函数来填充表格。在数据库中，我们使用不同的 DataTypes 填充表。例如，如果后端中的DataType显示字符串，那么我想返回一个文本框供用户输入新的字符串参数。我创建的另一个示例是当DataType为布尔值时我在数据表单元格中返回一个复选框。

我遇到的问题是当DataType是字符串选择时，我想返回一个下拉列表，但列表的值取决于它们关联的参数。例如，如果我的参数是 A，则下拉列表将包含 1、2、3。如果参数名称是 B，则列表可以包含 4、5、6。因此列表需要根据参数名称/ID 是动态的。

这是我到目前为止所做的。

Job.cshtml 中的 EditJobstepTable

                    <div class="row">
                    <div class="col-md-12">
                        <table class="table table-responsive table-striped table-bordered " id="EditJobstepTable">
                            <thead>
                                <tr>
                                    <td><center><b>Delete</b></center></td>
                                    <td><center><b>Paramter Name</b></center></td>
                                    <td><b>Default Value</b></td>
                                    <td><b>Override Parameter Value</b></td>
                                    <td><b>ParameterID</b></td>
                                </tr>
                            </thead>
                            <tbody>
                            </tbody>
                        </table>
                        <br />
                    </div>
                </div>

Job.cshtml 中的 JavaScript 函数

function LoadParameterTable(JobStepID, PackageID) {
            var stringBuilder;
            $.post('/IT/Example/LoadParameterTable', "JobStepID=" + JobStepID + "&PackageID=" + PackageID, function (results) {
                console.log("Results from LoadParameterTable:")
                console.log(JSON.parse(results))
                $('#EditJobstepTable').DataTable({
                    ordering: true,
                    bDestroy: true,
                    aaSorting: [[1, 'asc']],
                    columnDefs: [
                        { orderable: false, targets: '_all' }
                    ],
                    "scrollY": "350px",
                    "data": JSON.parse(results),
                    "columns": [
                        {
                            "data": null,
                            "class": "right",
                            "mRender": function (data, type, full) {
                                return '<center><button type="button" class="btn btn-danger btn-fill btn-xs"><i class="fa fa-trash-o"></i></button></center>'

                            }
                        },
                        {
                            "data": "ParameterName",
                            "data": "Description",
                            "class": "right",
                            "mRender": function (data, type, row, full) {
                                return'<b>' + row.ParameterName + '&nbsp;</b><a title="' + row.Description + '"><i class="fa fa-info-circle fa-lg"></i></a>'
                            }
                        },
                        {
                            "data": "DefaultValue"
                        },
                        {
                            "data": "ParameterValue",
                            "data": "DataType",
                            "data": "ParameterID",
                            "data": "PackageID",
                            "data": "ParameterName",
                            "class": "right",
                            "mRender": function (data, type, row, full) {

                                if (row.DataType == "string" || row.DataType == "integer") {
                                    if (row.ParameterID != null) {
                                        return '<input style="width: 100%;" type="text" value="'+ row.ParameterValue +'">'
                                    }
                                }
                                if (row.DataType == "boolean") {
                                    if (row.ParameterID > 0) {
                                        return (row.ParameterValue == "True" ? '<input type="checkbox" checked>' : '<input type="checkbox">')
                                    }
                                    else {
                                        return (row.ParameterValue == "True" ? '<input type="checkbox" checked>' : '<input type="checkbox">')
                                    }
                                }
                                if (row.DataType == "string-select") {
                                    stringBuilder = "";
                                    stringBuilder += '<select><option value="">No Override Selection</option>'
                                    $.post('/IT/Example/GetModalDropdown', "PackageID=" + row.PackageID + "&ParameterName=" + row.ParameterName, function (results) {
                                        //console.log(JSON.parse(results)[0]);

                                        array = JSON.parse(results);
                                        array.forEach(function (object) {
                                            stringBuilder += '<option value="' + object.ValueID + '">' + object.ValidValue + '</option>';
                                            //console.log(stringBuilder);
                                        });
                                    })
                                    console.log(stringBuilder);
                                    //console.log(sb.concat('</select>'));
                                    return stringBuilder += '</select>';
                                }
                            }
                        },
                        {
                            "data": "ParameterID"
                        }
                    ]
                });
            })
        }

表格的第一列是一个删除参数按钮，现在只是用于外观，没有任何功能。第二列是当用户将鼠标悬停在图标上时附加了一些信息的参数名称。第三列是默认参数值。第四列是动态的。基于后端，我返回不同的输入字段，就像我上面所说的那样。所以最初我调用一个 post 语句来获取主表所需的数据。然后基于这些结果，如果表包含任何带有字符串选择的数据类型，我的直觉是调用另一个 post 语句，以便我可以获得下拉列表所需的数据。现在我正在尝试让一个字符串生成器添加每个项目然后返回字符串生成器，但我无法正确地把它弄下来。

我主要担心的是 if (row.DataType == "string-select") {} 块。

标签： javascriptjqueryasp.net-mvcrazordatatables