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

时间:2015-06-30 05:49:41

标签: javascript jquery asp.net asp.net-mvc datatable

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

这是我的代码,其中单击的行将包含文本框和下拉列表(没有任何值)

   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>

1 个答案:

答案 0 :(得分:0)

您可以使用以下内容:

    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>';