在更改为BoostrapTable X可编辑选择框时获取文本而不是值

时间:2017-12-27 17:33:48

标签: javascript jquery x-editable bootstrap-table

我已使用BootstrapTablex-editable一起构建一个包含一系列联系人的表格。当用户选择一个新值时,我会让他们提醒他们选择了什么。使用editable-save.bs.table,我可以获得与选择选项相关联的值,但这对用户来说毫无意义。我想获得与该值相关联的联系人姓名。我该怎么做

小提琴:http://jsfiddle.net/cdvtkndu/

var data = [{"Contact": 3}, {"Contact": 2}];

$(function () {
    $('#table').bootstrapTable({
        columns: [{
            field: 'Contact',
            title: 'Contact',
            editable: {
                type: 'select',
                source: [
                    {value: 4, text: 'Andrew'},
                    {value: 2, text: 'John'},
                    {value: 3, text: 'Liz'}
                ]
            }
        }],
        data: data
    });
});

$('#table').on('editable-save.bs.table', function (e, field, row, old, $el) {
    var new_val = row[field];
    alert(new_val);
});

1 个答案:

答案 0 :(得分:1)

您可以将源转储到数组中,然后通过它迭代以找到您要搜索的行:

var data = [{"Contact": 3}, {"Contact": 2}];
var _source = [
                    {value: 4, text: 'Andrew'},
                    {value: 2, text: 'John'},
                    {value: 3, text: 'Liz'}
                ];
$(function () {
    $('#table').bootstrapTable({
        columns: [{
            field: 'Contact',
            title: 'Contact',
            editable: {
                type: 'select',
                source: _source
            }
        }],
        data: data
    });
});
$('#table').on('editable-save.bs.table', function (e, field, row, old, $el) {
    var new_val = row[field];
    var arrayLength = _source.length;
    for (var i = 0; i < arrayLength; i++) {
        if (_source[i].value == new_val) {
                alert(_source[i].text);
          break;
        }
    }    
});

看看我的更正:http://jsfiddle.net/4qq1yp1y/