web-dev-qa-db-ja.com

ドロップダウン列のあるDataTable

私はDataTable jQueryの列としてドロップダウンを作成する必要があります、それは現在以下のように見えます Datatable now

下の画像のようにしたい enter image description here

そして私が使用するコードは

<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
    });
});
javascriptjqueryhtmltwitter-bootstrapdatatables
6
raghav

もう1つの方法は、renderメソッドを使用することです。

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

動作 例 。

18
annoyingmouse

DataTablesは、Samyuktaや他の人たちが参照しているように、この種の事柄のエディタを持っているようです： https://editor.datatables.net/examples/inline-editing/simple

それが一番簡単な答えです。ただし、これは無料の試用版のみの商用拡張です。

いくつかのjqueryコードで静的時間をドロップダウンボックスに変更するだけの場合、これを試してみることができます。

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

これにより、必要な場所にドロップダウンボックスが表示されます。問題がある場合は修正します。

1
DogPawHat

この方法をドロップダウン設定に使用できます

 "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

これを使用してみることができます。これは私が現在使用しているものです。

https://github.com/ejbeaty/CellEdit

この例を見てください：

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

それが誰かを助けることを願っています。

0
fudu