Question

我正在使用datatable 1.8它的惊人之处，我最近阅读了一篇关于内联编辑数据表列的文章Inline editing，在本文中点击编辑超链接，数据表列成为文本字段但是我的要求是我必须显示一个下拉列表，意味着单击编辑超链接它应该转换为下拉列表并且应该来自我的数据库数据库，并在保存其值时存储到数据库中。怎么做？

任何帮助对我都有很大的帮助

Answer 1

有一种方法可以获得一个JSON数组，用于在点击“编辑”链接时填充下拉列表，这样就可以通过AJAX调用的“完整”而非“成功”属性获取您的JSON在“fnServerData”里面这样：

"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);
                        }
                    });
                }

在我的例子中，“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">';

当您点击“修改”链接时，您会在所需的字段中获得一个下拉列表。

Answer 2

在我的datatable 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>';
    }

在我的观点上：

@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

如何在内联编辑中使用数据表中的下拉列表

2 个答案: