Javascript 带有下拉列的数据表

我需要在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
    });
});

天
开始时间
结束时间
$（文档）.ready（函数（）{
$（'#示例'）。数据表({
“aaData”：OrganizationData.OrganizationPreference.ScheduleDaysCol，
“栏目”：[
{“数据”：“DayName”}，
{“数据”：“StartDateHour”}，
{“数据”：“EndDateHour”}
],
“分页”：false，
“命令”：错误，
“信息”：错误，
“过滤器”：错误
});
});

正如Samyukta和其他人所提到的那样，DataTables似乎有一个针对此类内容的编辑器：

我认为这是最简单的答案。然而，这是一个商业扩展，仅提供免费试用

如果您想要一些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)
    }
);

//获取半小时增量列表的实用函数
函数getTimeList（）{
var迭代次数=48次；
var结果=[]；
对于（int i=0；i0？'30'：'00'；
结果.推送（小时+'：'+分钟）；
}
返回结果；
}
函数getOptionTimeList（）{
var raw=getTimeList（）；
var迭代=原始长度；
var结果=“”；
对于（int i=0；i

---

这将为您提供所需的下拉框。如果您有问题，我将对此进行修改。

另一种方法是使用

渲染方法：

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

“渲染”：函数（d、t、r）{
变量$select=$（“”{
“id”：r[0]+“开始”，
“价值”：d
});
$。每个（次，函数（k，v）{
var$选项=$（“”{
“文本”：五、，
“价值”：v
});
如果（d==v）{
$option.attr（“选定”、“选定”）
}
$select.append（$option）；
});
返回$select.prop（“outerHTML”）；
}

正在工作。
您可以使用这种方式进行下拉设置

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

“aaData”：OrganizationData.OrganizationPreference.ScheduleDaysCol，
“columnDefs”：[{“targets”：0，“data”：“DayName”}，
{
"目标":一,，
“数据”：“StartDateTime”，
“呈现”：函数（数据、类型、完整、元）{
变量$select=$（“”{
});
$。每个（次，函数（k，v）{
var$选项=$（“”{
“文本”：五、，
“价值”：v
});
如果（数据===v）{
$option.attr（“选定”、“选定”）
}
$select.append（$option）；
});
返回$select.prop（“outerHTML”）；
}
您可以尝试使用这个，这就是我现在使用的


看看这个例子：

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

希望对大家有所帮助。
函数中的d，t，r是什么
d，t，r，
是传递给渲染函数的参数，还有另一个叫做
meta
。按顺序
d
是单元格中的数据，
t
是数据类型，
r
是整行。查看此页面了解更多数据表的优点：就像来自@Tanmay的回答。
columns
或
columnDefs
数组允许您单独处理每列数据。
data
键告诉DataTables在相关单元格中放置什么，而
render
键告诉DataTables如何显示它。这真的很聪明！…我的DataTables使用columnDefs而不是columns and服务器端所以可能不得不在某个时候发布一个单独的主题…如果我这样做，会让你知道…所以服务器端确实可以使用你的模板。我可能会发布一个单独的解决方案，这样我就不会在将来丢失它（并且让其他人看到）。