入れ子になった属性を持つ、ajax で読み込まれた json データで select2 を動作させようとしています。このようなものを手に入れたいhttp://ivaynberg.github.io/select2/#multi。
サンプル json:
[{
id: 1,
name: "GroupName",
users: [{id: 1, name: 'UserName'}, {id: 2, name: 'SecondUser}]
}]
<optgroup label="GroupName"><option value="1">UserName</opyion></optgroup>
彼らが使用し、正しい結果を得ているサイトで。
私の場合、ネストは適切に表示されますが、選択できるのは のみですが、ネストされたものを選択してGroupName
選択不可にする必要があり、情報提供のみを目的としています。userName
GrouoName
コード:
$('#user_tokens').select2({
placeholder: "Search for a user",
minimumInputLength: 0,
tags: true,
multiple: true,
ajax: {
url: "messages/users_data.json",
dataType: 'json',
quietMillis: 100,
data: function(search, page) {
return {
q: search,
per: 3,
page: page
};
},
results: function(data, page) {
return {
results: data,
};
}
},
formatResult: formatResult,
formatSelection: formatSelection,
dropdownCssClass: "bigdrop"
});
フォーマット結果:
var formatUserResult = function(data) {
var optgroup = "";
var users = "";
if (data.name !== undefined) {
data.users.forEach(function(e) {
users += "<li class='select2-results-dept-1 select2-result select2-result- selectable'>" +
"<div class='select2-result-label'>" +
"<span class='select2-match'></span>"+
e.firstname +
"</div>" +
"</li>";
});
optgroup += "<div class='select2-result-label'>" +
"<span class='select2-match'></span>" +
data.name + "</div>" +
'<ul class="select2-result-sub">' + users + '</ul>';
}
return optgroup;
}
問題は、optgroup をclass: 'select2-result-unselectable'
どうするかという Dunno が必要なことです。