Question

如何在x-editable中更新选项值的来源无需使用source重新初始化editable元素。

HTML

   <p>X-editable (dev)</p>
    <div>
        <button id="controller">Add</button>
    </div>
    <div>
        <button id="controller1">Remove</button>
    </div>
    <div>
        <button id="controller2">Update</button>
    </div>
<div style="margin: 50px">
    <a href="#" id="username"></a>
</div>
<div style="margin: 50px">
    <a href="#" id="username2"></a>
</div>
<div style="margin: 50px">
    <a href="#" id="username3"></a>
</div>
<div style="margin: 50px">
    <a href="#" id="username4"></a>
</div>

JS：

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

var count = 4, sources = [];

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

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


$('#controller2').click(function(e){
    count++;
    sources[2].text = String(count);
      //to verify live changes, if a new record updated in sources and used instantly
    $('#username').editable('setValue', [1, count]); $('#username2').editable('setValue', count);
});

$('#controller').click(function(e){
    count++;
    sources.push( {id : count, text :String(count) });  
      //to verify live changes, what if a new record added in sources and used instantly
    $('#username').editable('setValue', [1, count]); $('#username2').editable('setValue', count);
});

 $('#controller1').click(function(e){
    count++;
    var a = sources.pop();
     //to verify live changes by selecting value that is not present in the list. It should escape those, print the rest all if available in list
   $('#username').editable('setValue', [1, a.id]); $('#username2').editable('setValue', a.id);
});

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

$('#username2').editable({  //to keep track of selected values in single select
    type: 'select2',  
    url: '/post',
    autotext : 'always',
    value : 2,
    source : getSource,
    emptytext: 'None',
    select2: {
        multiple : false
    }
});

$('#username3').editable({  //to keep track of available values in  multi select
    type: 'select2',  
    url: '/post',
    autotext : 'always',
    value : null,
    source : getSource,
    emptytext: 'None',
    select2: {
        multiple : true
    }
});

$('#username4').editable({  //to keep track of available values in single select
    type: 'select2',  
    url: '/post',
    autotext : 'always',
    value : null,
    source : getSource,
    emptytext: 'None',
    select2: {
        multiple : false
    }
});

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

要求：

每当我在源中添加新项目时，如果未选择项目，则应在可用选项中更新，否则如果选中，则视图应在元素处具有更新值。
每当我更新源中的项目时，如果未选择项目，则应在可用选项中更新，否则如果选中，则视图应在元素处具有更新值。
每当我删除源中的项目时，如果未选择项目，则应从可用选项中删除它，否则如果选中则视图应具有“无”值（如果单选）和休息元素值（如果多选）在元素。

不允许：

重新启动小部件
重新启动源选项

我希望这是可能的。但努力获得结果。

EDIT2：当我使用JSON.parse而不是字符串化'来源'时，代码无效。问题仍未解决。新小提琴：http://jsfiddle.net/wQysh/322/ （EDIT1误导了这个问题所以删除了EDIT1）

EDIT3：到目前为止，我能够实现这一目标http://jsfiddle.net/wQysh/324/ 这里的问题是以前选择的值不会被渲染，因此如果先前在多选

EDIT4：未完全解决，http://jsfiddle.net/wQysh/339/。添加或更新后，可用选项确实更改但在设置新记录后，在提交后不会反映在html元素中。

Answer 1

答案是使用自定义显示功能

这是更新的小提琴。 http://jsfiddle.net/wQysh/357/

每当我们将'setValue'设置为可编辑或关闭事件时，就会调用editable的'display'函数。

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

$.fn.editableutils.itemsByValue

其中第三个参数接受idKey。如果我们在调用此函数时不提供第三个参数，则默认情况下将'value'作为idKey。当我们用来加载数组数据时，不应该使用'value'作为idKey。参考：http://ivaynberg.github.io/select2/#data_array。

我添加了显示功能，其中第三个参数是'id'。

我得到了理想的结果

使用x-editable更改select2的数据，而无需重新设置源选项

1 个答案: