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

Question

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

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

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">';

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