Bootstrap-table: formatter -> get the field (column)

[thibaultvanc]

Hello,
I am using this fabulous pluggin with xeditable.
I wish to let users edit images. I know that's not work, but i have found a work around :
-> I show the url of the image in the editable field,
-> I show the image just below using the formatter

the pb is that I need the column variable in the formater function in order to set the data-name attribute.

Here is the formatter function

function show_image(value, row, index) {
    return [
        '<a  data-type="text" data-value="'+ value +'" data-pk="1" data-name="" href="javascript:void(0)" class="editable editable-click">'+ value +'</a><img src="'+ value +'" style="max-height:100px">'
    ].join('');
};

[djhvscf]

Please provide a jsfiddle, we can help you

[djhvscf]

Any update here??

[jtrumbull]

@thibaultvanc: You cannot presently back into the field name from the formatter function. However, you can reverse engineer this from an additional click event.

$(document).on('click', '.editable-click', function(e){

        $a = $(this), 
            $td = $a.parent('td'),
            $table = $td.parent('tr').parent('tbody').parent('table'),
            $thead = $table.data('bootstrap.table').$header,
            $theadCell = $thead.find('th:eq(' + $td[0].cellIndex + ')'),
            field = $theadCell.data('field');

        // Your logic here

});

Working example: http://jsfiddle.net/joeycakes/98efstkq/2/

I agree though, the field name should be accessible from the formatter function.


@wenzhixin and @djhvscf: Is there any logic behind passing the header object for the context (this), opposed to the column object? The latter seems more intuitive and would solve this issue. I can create a pull request, but wanted to check first.

[wenzhixin]

Because I think the field name is certain, for example:

{
    title: 'Name',
    field: 'name',
    formatter: function () {
        // you know the filed is 'name'
    }
}

Maybe some cases we need the field name, I will consider whether this param is necessary.

[jtrumbull]

Agreed, the field name is understood when using a specific formatter for each column. However, I believe the example wants to use a global formatter -where the column would be a variable.

[wenzhixin]

Usage:

{
    title: 'Name',
    field: 'name',
    formatter: function () {
        console.log(this.field);
    }
}

[manometer114]

Hello,

Similar to this, is it possible to get the field name in the column event handler? I would like to set the proper column value in the row object.

For Example:

var checkboxEvents = {
    'change :checkbox': function (e, value, row, index) {
        if ($(e.target).prop('checked')) {
            row[**current column field name**] = "1";
        } else {
            row[**current column field name**] = "0";
        }
        // Call updateRow, etc.
    }
};

I would really appreciate any tips/recommendations!

[wenzhixin]

You can use formatter to save the field name:

{
    title: 'Name',
    field: 'name',
    formatter: function () {
        return '<input type="checkbox" data-field="' + this.field + '>"';
    },
    events: {
        'change :checkbox': function (e, value, row, index) {
            var field = $(this).data('field');
            if ($(e.target).prop('checked')) {
                row[field] = "1";
            } else {
                row[field] = "0";
            }
            // Call updateRow, etc.
        }
    }
}

[manometer114]

@wenzhixin Wow, works great

Love this library, thank you for everything!

[saktibuana]

@wenzhixin that works great for getting the current column, but how about getting the siblings column as in when we try to combining both current value and the other column value in current row? the this.field only gets current column right? so what is the syntax to get the other field?

[wenzhixin]

@arthipesa, try this:

var fields = $('#table').bootstrapTable('getVisibleColumns').map(function (column) {
  return column.field;
});
// fields[fields.indexOf(this.field) + 1];
// fields[fields.indexOf(this.field) - 1];

[saktibuana]

thanks @wenzhixin for the code, but it doesn't return the next/previous column values, just the column name.
I tried the fields.value, after above code, but it returned undefiend.

How to get the other column values? I'm tryin' to display a combination of multiple columns values in one column so, I can hide the other column and display their values on one column.

[andtankian]

@arthipesa,
Did you get the expected result?
Trying to do the same here.
If you can share with us.
Thanks.

[venkatr123]

Hi All,
when I'm writing
var cols = [{
field: 'state',
checkbox: true,
formatter: testFormatter,
}
]
due to formatter checkbox functionality is not working properly like Pagination,

can't we write any event's& formatter with a checkbox(because it's predefined)
can you people help me

[wenzhixin]

@venkatr123, checkbox field does not support this, you can custom your checkbox input.

[venkatr123]

then how can I maintain selected data while Pagination other actions could you help me out

[wenzhixin]

What's the purpose you use testFormatter to format the checkbox field.

[venkatr123]

i have some actions (options) on every row ->use testFormatter

[wenzhixin]

You can use a new field to show your actions, for example, https://examples.bootstrap-table.com/.

[venkatr123]

it's already in my application I want to put checkbox and action drop-down list in the same
the column just give any refer how can I do custom operations with a custom checkbox like predefined one