DataTable mit dropdown-Spalte

Ich brauche, um dropdown-Spalte in DataTable die jQuery-es ist lookinng wie da unten jetzt DataTable mit dropdown-Spalte

Und ich will es wie das unten stehende Bild
DataTable mit dropdown-Spalte

und der code, den ich verwende, 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
    });
});

InformationsquelleAutor raghav | 2016-03-16

  1. 17

    Andere Weg wäre, um die 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");
        }

    Arbeiten Beispiel.

    was ist d,t,r in Funktion
    d,t,r, werden Parameter übergeben, um die render-Funktion, es ist ein anderer namens meta. Um d ist das die Daten in der Zelle, t ist die Art der Daten und der r ist die gesamte Zeile. Prüfen Sie auf dieser Seite für mehrere DataTable-Güte: datatables.net/reference/option/columns.render
    Genauso wie die Antwort von @Tanmay. Die columns oder columnDefs array können Sie die Verarbeitung der einzelnen Spalten individuell Daten. die data Schlüssel erzählt DataTables, was Sie in die betreffende Zelle und die render Schlüssel erzählt DataTables, wie es zu zeigen. Es ist wirklich ziemlich clever!
    ....meine Datentabellen databasetable-net.000webhostapp.com verwendet columnDefs nicht Spalten-und server-Seite, so kann die post haben ein separates Thema irgendwann... wird Sie wissen lassen, wenn ich das Tue..
    also server-Seite funktioniert nicht mit Ihrem template. Ich könnte die post eine separate Lösung nur so dass ich nicht verlieren es, in der Zukunft (und auch für andere zu finden).

    InformationsquelleAutor annoyingmouse

  2. 1

    DataTables zu haben scheinen, ein editor für diese Art der Sache als refrenced von Namen samyukta und andere: https://editor.datatables.net/examples/inline-editing/simple

    Ich würde sagen, dass ist die einfachste Antwort. Es ist jedoch eine kommerzielle Erweiterung mit einer kostenlosen Testversion nur.

    Wenn Sie wollten etwas jquery code einfach ändern Sie den statischen Zeiten, dropdown-Boxen, könnte man ihm eine Chance geben: 

    //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)
    }
);

    Dies sollte erhalten Sie die drop-down-Boxen, wo Sie Sie benötigen. Ich werde diese überarbeiten, wenn Sie Probleme damit haben.

    InformationsquelleAutor DogPawHat

  3. 1

    Können Sie auf diese Weise dann für die dropdown-Einstellung

     "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");
                            }

    InformationsquelleAutor Tanmay

  4. 0

    Können Sie versuchen, zu verwenden, dies ist was ich jetzt verwende.

    https://github.com/ejbeaty/CellEdit

    Blick auf dieses Beispiel:

    "inputTypes": [
            {
                "column":0, 
                "type":"text", 
                "options":null 
            }, 
            {
                "column":1, 
                "type": "list",
                "options":[
                    { "value": "1", "display": "Beaty" },
                    { "value": "2", "display": "Doe" },
                    { "value": "3", "display": "Dirt" }
                ]
            }

    Hoffe, es hilft jemand.

    InformationsquelleAutor fudu

Schreibe einen Kommentar