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

问题描述

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

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数组来填充下拉列表的方法，那就是通过AJAX的完整而非成功属性获取JSON调用里面的fnServerData这样：

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.

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