在jQuery datatable插件行中添加下拉列表

我正在asp.net样板文件中处理一个项目，需要在datatable插件中为状态行添加下拉列表

 var dataTable = _projectsTable.DataTable({
            listAction: {
                ajaxFunction: _projectService.getAllCurrentProjects,
                inputFilter: function () {
                    return {
                        filter: $("#ProjectsTableFilter").val()
                    };
                }
            },
            columns: [
                {
                    defaultContent: "",
                    data: "projectNo",
                    render: function(data, type, row, meta) {
                        return '<a href=/App/Projects/Detail/' + row.id + '>' + (row.projectNo != null ? row.projectNo : "See Project" ) + '</a>';
                    }
                },
                { defaultContent: "", data: "projectName" },
                { defaultContent: "", data: "client" },
                { defaultContent: "", data: "asset" },
                { defaultContent: "", data: "dueDate" },
                { defaultContent: "", data: "projectManager" },
                { defaultContent: "", data: "Status" },
                { defaultContent: "", data: "" }
            ]

        });

---

谢谢

更改代码并应用下面的代码我希望这对您有帮助

var dataTable = _projectsTable.DataTable({
            listAction: {
                ajaxFunction: _projectService.getAllCurrentProjects,
                inputFilter: function () {
                    return {
                        filter: $("#ProjectsTableFilter").val()
                    };
                }
            },
            columns: [
                {
                    defaultContent: "",
                    data: "projectNo",
                    render: function (data, type, row, meta) {
                        return '<a href=/App/Projects/Detail/' + row.id + '>' + (row.projectNo != null ? row.projectNo : "See Project") + '</a>';
                    }
                },
                { defaultContent: "", data: "projectName" },
                { defaultContent: "", data: "client" },
                { defaultContent: "", data: "asset" },
                { defaultContent: "", data: "dueDate" },
                { defaultContent: "", data: "projectManager" },
                {
                    defaultContent: "",
                    data: "Status",
                    render: function (data, type, row, meta) {
                        var dropdown = '';
                        if (row != null) {
                            dropdown += '<select class="form-control">';
                            dropdown += '<option value="0">Select Status</option>';
                            dropdown += '<option value="Completed">Completed</option>';
                            dropdown += '<option value="Cancelled">Cancelled</option>';
                            dropdown += '<option value="InProgress">In Progress</option>';
                            dropdown += '<option value="OnHold">On Hold</option>';
                            dropdown += '<option value="WaitingToStart">Waiting To Start</option>';
                            dropdown += '</select>';
                        }
                        else {
                            dropdown = '<select class="form-control"><option value="0">Select Status</option></select>';
                        }
                        return dropdown;
                    }
                },
                { defaultContent: "", data: "" }
            ]

        });

var dataTable=\u projectsTable.dataTable({
清单行动：{
ajaxFunction:_projectService.getAllCurrentProjects，
inputFilter:函数（）{
返回{
筛选器：$（“#ProjectsTableFilter”）.val（）
};
}
},
栏目：[
{
defaultContent:“”，
数据：“项目编号”，
呈现：函数（数据、类型、行、元）{
返回“”；
}
},
{defaultContent:，数据：“projectName”}，
{defaultContent:，数据：“client”}，
{defaultContent:，数据：“资产”}，
{defaultContent:，数据：“dueDate”}，
{defaultContent:，数据：“projectManager”}，
{
defaultContent:“”，
数据：“状态”，
呈现：函数（数据、类型、行、元）{
var下拉列表=“”；
如果（行！=null）{
下拉菜单+=''；
下拉菜单+=‘选择状态’；
下拉菜单+=‘已完成’；
下拉菜单+=‘已取消’；
下拉菜单+=“正在进行中”；
下拉菜单+=‘保持’；
下拉菜单+='等待启动'；
下拉菜单+=''；
}
否则{
下拉菜单='选择状态'；
}
返回下拉列表；
}
},
{defaultContent:，数据：}
]
});

Purvesh解决方案的问题在于他对下拉列表进行了硬编码。你可能会想，为什么这是个问题。如果明天@mah决定添加一个新状态，那么他/她将需要进行两次更改，一次在服务器端，一次在客户端。为了避免这种情况，您可以通过Ajax获取状态值，如下所示：

服务器端：

以下是您的状态：

public static class ProjectConstants
{
    public static string Completed = "Completed";
    public static string Cancelled = "Cancelled";
    public static string InProgress = "In Progress";
    public static string OnHold = "On Hold";
    public static string WaitingToStart = "Waiting To Start";
}

您可以使用反射获得它们：

[WebMethod]
[ScriptMethod(UseHttpGet = true)]
public static object GetStatus()
{
    FieldInfo[] fields = typeof(ProjectConstants).GetFields(BindingFlags.Static | BindingFlags.Public);

    var statusInfo = fields.Select(x => new { Text = x.GetValue(null).ToString(), Value = x.Name }).ToList();

    return Newtonsoft.Json.JsonConvert.SerializeObject(statusInfo);
}

function getStatus() {
    return  $.ajax({
                type: "GET",
                url: "wfDropDown.aspx/GetStatus",
                contentType: 'application/json; charset=utf-8',
                dataType: 'json'
            });
    }

客户端：

使用Ajax获取您的状态：

[WebMethod]
[ScriptMethod(UseHttpGet = true)]
public static object GetStatus()
{
    FieldInfo[] fields = typeof(ProjectConstants).GetFields(BindingFlags.Static | BindingFlags.Public);

    var statusInfo = fields.Select(x => new { Text = x.GetValue(null).ToString(), Value = x.Name }).ToList();

    return Newtonsoft.Json.JsonConvert.SerializeObject(statusInfo);
}

function getStatus() {
    return  $.ajax({
                type: "GET",
                url: "wfDropDown.aspx/GetStatus",
                contentType: 'application/json; charset=utf-8',
                dataType: 'json'
            });
    }

包括创建下拉列表的功能：

function createDropDown(data) {

    var html = '<select><option value="">Select a Stauts...</option>';

    for (var item of data) {

        html += '<option value="' + item.Value + '">' + item.Text + '</option>';
    }

    html += '</select>';

    return html;
}

这将是最终结果：

---

快乐编码

您的问题是什么？如何更改这一行：{defaultContent:，data:“Status”}，以显示包含所述状态的下拉列表

$(document).ready(function () {

    getStatus()
        .done(function (response) {

            var data = $.parseJSON(response.d);
            var dropDown = createDropDown(data);

            initializeDataTable(dropDown);
        })
        .fail(function (jqXHR, textStatus, errorThrown) {
            console.error('There was something wrong trying to delete the Employee. Type: ' + textStatus + ". Description: " + errorThrown);
        });
});