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

Question

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

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

Answer 1

有一种方法可以在单击“编辑”链接时获取用于填充下拉列表的 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);
                        }
                    });
                }

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

当您单击“编辑”链接时，您将在所需字段中看到一个下拉列表。