Bootstrap select2三级结构问题
bootstrap使用select2,当数据为三级结构时会出现无法选择数据项,搜索不准确和层次结构不明显问题。
无法选择数据项解决办法:
找到函数function matcher (params, data) {
无法选择数据项解决办法:
$.each( $("#event_system").find("optgroup optgroup option"), function (i, item) {
$("#event_system").find("optgroup").first().append(item)
});
搜索不准确解决办法:找到函数function matcher (params, data) {
for (var c = data.children.length - 1; c >= 0; c--) {
var child = data.children[c];
var matches = matcher(params, child);
// If there wasn't a match, remove the object in the array
if (matches == null) {
match.children.splice(c, 1);
} else{
//添加这一行
match.children[c]=matches;
}
}
调整层次结构样式:.select2-results__option .select2-results__option {
padding-left: 1em;
}
.select2-results__option .select2-results__option .select2-results__option {
padding-left: 2em;
}
.select2-results__option .select2-results__option .select2-results__group {
padding-left: 1.5em;
}
.select2-results__option .select2-results__option .select2-results__option .select2-results__option {
padding-left: 3em;
}
.select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
padding-left: 4em;
}
.select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
padding-left: 5em;
}
.select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option {
padding-left: 6em;
}