如何在内联编辑中使用数据表中的下拉列表 [英] How to use dropdown list in Datatable in Inline editing

问题描述

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

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?

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

Any help would be of great help for me

推荐答案

有一种方法可以在您单击编辑"链接时获取用于填充下拉列表的 JSON 数组，这种方法是获取您的JSON 通过fnServerData"中的 AJAX 调用的完整"而不是成功"属性，如下所示:

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:

"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 来填充下拉列表:

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:

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.

这篇关于如何在内联编辑中使用数据表中的下拉列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！