如何更新select2类型的x-editable的源代码

Here is what i am trying http://jsfiddle.net/wQysh/347/

下面是我正在尝试的http://jsfiddle.net/wQysh/347/

JS :

JS:

$.fn.editable.defaults.mode = 'inline';

var count = 4, sources = [];

for(var i = 1; i <= count; i++){
    sources.push({ id : i, text : 's-'+String(i) })
}

var getSource = function() {
    //i want this function must be called whenever available options is rendred. to ensure NO references issues, i used JSON.parse
    return JSON.parse(JSON.stringify(sources));
};

var getQuery = function(options){
    options.callback({ results : getSource() });
};

var getInitSel = function(multiple) {
    return function(el, cb){
        var t, toSet = [], sc = getSource();
        el[0].value.split(',').forEach(function(a){
            t = _.findWhere(sc, { id : Number(a.trim()) });
            if(t) toSet.push(t);
        });
        cb(multiple ? toSet : (toSet.length ? toSet[0] : null));
    };
};


$('#controller').click(function(e){
    count++;
    sources.push( {id : count, text : 's-'+String(count) });
    $('#username').editable('option', 'source', getSource()); //  <---------------- THIS LINE HAS NO EFFECT SO PRODUCING UNDESIRED RESULT
    //with above line, the source option should get updated and should be handing the new records to render. but nothing happens such.
    $('#username').editable('setValue', [1, count]);
});

$('#username').editable({  //to keep track of selected values in multi select
    type: 'select2',  
    url: '/post',
    autotext : 'always',
    source : getSource(),
    value : [1,2],
    emptytext: 'None',
    select2: {
        multiple : true,
        initSelection : getInitSel(true),
        query :getQuery
    }
});

//ajax emulation. Type "err" to see error message
$.mockjax({
    url: '/post',
    responseTime: 400,
    response: function(settings) {
        if(settings.data.value == 'err') {
           this.status = 500;  
           this.responseText = 'Validation error!'; 
        } else {
           this.responseText = '';  
        }
    }
});

I am just trying to update the source option of editable element via a controller. But the view doesn't reflect the same.

我只是试图通过一个控制器更新可编辑元素的源选项。但是这个观点并不反映相同的观点。

Any solution??

任何解决方案? ?

1 个解决方案

#1

just added display function with iDkey as 'id'

只添加了id为id的显示功能

$('#username').editable({  //to keep track of selected values in multi select
    type: 'select2',  
    url: '/post',
    autotext : 'always',
    source : getSource(),
    value : [1,2],
    emptytext: 'None',
    display: function(value, sourceData) {
       //display checklist as comma-separated values
       var html = [],
           checked = $.fn.editableutils.itemsByValue(value, getSource(), 'id');  // it was needed to send 'id' as idKey otherwise it was fetching with value
       if(checked.length) {
           $.each(checked, function(i, v) { html.push($.fn.editableutils.escape(v.text)); });
           $(this).html(html.join(', '));
       } else {
           $(this).empty(); 
       }
    },
    select2: {
        multiple : true,
        initSelection : getInitSel(true),
        query :getQuery
    }
});

here is working code http://jsfiddle.net/wQysh/351/

这里是工作代码http://jsfiddle.net/wQysh/351/

Every time we 'setValue' to editable or on close event editable's 'display' function is called.

每当我们“setValue”到editable或在close事件上可编辑的“display”函数被调用时。

in display function existing values is checked by this function

在显示函数中，现有值由该函数检查

$.fn.editableutils.itemsByValue

where the third parameter accepts the idKey. If we do not provide third parameter while calling this function, it by default takes 'value' as idKey. and 'value' as idKey should not be used when we are using to load array data. ref : http://ivaynberg.github.io/select2/#data_array.

第三个参数接受idKey。如果在调用这个函数时不提供第三个参数，那么默认情况下，它将“value”作为idKey。当我们使用加载数组数据时，不应该使用“值”作为idKey。裁判:http://ivaynberg.github.io/select2/ # data_array。

#1