Search code examples
x-editablebootstrap-table

bootstrap-table x-editable plugin, can't set type to select


I'm using bootstrap-table with the x-editable plugin, which is working mostly except I am unable to change the type of the input on the x-editable popup. I've tried setting data-type="select" and type: 'select' but it always shows as type text

This fiddle shows the issue, the table should be using the select type but does not, the link outside of the table with the same options does work.

<table id="table-hover" data-toggle="table" data-show-toggle="true" data-show-columns="true" data-url="/gh/get/response.json/wenzhixin/bootstrap-table/tree/master/docs/data/data1/">
    <thead>
        <tr>
             <!-- this field doesn't show select input -->
            <th data-field="name" data-editable="true" data-type="select">Name</th>
            <th data-field="stargazers_count">Stars</th>
            <th data-field="forks_count">Forks</th>
            <th data-field="description">Description</th>
        </tr>
    </thead>
</table>

<!-- works! -->
<a href="#" id="fruits" data-type="select">banana</a>

js -

$(function () {
    var $table = $('#table-hover');
    $table.bootstrapTable({
        }).on('editable-init.bs.table', function(e){
            $('.editable').editable('option', {
                type: 'select',
                title: "Fruit",
                source: [
                    {value: 1, text: 'banana'},
                    {value: 2, text: 'peach'}
                ]
            });
    });
    $('#fruits').editable({
       type: 'select',
       title: "Fruit",
       source: [
        {value: 1, text: 'banana'},
        {value: 2, text: 'peach'}
       ]
    });
});

https://jsfiddle.net/e3nk137y/2048/


Solution

  • Bootstrap table does not support using data attribute to init the x-editable options at the moment, you can via JavaScript instead. See this example: https://examples.bootstrap-table.com/#issues/986.html