Question

我需要从jquery ajax调用加载一个可编辑的表。让用户编辑/更新它，然后批量插入/更新到数据库。在此表中，有一个名为Type的列。这是一个下拉列表。由原始值加载，但可以让用户更改它。我应该如何从ajax调用中添加下拉列表。

 success: function (returndata)
{
    if (returndata.ok) {
        var tbl = "<table id='tbl' border='1' class='table table-hover'><thead><tr style='text-align:center;'>"
        tbl += "<th>Name</th><th>Hours</th><th>Comment</th><th>Type</th></thead></table>"
        $("#Table").append(tbl);
        $.each(returndata.data, function (index, itemData) {
            var tbody = "<tr style='text-align:center;'><td><input id='txtName"+itemData.Id+"' style='width:70px;' type='text' value='"+itemData.Name+"'></td>"
            tbody +="<td><input id='txtHours"+itemData.Id+"' style='width:40px;' type='text' value='"+itemData.Hours+"'></td>"
            tbody +="<td><input id='txtComent"+itemData.Id+"' type='text' value='"+itemData.Comment+"'></td>"
            tbody +="<td><select id='ddlType"+itemData.Id+"'><option value=''>Select Type</option></td>"
        });
    }
    else {
        window.alert(' error : ' + returndata.message);
    }
}

Answer 1

我创建了另一个全局变量s并使用所有选项加载。加载表格时，我首先加载所有选项，然后替换selecteditem add＆＃34; selected =＆＃34; selected＆＃34; 。现在它有效。这可能不是最佳做法。请给我你的建议。

var TypeOptions = @Html.Raw(Json.Encode(ViewData["Type"]));
var s='<option value="">Select Type</option>';

for (var e=0; e < TypeOptions.length; e++)
{
    var lt =  TypeOptions[e];
    s += '<option value="'+lt["TypeId"]+'">'+lt["Type"]+' </option>';
}

success: function (returndata)
{
    if (returndata.ok) {
        var tbl = "<table id='tbl' border='1' class='table table-hover'><thead><tr style='text-align:center;'>"
        tbl += "<th>Name</th><th>Hours</th><th>Comment</th><th>Type</th></thead>"
        $("#Table").append(tbl);
        $.each(returndata.data, function (index, itemData) {
            var tbody = "<tr style='text-align:center;'><td><input id='txtName"+itemData.Id+"' style='width:70px;' type='text' value='"+itemData.Name+"'></td>"
            tbody +="<td><input id='txtHours"+itemData.Id+"' style='width:40px;' type='text' value='"+itemData.Hours+"'></td>"
            tbody +="<td><input id='txtComent"+itemData.Id+"' type='text' value='"+itemData.Comment+"'></td>"
            tbody +="<td><select id='ddlType"+itemData.Id+"'>"+ s +"</select></td></tr>"
            tbody = tbody.replace('<option value="'+itemData.TypeId+'">', '<option selected="selected" value="'+itemData.TypeId+'">');  
        });
        tbl += tbody+"</table>"
    }
    else {
        window.alert(' error : ' + returndata.message);
    }
}

jquery用dropdownlist里面加载所有行的可编辑表

1 个答案: