Jquery select2 json 带有 optgroup 和图像的数据
Jquery select2 json data with optgroup and images
我将 select2 与 spring mvc 一起使用。我从我的控制器获得了我需要在选项方面显示的数据。但我希望将它们分组为 optgroup 并且我希望在其中附加图像,可以手动插入,如下所示:-
<optgroup label="group">
<option value="imageName">value 1</option>
<option value="imageName">value 1</option>
</optgroup>
其中 imageName 是图像的名称。我想要 :
1) json 中的分组选项。
2) 在json中提供这个图像属性,以便select2可以形成数据。
这是代码:
$("#my-select").select2({
data : [ {
id : 0,
text : 'enhancement'
}, {
id : 1,
text : 'bug'
}, {
id : 2,
text : 'duplicate'
}, {
id : 3,
text : 'invalid'
}, {
id : 4,
text : 'wontfix'
} ]
});
我正在从我的对象手动创建 json。所以我可以在这里提供任何数据。有什么建议吗?
Select2 使用以下逻辑将数据对象映射到 <option>
和 <optgroup>
标签
看起来像
的数据对象(return在列表中编辑的内容)
{
'id': 'value-here',
'text': 'text-here'
}
将映射到看起来像
的<option>
<option value="value-here">text-here</option>
一个看起来像
的数据对象
{
'text': 'label-here',
'children': [data_object, data_object]
}
将映射到看起来像
的<optgroup>
<optgroup label="label-here">
<!-- HTML for the `children` -->
</optgroup>
所以您要查找的数据对象return是
{
'text': 'group',
'children': [
{
'id': 'imageName',
'text': 'value 1'
},
{
'id': 'imageName',
'text': 'value 1'
}
]
}
我将 select2 与 spring mvc 一起使用。我从我的控制器获得了我需要在选项方面显示的数据。但我希望将它们分组为 optgroup 并且我希望在其中附加图像,可以手动插入,如下所示:-
<optgroup label="group">
<option value="imageName">value 1</option>
<option value="imageName">value 1</option>
</optgroup>
其中 imageName 是图像的名称。我想要 : 1) json 中的分组选项。 2) 在json中提供这个图像属性,以便select2可以形成数据。
这是代码:
$("#my-select").select2({
data : [ {
id : 0,
text : 'enhancement'
}, {
id : 1,
text : 'bug'
}, {
id : 2,
text : 'duplicate'
}, {
id : 3,
text : 'invalid'
}, {
id : 4,
text : 'wontfix'
} ]
});
我正在从我的对象手动创建 json。所以我可以在这里提供任何数据。有什么建议吗?
Select2 使用以下逻辑将数据对象映射到 <option>
和 <optgroup>
标签
看起来像
的数据对象(return在列表中编辑的内容){
'id': 'value-here',
'text': 'text-here'
}
将映射到看起来像
的<option>
<option value="value-here">text-here</option>
一个看起来像
的数据对象{
'text': 'label-here',
'children': [data_object, data_object]
}
将映射到看起来像
的<optgroup>
<optgroup label="label-here">
<!-- HTML for the `children` -->
</optgroup>
所以您要查找的数据对象return是
{
'text': 'group',
'children': [
{
'id': 'imageName',
'text': 'value 1'
},
{
'id': 'imageName',
'text': 'value 1'
}
]
}