web-dev-qa-db-de.com

Datentabelle mit Dropdown-Spalte

Ich muss Dropdown als Spalte in DataTable jQuery machen, es sieht so aus, wie unten im Moment  Datatable now

Und ich möchte es wie im Bild unten  enter image description here

und der Code, den ich benutze, ist

<table id="example" class="hover row-border dataTable" role="grid" width="100%">
    <thead class="dataTableHeader">
        <tr>
            <th>Days</th>
            <th>Start Time</th>
            <th>End Time</th>
        </tr>
    </thead>
</table>

$(document).ready(function () {
    $('#example').DataTable({
        "aaData": OrganizationData.OrganizationPreference.ScheduleDaysCol,
        "columns": [
            {"data": "DayName"},
            {"data": "StartDateHour"},
            {"data": "EndDateHour"}

        ],
        "paging": false,
        "ordering": false,
        "info": false,
        "filter": false
    });
});
5
raghav

Eine andere Möglichkeit wäre die Verwendung der render-Methode:

        "render": function(d,t,r){
            var $select = $("<select></select>", {
                "id": r[0]+"start",
                "value": d
            });
            $.each(times, function(k,v){
                var $option = $("<option></option>", {
                    "text": v,
                    "value": v
                });
                if(d === v){
                    $option.attr("selected", "selected")
                }
                $select.append($option);
            });
            return $select.prop("outerHTML");
        }

Arbeits Beispiel .

16
annoyingmouse

DataTables scheint einen Editor für diese Art von Dingen zu haben, der von Samyukta und anderen aufgefrischt wurde: https://editor.datatables.net/examples/inline-editing/simple

Ich würde sagen, das ist die einfachste Antwort. Es handelt sich jedoch um eine kommerzielle Erweiterung mit einer kostenlosen Testversion.

Wenn Sie einen Jquery-Code wünschen, um einfach die statischen Zeiten in Dropdown-Boxen zu ändern, können Sie Folgendes versuchen: 

//utility functions to get half-hour increment lists
function getTimeList(){
    var iterations = 48;
    var result = [];
    for(int i = 0; i < iterations; i++){
        var hour = Math.floor(i / 2);
        var minute = (i % 2) > 0 ? '30' : '00';
        result.Push(hour + ':' + minute);
    }
    return result;
}

function getOptionTimeList(){
    var raw = getTimeList();
    var iterations = raw.length;
    var result = '';
    for(int i = 0; i < iterations; i++){
        result = result + '<option>' + raw[i] + '</option>';
    }
    return result;
}


//I'm using the not selector to avoid changing the days into dropdown by accident
$('#example tbody tr td:not(#example tbody tr:first-child)').each(
    function(index, element){
        var value = element.innerHTML;
        var optionList = getOptionTimeList();
        var replacement = '<td><select>' + optionList + '</select></td>';


        $(element).replaceWith(replacement)
    }
);

Damit sollten Sie die Dropdown-Felder dort finden, wo Sie sie benötigen. Ich werde das überarbeiten, wenn Sie Probleme damit haben.

1
DogPawHat

Sie können diesen Weg dann für die Dropdown-Einstellung verwenden

 "aaData": OrganizationData.OrganizationPreference.ScheduleDaysCol,
                        "columnDefs": [{ "targets": 0,"data": "DayName" },
                            {
                            "targets": 1,
                            "data": "StartDateTime",
                           "render": function (data, type, full, meta) {
                                    var $select = $("<select></select>", {
                                    });
                                    $.each(times, function (k, v) {

                                        var $option = $("<option></option>", {
                                            "text": v,
                                            "value": v
                                        });
                                        if (data === v) {
                                            $option.attr("selected", "selected")
                                        }
                                        $select.append($option);
                                    });
                                    return $select.prop("outerHTML");
                            }
1
Tanmay