简体   繁体   中英

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

I need to display a dropdownlist in a particular cell while performing inline editing and need to load the values in the dropdownlist from the datatbase. I know how to load the values in the dropdownlist outside the datatable. Is this the same process while it is inside the datatable?.
Please give me some ideas to perform this task?

This is my code, where the row that is clicked will have the textbox and the dropdownlist (without any values)

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

This is my html code for the table,

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

You could use something like below:

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

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM