Question

我需要将下拉列表作为DataTable jQuery中的列，现在看起来如下所示

我希望它像下面的图像

我使用的代码是

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

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

工作example。

Answer 2

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

这可以为您提供所需的下拉框。如果你遇到问题，我会修改它。

Answer 3

您可以使用这种方式进行下拉设置

 SELECT
        SUM(
            (SELECT sum(Tbl1.Cost) FROM Tbl1 WHERE Tbl1.Type = 0) +
            (SELECT sum(Tbl2.Cost) FROM Tbl2 WHERE Tbl2.Type = 0) +
            (SELECT sum(Tbl3.Cost) FROM Tbl3 WHERE Tbl3.Type = 0)
        ) AS EstimatedCost
    FROM Tbl1 <JOIN> Tbl2 <JOIN> Tbl3
    GROUP BY Tbl1.id,Tbl2.id,Tbl3.id,Tbl1.num,Tbl2.num,Tbl3.num

Answer 4

您可以尝试使用此功能，这就是我现在正在使用的功能。

https://github.com/ejbeaty/CellEdit

看这个例子：

RGB<br><input type="range" min="0" max="100" oninput="fRGB(this)">
<br>
HSL<br><input type="range" min="0" max="100" oninput="fHSL(this)">

希望它能帮助某人。

带有下拉列的DataTable

4 个答案: