layui 第三方组件平台

返回首页 发布组件

在原生垂直导航的基础上,添加了异步加载模式和简单的事件处理,简单易用、异步。

更新:2020-3-18 创建:2020-2-6

文档

先上效果图:

使用方法:
一、HTML:
只需要一个div
<div id="hxNavbar"></div>
二、JS
       layui.extend({
hxNav: '../jslibs/layui/extend/hxNav' // 根据你自己的目录设置
}).use(['element','hxNav'],function(){
layui.hxNav({
element: '#hxNavbar', // 必须,指定ID
url: 'system/getMenuNavbar.php', // 请求后台数据的接口
type: 'post',
shrink: false,
onSelect: function(v) {
console.log(v);
}
});
});

说明:
页面加载后,组件会自动向url指定的接口发送请求,第一次请求时不带任何参数,此时服务器应返回所有的根节点。此时组件全部的根节点都是收缩状态。
如果用户点击了某个节点,组件会自动再次向接口请求数据,此时会携带一个参数,参数名称为ID,内容值为被点击的节点的ID。此时,服务器应返回该节点的所有孩子节点,组件收到孩子节点数据后,会自动渲染到被点击的节点下。

参数详细说明:

element: 字符串,必须参数,元素ID,默认空
url: 字符串,必须参数,数据接口,默认空("")
type: 字符串,请求类型,可以为post、get两种,默认post
width: 数值,宽度,默认220(px),不需要带“px”
shrink: 布尔,指定是否自动收缩未选定的节点。默认false
background: 字符串,背景颜色,默认“#393d49”
autoExpand: 布尔,默认false。默认情况下,只有用户点击了节点的时候,才去请求并加载该节点的数据,如果该项设置为ture,则组件会立即向服务器请求所有的节点数据。
onSelect: function(node) 函数,当用户选择了某个节点时,触发该事件。node中包含了所选节点的数据。

另外,如果由于某些原因,需要用js选中某个节点时,比如,用户点击了之前打开过的tab标签,这时需要在导航栏中回显一下,可以使用下面的方法:
layui.hxNav('select', id );
注意:通过这个方法选择节点时,仍然会触发组件的onSelect事件!

关于数据接口:
JSON格式。形如:[{ "id": "ident", "text": "title text", "icon": "icon", "hasChildren": 0,"href": "targetUrl.php", }]
解释:
id:节点的唯一标识(必须)
text:节点的文本 (必须)
hasChildren:数值型,指明这个节点是否拥有孩子节点,只需要给0或1即可。
组件必须的数据就是上述3个。另外还有一个icon,是可选的,如下:
icon:节点的图标,必须是layui-icon-xxx的类名。(如果没有图标,可以不设置该字段,或者返回空)
至于href等其他数据,根据自己的需要来设置。

关于后台的例子:
<?php

$pid = empty($_POST['id'] ) ? null : $_POST['id']; // 前端发来的请求,表明了现在要请求哪一个节点的孩子,请求根节点时,这个参数为空
$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函数,原理如下:
-- menu表结构:
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';

-- 自定义的小函数,用来获取某个id是否具有孩子节点。
DELIMITER ;;
CREATE FUNCTION `isMenuHasChild`( inid INT ) RETURNS int(11)
RETURN ( SELECT count(`id`) FROM `sy_menu` WHERE `pi`=inid );;
DELIMITER ;

最后。这个组件很容易被扩展。。。