在没有重新设置源选项的情况下，使用x-editable更改select2的数据。

How to keep the source of option values updated in x-editable without re-initialising the editable element with source.

如何保持在x-editable中更新的选项值的来源，而不需要重新初始化可编辑元素的源代码。

Here is the sandbox : http://jsfiddle.net/wQysh/322/

这里是沙箱:http://jsfiddle.net/wQysh/322/。

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 :

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

Requirement :

要求:

Whenever i add new item in sources, if item is not selected then it should be updated in available options otherwise if selected then view should have updated value at element.
每当我在源文件中添加新项时，如果未选中项，则应在可用选项中更新，否则，如果选中，则视图应该在元素中更新值。
Whenever i update an item in sources, if item is not selected then it should be updated in available options otherwise if selected then view should have updated value at element.
每当我在源文件中更新一个项目时，如果项目没有被选中，那么它应该在可用的选项中更新，否则如果选择了，那么视图应该在元素中更新值。
Whenever i delete an item in sources, if item is not selected then it should be removed from the available options otherwise if selected then view should have "None" value (if single select) and rest element values (if multi select) at element.
每当我在源文件中删除一个项目时，如果没有选择项，那么就应该从可用选项中删除它，否则，如果选中的话，那么视图应该在元素中有“None”值(如果是单个select)和rest元素值(如果多选择)。

Not allowed:

不允许:

to reinit the widget
reinit小部件的
to reinit the source option
恢复源选项。

I hope this is possible. But struggling to get the result.

我希望这是可能的。但却很难得到结果。

EDIT2 : code did not worked when i used JSON.parse over stringified 'sources' Problem is still unresolved. New fiddle : http://jsfiddle.net/wQysh/322/ (EDIT1 was misleading this question so removed EDIT1)

当我使用JSON时，代码不起作用。解析stringified的“源”问题仍然没有解决。New fiddle: http://jsfiddle.net/wQysh/322/ (EDIT1误导了这个问题，所以删除了EDIT1)

EDIT3 : so far i am able to achieve this http://jsfiddle.net/wQysh/324/ Here problem is that previous selected values are not rendered, so can't remove the items if selected previously in multi-select

EDIT3:到目前为止，我可以实现这个http://jsfiddle.net/wQysh/324/这里的问题是，之前所选的值没有被呈现，所以如果之前选择了多选择，就不能删除这些项。

EDIT4: not completely solved, http://jsfiddle.net/wQysh/339/. After add or update the available option does change but after setting that new record, does not reflect in html element after submit.

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

1 个解决方案

#1

the answer is to use a custom display function

答案是使用自定义显示函数。

here is the updated fiddle. http://jsfiddle.net/wQysh/357/

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

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

每次我们“setValue”可编辑或在close事件编辑器的“显示”函数被调用。

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。

I added display function in which third parameter is 'id'.

我添加了显示函数，其中第三个参数是“id”。

and i got the desired result

我得到了想要的结果。

1 个解决方案

#1

更多相关文章

随机推荐