應用場景:使用bootstrap框架,在模態框中修改所屬分類,分類層級較多,一般在2級以上.
出現問題:因已經在模態框中,bootstrap不允許同時彈出多個模態框.
一開始在網上找各種select組件希望得到多級分類解決辦法,但基本上對多級選擇的支持都只到2級,后來想了想也合理,一個select框的寬度有限,如果沒有限制很容易就會變形,ui上不好控制.
一直聚焦在select上,很長的時間才跳出了select的思維,想到bootstrap的dropdown組件,一直是被當導航下拉來使用,但是做一些調整也可以當成選擇器
在單機是觸發所需的操作即可,代碼不是很嚴謹,主要解決功能需求.
使用環境:bootstrap3.3.7.css,bootstrap-dropdown-extend.css,jquery-3.3.1.js,bootstrap3.3.7.js
bootstrap-dropdown-extend.css:忘了從哪個大神那里拔的了,不是專門的前端實在懶得調整(如果覺得有影響,聯系我加上鏈接)
.dropdown-submenu {
position: relative;
}
.dropdown-submenu > .dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover > .dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
靜態html片段(這是個產生數據后html的片段,有興趣可以從中看出層級關系,結合css可以更加理解原理,不想理解的可以直接忽略這個)
<div class="container">
<h2>Bootstrap 3多級下拉菜單</h2>
<hr>
<div class="dropdown open">
<a id="asset_type_btn" role="button" data-toggle="dropdown" class="btn btn-default" href="javascript:;"
aria-expanded="true">
選擇類型 <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="assert_type_btn">
<li class="dropdown-submenu"><a tabindex="-1" class="disabled" id="typeId1" href="javascript:;">固定資產</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a tabindex="-1" id="typeId3" href="javascript:;">房屋及構築物</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a tabindex="-1" id="typeId12" href="javascript:;">測試</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a tabindex="-1" id="typeId9"
href="javascript:;">test</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="javascript:;" id="typeId10"
οnclick="selectType('10','再測試')">再測試</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu"><a tabindex="-1" id="typeId4" href="javascript:;">通用設備</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="javascript:;" id="typeId11"
οnclick="selectType('11','電腦')">電腦</a></li>
</ul>
</li>
<li><a tabindex="-1" href="javascript:;" id="typeId5" οnclick="selectType('5','專用設備')">專用設備</a></li>
<li><a tabindex="-1" href="javascript:;" id="typeId6" οnclick="selectType('6','文物和陳列品')">文物和陳列品</a>
</li>
</ul>
</li>
<li class="dropdown-submenu"><a tabindex="-1" class="disabled" id="typeId2" href="javascript:;">低值易耗品</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a tabindex="-1" id="typeId7" href="javascript:;">易耗品</a>
<ul class="dropdown-menu">
<li class="dropdown-submenu"><a tabindex="-1" id="typeId13" href="javascript:;">測試易耗品</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="javascript:;" id="typeId15"
οnclick="selectType('15','添加易耗品')">添加易耗品</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu"><a tabindex="-1" id="typeId8" href="javascript:;">低值物品</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="javascript:;" id="typeId14" οnclick="selectType('14','測試低值物品')">測試低值物品</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
使用時 html片段:
<div class="container">
<h2>Bootstrap 3多級下拉菜單</h2>
<hr>
<div class="dropdown">
<a id="asset_type_btn" role="button" data-toggle="dropdown" class="btn btn-default" href="javascript:;">
選擇類型 <span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="assert_type_btn">
</ul>
</div>
</div>
使用時 js代碼
var data = [
{
typeId: 1,
typeParentId: 0,
typeName: "固定資產",
level: 1,
childFlag: 1
},
{
typeId: 2,
typeParentId: 0,
typeName: "低值易耗品",
level: 1,
childFlag: 1
},
{
typeId: 3,
typeParentId: 1,
typeName: "房屋及構築物",
level: 2,
childFlag: 1
},
{
typeId: 4,
typeParentId: 1,
typeName: "通用設備",
level: 2,
childFlag: 1
},
{
typeId: 5,
typeParentId: 1,
typeName: "專用設備",
level: 2,
childFlag: 0
},
{
typeId: 6,
typeParentId: 1,
typeName: "文物和陳列品",
level: 2,
childFlag: 0
},
{
typeId: 7,
typeParentId: 2,
typeName: "易耗品",
level: 2,
childFlag: 1
},
{
typeId: 8,
typeParentId: 2,
typeName: "低值物品",
level: 2,
childFlag: 1
},
{
typeId: 9,
typeParentId: 12,
typeName: "test",
level: 4,
childFlag: 1
},
{
typeId: 10,
typeParentId: 9,
typeName: "再測試",
level: 5,
childFlag: 0
},
{
typeId: 11,
typeParentId: 4,
typeName: "電腦",
level: 3,
childFlag: 0
},
{
typeId: 12,
typeParentId: 3,
typeName: "測試",
level: 3,
childFlag: 1
},
{
typeId: 13,
typeParentId: 7,
typeName: "測試易耗品",
level: 3,
childFlag: 1
},
{
typeId: 14,
typeParentId: 8,
typeName: "測試低值物品",
level: 3,
childFlag: 0
},
{
typeId: 15,
typeParentId: 13,
typeName: "添加易耗品",
level: 4,
childFlag: 0
}
]
//立即執行函數
$(function () {
//調用初始化下拉方法
initData();
});
//初始化dropdown中內容
function initData() {
var option={
maxLevel:5,
data:data
};
processData(option);
// $.get(
// "/test/test",
// function (data) {
// var option={
// maxLevel:5,
// data:data.data
// };
// processData(option);
// }
// );
}
//js拼接html代碼
function processData(option) {
for (var i = 1; i <= option.maxLevel; i++) {
if (i == 1) {
$.each(option.data, function (n,value) {
if (value.level == 1) {
if (value.childFlag == 0) {
var result = "<li><a tabindex=\"-1\" href=\"javascript:;\" id=\"typeId" + value.typeId + "\" onclick=\"selectType('" + value.typeId + "','" + value.typeName + "')\">" + value.typeName + "</a></li>";
$("#asset_type_btn").next().append(result);
} else {
var result = "<li class=\"dropdown-submenu\"><a tabindex=\"-1\" class=\"disabled\" id=\"typeId"+value.typeId+"\" href=\"javascript:;\">" + value.typeName + "</a><ul class=\"dropdown-menu\"></ul></li>";
$("#asset_type_btn").next().append(result);
}
}
});
} else {
$.each(option.data, function (n,value) {
if (value.level == i) {
if (value.childFlag == 0) {
var result = "<li><a tabindex=\"-1\" href=\"javascript:;\" id=\"typeId" + value.typeId + "\" onclick=\"selectType('" + value.typeId + "','" + value.typeName + "')\">" + value.typeName + "</a></li>";
$("#" + "typeId" + value.typeParentId).next().append(result);
} else {
var result = "<li class=\"dropdown-submenu\"><a tabindex=\"-1\" id=\"typeId"+value.typeId+"\" href=\"javascript:;\">" + value.typeName + "</a><ul class=\"dropdown-menu\"></ul></li>";
$("#" + "typeId" + value.typeParentId).next().append(result);
}
}
});
}
}
}
//點擊后操作
function selectType(typeId, typeName) {
//選擇分類后操作
console.info("typeId:" + typeId);
console.info("typeName:" + typeName);
$('#select_value').text(typeName);
}