jQuery 如何在内联编辑中使用数据表中的下拉列表
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9275663/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to use dropdown list in Datatable in Inline editing
提问by zohaib siddiqui
I am using datatable 1.8 its amazing, I have recently read an article regarding inline editing of datatable column, Inline editing, in this article on clicking on edit hyperlink the datatable columns becomes text field but my requirement is that i have to show a dropdown list, means on clicking on edit hyperlink it should get converted into dropdown list and should come from my database database, and on saving its values get stored into database. How to do this?
我正在使用数据表 1.8，它太棒了，我最近阅读了一篇关于数据表列的内联编辑的文章，内联编辑，在这篇关于单击编辑超链接的文章中，数据表列变为文本字段，但我的要求是我必须显示一个下拉列表, 意味着点击编辑超链接它应该被转换成下拉列表并且应该来自我的数据库数据库，并且在保存它的值时被存储到数据库中。这该怎么做？
Any help would be of great help for me
任何帮助都会对我有很大帮助
回答by jcflorezr
There is a way to obtain a JSON array for filling a dropdown list in the moment when you make a click to "edit" link, that way is get your JSON through "complete" rather "success" attribute of your AJAX call inside "fnServerData" like this:
有一种方法可以在您单击“编辑”链接时获取用于填充下拉列表的 JSON 数组，这种方法是通过“fnServerData”中的 AJAX 调用的“完整”而不是“成功”属性获取您的 JSON “ 像这样：
"fnServerData": function(sSource, aoData, fnCallback, oSettings) {
oSettings.jqXHR = $.ajax({
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": "opcionesMenu=ini",
"success": fnCallback,
"complete": function(resp) {
jsonSelects = JSON.parse(resp.responseText);
}
});
}
In my example "jsonSelects" is a global variable where I can obtain my JSON everywhere inside my code, then I will use my JSON to fill a dropdown list when editing like this:
在我的例子中，“jsonSelects”是一个全局变量，我可以在我的代码中的任何地方获取我的 JSON，然后我将在编辑时使用我的 JSON 来填充下拉列表，如下所示：
function editRow(oTable, nRow)
{
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
//Dropdown list
jqTds[2].innerHTML = '<select id="selMenu"></select>';
for(i = 0; i < jsonSelects.menu.length; i++) {
$('#selMenu').append('<option value=' + jsonSelects.menu[i].cod_elemento + '>' + jsonSelects.menu[i].nombre_elemento + '</option>');
}
//Dropdown list
jqTds[3].innerHTML = '<select id="selIdioma"></select>';
for(i = 0; i < jsonSelects.idioma.length; i++) {
$('#selIdioma').append('<option value=' + jsonSelects.idioma[i].codigo_idioma + '>' + jsonSelects.idioma[i].nombre_idioma + '</option>');
}
// Input text
jqTds[4].innerHTML = '<input value="' + aData["opcion"] + '" type="text">';
When you click in the "edit" link you will get a dropdown list in the fields that you wanted.
当您单击“编辑”链接时，您将在所需字段中获得一个下拉列表。
回答by JoshYates1980
Within my datatable js code:
在我的数据表 js 代码中：
function editRow(oTable, nRow) {
//comes from Razor
var model = new Object();
model = insuranceCompanies;
var aData = oTable.fnGetData(nRow);
var jqTds = $('>td', nRow);
jqTds[0].innerHTML = '<input type="text" name="CompanyId" class="form-control input-small" value="' + aData[0] + '">';
jqTds[1].innerHTML = '<select name="Description"></select>';
for (i = 0; i < model.length; i++) {
$('#Description').append('<option value=' + model[i].CompanyId + '>' + model[i].CompanyName + '</option>');
}
jqTds[2].innerHTML = '<input type="text" name="PolicyNumber" class="form-control input-small" value="' + aData[2] + '">';
jqTds[3].innerHTML = '<input type="text" name="Action" class="form-control input-small" value="' + aData[3] + '">';
jqTds[4].innerHTML = '<a class="edit btn-sm btn-primary" href="">Save</a>';
jqTds[5].innerHTML = '<a class="cancel btn-sm btn-default" href="">Cancel</a>';
}
On my View:
在我看来：
@section scripts
<script type="text/javascript">
var app_base = '@Url.Content("~/")';
var insuranceCompanies = @Html.Raw(Json.Encode(Model.InsuranceCompanies));
</script>
@Scripts.Render("~/ScriptsWithDataTables")
@Scripts.Render("~/Scripts/customajax/patient.insurancecompany.js")
End Section
