先上效果圖：
使用方法：
一、HTML：
只需要一個div
<div id="hxNavbar"></div>
二、JS
layui.extend({
hxNav: '../jslibs/layui/extend/hxNav' // 根據(jù)你自己的目錄設置
}).use(['element','hxNav'],function(){
layui.hxNav({
element: '#hxNavbar', // 必須，指定ID
url: 'system/getMenuNavbar.php', // 請求后臺數(shù)據(jù)的接口
type: 'post',
shrink: false,
onSelect: function(v) {
console.log(v);
}
});
});
說明：
頁面加載后，組件會自動向url指定的接口發(fā)送請求，第一次請求時不帶任何參數(shù)，此時服務器應返回所有的根節(jié)點。此時組件全部的根節(jié)點都是收縮狀態(tài)。
如果用戶點擊了某個節(jié)點，組件會自動再次向接口請求數(shù)據(jù)，此時會攜帶一個參數(shù)，參數(shù)名稱為ID，內(nèi)容值為被點擊的節(jié)點的ID。此時，服務器應返回該節(jié)點的所有孩子節(jié)點，組件收到孩子節(jié)點數(shù)據(jù)后，會自動渲染到被點擊的節(jié)點下。
參數(shù)詳細說明：
element: 字符串，必須參數(shù)，元素ID，默認空
url: 字符串，必須參數(shù)，數(shù)據(jù)接口，默認空("")
type: 字符串，請求類型，可以為post、get兩種，默認post
width: 數(shù)值，寬度，默認220(px)，不需要帶“px”
shrink: 布爾，指定是否自動收縮未選定的節(jié)點。默認false
background: 字符串，背景顏色，默認“#393d49”
autoExpand: 布爾，默認false。默認情況下，只有用戶點擊了節(jié)點的時候，才去請求并加載該節(jié)點的數(shù)據(jù)，如果該項設置為ture，則組件會立即向服務器請求所有的節(jié)點數(shù)據(jù)。
onSelect: function(node) 函數(shù)，當用戶選擇了某個節(jié)點時，觸發(fā)該事件。node中包含了所選節(jié)點的數(shù)據(jù)。
另外，如果由于某些原因，需要用js選中某個節(jié)點時，比如，用戶點擊了之前打開過的tab標簽，這時需要在導航欄中回顯一下，可以使用下面的方法：
layui.hxNav('select', id );注意：通過這個方法選擇節(jié)點時，仍然會觸發(fā)組件的onSelect事件！
關于數(shù)據(jù)接口：
JSON格式。形如：[{ "id": "ident", "text": "title text", "icon": "icon", "hasChildren": 0，"href": "targetUrl.php", }]
解釋：
id：節(jié)點的唯一標識（必須）
text：節(jié)點的文本
（必須）
hasChildren：數(shù)值型，指明這個節(jié)點是否擁有孩子節(jié)點，只需要給0或1即可。
組件必須的數(shù)據(jù)就是上述3個。另外還有一個icon，是可選的，如下：
icon：節(jié)點的圖標，必須是layui-icon-xxx的類名。（如果沒有圖標，可以不設置該字段，或者返回空）
至于href等其他數(shù)據(jù)，根據(jù)自己的需要來設置。
關于后臺的例子：
<?php
$pid = empty($_POST['id'] ) ? null : $_POST['id']; // 前端發(fā)來的請求，表明了現(xiàn)在要請求哪一個節(jié)點的孩子，請求根節(jié)點時，這個參數(shù)為空
$pdo = new MyPDO(); // pdo連接到mysql
$arrParams = array();
if( empty( $pid ))
$whereParent = 'pi IS NULL';
else {
$whereParent = 'pi=:pi';
$arrParams[':pi'] = $pid;
}
$stm = $pdo->prepare("SELECT id,nm AS text,ic AS icon,isMenuHasChild(id) AS hasChildren,hr AS href FROM sy_menu WHERE {$whereParent} ORDER BY st");
$stm->execute($arrParams);
$result = $stm->fetchAll(PDO::FETCH_ASSOC);
echo json_encode( $result, JSON_UNESCAPED_UNICODE );
上面例子中，關于sql語句中的isMenuHasChild,是一個自己寫的mysql函數(shù)，原理如下：
-- menu表結(jié)構(gòu)：
DROP TABLE IF EXISTS `sy_menu`;
CREATE TABLE sy_menu(
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'id',
`pi` int(11) DEFAULT NULL COMMENT 'parent id',
`st` int(11) NOT NULL DEFAULT 0 COMMENT 'sort',
`nm` varchar(128) DEFAULT NULL COMMENT 'name',
`ic` varchar(64) DEFAULT NULL COMMENT 'icon',
`hr` varchar(256) DEFAULT NULL COMMENT 'href',
PRIMARY KEY (`id`),
KEY(`hr`),
CONSTRAINT `menu_self_p` FOREIGN KEY (`pi`) REFERENCES sy_menu(`id`) ON UPDATE CASCADE ON DELETE CASCADE
)ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT 'menus';
-- 自定義的小函數(shù)，用來獲取某個id是否具有孩子節(jié)點。
DELIMITER ;;
CREATE FUNCTION `isMenuHasChild`( inid INT ) RETURNS int(11)
RETURN ( SELECT count(`id`) FROM `sy_menu` WHERE `pi`=inid );;
DELIMITER ;
最后。這個組件很容易被擴展。。。
