如何在执行内联编辑时在数据表中显示包含值的下拉列表

How to display dropdown list with values in the datatable while performing inline editing?

本文关键字：显示 包含值 下拉列表 数据表 编辑 执行      更新时间：2023-09-26

在执行内联编辑时，我需要在特定单元格中显示下拉列表，并且需要从datatbase加载下拉列表中的值。我知道如何在数据表之外的下拉列表中加载值。当它在数据表中时，这是同一个过程吗
请给我一些执行这项任务的想法？

这是我的代码，点击的行将有文本框和下拉列表（没有任何值）

   var table = $('#jsontable').DataTable();
        $('#jsontable').DataTable().column(0).visible(false);
        $('#jsontable').DataTable().column(3).visible(false);           
        var nEditing = null;          
            $('#jsontable tbody').on('dblclick', 'tr', function () {                           
            var nRow = $('#jsontable').dataTable().fnGetNodes(this);
            d = $('#jsontable').DataTable().row(this).data();
            editRow(table, nRow);
            nEditing = nRow;
        });
 function editRow(table, nRow){          
        var jqTds = $('>td', nRow);      
        jqTds[0].innerHTML = '<div class="col-sm-3"><select class="form-control" value: "' + d[1] + '" optionsCaption: "All"  id="channel"></select></div>';          
        jqTds[1].innerHTML = '<input type="text" value="' + d[2] + '">';
        jqTds[2].innerHTML = '<input type="text" value="' + d[4] + '">';
        jqTds[3].innerHTML = '  <div class="col-sm-6" id="dt-container" data-bind="validationElement: locationEffcetivefromdate"><div class="input-append input-group date"> <input type="text" value="' + d[5] + '"><span class="input-group-addon"><i class="fa fa-calendar"></i></span></div></div>';          
            }

这是我的表格html代码，

<div id="locationtable" class="ibox-content">
                    <table id="jsontable" class="table table-striped table-bordered table-hover dataTables-example" style="width:100%">
                        <thead>
                            <tr>
                                <th style="visibility:hidden">ID</th>
                                <th>Name</th>
                                <th>Age</th>
                                <th style="visibility:hidden">Address</th>
                                <th>Effective From</th>
                                <th>Effective To</th>
                            </tr>
                        </thead>
                    </table>
                </div>

您可以使用以下内容：

    jqTds[1].innerHTML = '<select type="text"  class="form-control input-small">' +
                                        '<option value="' + aData[1] + '">' + aData[1] + '</option>' +
                                        '<option value="contains">Contains</option>' +
                                        '<option value="starts">Starts with</option>' +
                                        '<option value="postal">Postal Radius</option>' +
                                        '</select>';
相关文章：