Как использовать выпадающий список в Datatable во встроенном редактировании - PullRequest
Новая
       40

Как использовать выпадающий список в Datatable во встроенном редактировании

4 голосов
/ 14 февраля 2012

Я использую datatable 1.8, это удивительно, я недавно прочитал статью о встроенном редактировании столбца данных, Встроенное редактирование , в этой статье при нажатии на гиперссылку редактирования столбцы данных становятся текстовым полем, но мой Требование заключается в том, что мне нужно показать выпадающий список, значит, при нажатии на гиперссылку редактирования он должен быть преобразован в выпадающий список. и должен исходить из базы данных моей базы данных, а при сохранении его значений храниться в базе данных. Как это сделать?

Любая помощь будет очень полезна для меня

Ответы [ 2 ]

3 голосов
/ 30 декабря 2013

Существует способ получить массив JSON для заполнения раскрывающегося списка в тот момент, когда вы нажимаете ссылку «изменить», таким образом вы получаете свой JSON с помощью атрибута «завершить», а не «успешно» вашего вызова AJAX.внутри "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">';

Когда вы нажмете на ссылку «изменить», вы получите выпадающий список в нужных полях.

1 голос
/ 01 июня 2017

В моем коде данных JS: 

    function editRow(oTable, nRow) {
        //comes from Razor
        var model = new Object();
        model = insuranceCompanies;

        var aData = oTable.fnGetData(nRow);
        var jqTds = $('>td', nRow);
        jqTds[0].innerHTML = '<input type="text" name="CompanyId" class="form-control input-small" value="' + aData[0] + '">';
        jqTds[1].innerHTML = '<select name="Description"></select>';
        for (i = 0; i < model.length; i++) {
            $('#Description').append('<option value=' + model[i].CompanyId + '>' + model[i].CompanyName + '</option>');
        }
        jqTds[2].innerHTML = '<input type="text" name="PolicyNumber" class="form-control input-small" value="' + aData[2] + '">';
        jqTds[3].innerHTML = '<input type="text" name="Action" class="form-control input-small" value="' + aData[3] + '">';
        jqTds[4].innerHTML = '<a class="edit btn-sm btn-primary" href="">Save</a>';
        jqTds[5].innerHTML = '<a class="cancel btn-sm btn-default" href="">Cancel</a>';
    }

В моем представлении: 

@section scripts
<script type="text/javascript">
   var app_base = '@Url.Content("~/")';
   var insuranceCompanies = @Html.Raw(Json.Encode(Model.InsuranceCompanies));
</script>
   @Scripts.Render("~/ScriptsWithDataTables")
   @Scripts.Render("~/Scripts/customajax/patient.insurancecompany.js")
End Section
...