Question

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

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

我只是想通过控制器更新可编辑元素的源选项。但是这个观点并没有反映出来。

任何解决方案??

Answer 1

刚刚添加了显示功能，iDkey为＆＃39; id＆＃39;

$('#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
    }
});

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

每次我们设置值＆＃39;可编辑或关闭事件可编辑的显示＆＃39;函数被调用。

在显示功能中，现有值由此功能检查

$.fn.editableutils.itemsByValue

其中第三个参数接受idKey。如果我们在调用此函数时不提供第三个参数，则默认采用＆＃39; value＆＃39;作为idKey。和＆＃39;价值＆＃39;因为我们用来加载数组数据时不应该使用idKey。参考：http://ivaynberg.github.io/select2/#data_array。

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

1 个答案: