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

2023-11-21

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

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


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

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

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

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

随机推荐