Bootstrap select2三级结构问题

2020-05-09 走过路过 2061 0

bootstrap使用select2,当数据为三级结构时会出现无法选择数据项,搜索不准确和层次结构不明显问题。

无法选择数据项解决办法:
$.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;
}
相关推荐
全部评论 最新评论 最早评论
还没有用户评论

联系我们

微信公众号
打赏作者