具有多个嵌套组的Select2 [英] Select2 with multiple nested groups
问题描述
我在将Select2用于各种组时遇到了麻烦，只有后者出现了.
I'm having trouble using the Select2 with various groups, only the latter appears.
<select name="txtConta" id="txtConta" data-placeholder="Selecione a conta">
<option value=""></option>
<option value="S11892">2 - Gastos</option>
<option value="S11893">2.1 - DESPESA OPERACIONAL FIXA</option>
<option value="S11895">2.1.1 - PESSOAL</option>
<option value="S11915">2.1.1.1 - GERENCIA/ADMINSTRATIVO</option>
<option value="11916">2.1.1.1.1 - SALÁRIOS</option>
<option value="11917">2.1.1.1.2 - DIVIDENDOS / COMISSÕES /BONUS</option>
<option value="11918">2.1.1.1.3 - INSS</option>
<option value="11919">2.1.1.1.4 - FGTS</option>
<option value="11920">2.1.1.1.5 - IRRF COD. 0561</option>
<option value="11921">2.1.1.1.6 - PLANO DE SAUDE</option>
<option value="11922">2.1.1.1.7 - TICKET REFEICAO</option>
<option value="11923">2.1.1.1.8 - VALE TRANSPORTE</option>
(...)
</select>
<script>
$('select').each(function () {
$(this).select2({
allowClear: true,
width: 'resolve',
dropdownAutoWidth: true
});
});
$('#txtConta').find('option').each(function () {
if ($(this).attr("value").indexOf('S') == 0) {
$('<optGroup/>').attr('label', $(this).text()).appendTo($('#txtConta'));
$(this).remove();
} else {
$('#txtConta').find('optGroup').last().append($(this));
}
});
</script>
您可以在 jsfiddle 中看到一个演示.
You can see a demonstration in this jsfiddle.
推荐答案
此解决方案已使用select2版本4.0.1进行了测试，您可以通过以下方式进行操作:
This solution was tested using select2 version 4.0.1, and you can do this way:
-
传递一个数组，该数组包含一个以上的属性(层次结构中每个节点的 level ).数组的结构很简单
Pass one array that contains one attribute more (the level of every node in the hierarchy). The array's structure is simple
创建一个函数以格式化结果，即，根据层次结构中每个项目的级别，每个项目的外观如何
Create a function to format results,that is, how looks like every item according its level inside of hierarchy
在初始化选择时，将创建的函数设置为属性 templateResult
When initialize select, set the function created to attribute templateResult
您可以在以下代码中看到:
You can see in the follow code:
$(document).on("ready", function() {
var data = [{
id: "2",
text: "2 - Gastos",
level: 1
}, {
id: "2.1",
text: "2.1 - DESPESA OPERACIONAL FIXA",
level: 2
}, {
id: "2.1.1",
text: "2.1.1 - PESSOAL",
level: 3
}, {
id: "2.1.1",
text: "2.1.1 - PESSOAL",
level: 4
}, {
id: "2.1.1.1",
text: "2.1.1.1 - GERENCIA/ADMINSTRATIVO",
level: 4
}, {
id: "2.1.1.1.1",
text: "2.1.1.1.1 - SALÁRIOS",
level: 5
}, {
id: "2.1.1.1.2",
text: "2.1.1.1.2 - DIVIDENDOS / COMISSÕES /BONUS",
level: 5
}, {
id: "2.1.1.1.3",
text: "2.1.1.1.3 - INSS",
level: 5
}, {
id: "2.1.1.1.4",
text: "2.1.1.1.4 - FGTS",
level: 5
}];
function formatResult(node) {
var $result = $('<span style="padding-left:' + (20 * node.level) + 'px;">' + node.text + '</span>');
return $result;
};
$("#mySelect").select2({
placeholder: 'Select an option',
width: "600px",
data: data,
formatSelection: function(item) {
return item.text
},
formatResult: function(item) {
return item.text
},
templateResult: formatResult,
});
});
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
</head>
<body>
<select id="mySelect">
</select>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.1/js/select2.full.min.js"></script>
</body>
</html>
这篇关于具有多个嵌套组的Select2的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
