根據昨天項目中使用的ztreejs下拉樹,今天想着能實現搜索功能的下拉樹,
網上查了半天 感覺都不是很符合自己的要求,所以決定自己修改,終於大功告成,
通過修改實現了既能單選搜索的下拉樹 又能多選搜索的下拉樹,並且下拉樹的菜單項從后台獲取數據,簡直棒極了!
下面說下我如何實現的
1、項目先引入css js 基於jquery的所以需要引入jqueryjs
<link rel="stylesheet" type="text/css" href="css/select3.css"/>
<script type="text/javascript" src="./js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="./js/select3.js" charset="utf-8"></script>
2、布局簡單極了 只需要一個<input type="text" id="test1" /> 可以根據自己項目要求布局,當然功能實現了 布局就是小case了。。。
3、然后我根據select3js需要的格式,把從后台得到數據進行整理 主要就用了三個字段 :菜單id 父菜單id 名稱
然后把整理的數據再次整理為select3js需要的格式 通過遞歸的方式進行整理數據
4、然后調用就可以了
$('#test1').select3({
treeData:shu(arr)
});
實現以后為下圖所示