# 下拉树组件
# 概述
下拉树在我们的项目开发中出现的频率非常高,涉及多层级的数据源展示中,多数情况下会使用到下拉树,目前市面上下拉树的组件也非常多,但是那些都是别人开发的第三方组件,引入时也需要进行引用并初始化,同时还得要我们的后端提供数据源给他调用并渲染,显然对于要求快速开发项目时有点费事费力,因此我们决定封装下拉树组件
,使得我们想要使用时直接传入参数,框架可以直接给我们提供一个完美的树状结构的数据出来,下面我们来认识下下拉树的原理和使用;
# Tree下拉组件
组件:
{common:select param="pid|1|上级菜单|name|id" data="$menuList" value="isset($info['pid']) ? $info['pid'] : 0"}
参数name:
pid|0|上级菜单|name|id
`pid`:组件名称`pid`,此字段对应实体对象中的字段roleIds(对应到数据表中字段即为`pid`);
`0`:这里的参数有`0和1`的区分,0表示不必填,1表示必填;
`上级菜单`:这个文字会在初始化组件是控件的默认提示语,会动态解析为`请选择上级菜单`
`name`:这个参数表示当我们动态获取数据源时(数据源带有参数`name`),会默认读取动态数据源中参数为`name`的值;
`id`:这个参数表示当我们动态获取数据源时(数据源带有参数`id`),会默认读取动态数据源中参数为`id`的值;
2
3
4
5
参数data:
$menuList
绑定到该组件上的数据源;参数value:
isset($info['pid']) ? $info['pid'] : 0
绑定到该组件上的值,为空时可以设置为默认值0或其他值
;使用案例
<form class="layui-form model-form" action="">
<div class="layui-inline">
<label class="layui-form-label">上级菜单:</label>
<div class="layui-input-inline">
{common:select param="pid|1|上级菜单|name|id" data="$menuList" value="isset($info['pid']) ? $info['pid'] : 0"}
</div>
</div>
</form>
2
3
4
5
6
7
8
- 效果展示:
# 读取SQL获取
组件:
{common:select param="pid|1|上级菜单|name|id" sql="SELECT id,
name,pid FROM sys_menu WHERE
status=1 AND type <=3 AND mark=1 ORDER BY pid ASC,id ASC;" value="isset($info['pid']) ? $info['pid'] : 0"}
参数name:
pid|0|上级菜单|name|id
`pid`:组件名称`pid`,此字段对应实体对象中的字段roleIds(对应到数据表中字段即为`pid`);
`0`:这里的参数有`0和1`的区分,0表示不必填,1表示必填;
`上级菜单`:这个文字会在初始化组件是控件的默认提示语,会动态解析为`请选择上级菜单`
`name`:这个参数表示当我们动态获取数据源时(数据源带有参数`name`),会默认读取动态数据源中参数为`name`的值;
`id`:这个参数表示当我们动态获取数据源时(数据源带有参数`id`),会默认读取动态数据源中参数为`id`的值;
2
3
4
5
参数sql:
sql
参数值是一个SQL语句,组件会根据SQL语句动态获取数据源并交由组件去分析重组和渲染,最终形成一个完美的树状结构下拉选择数据源;参数value:
isset($info['pid']) ? $info['pid'] : 0
绑定到该组件上的值,为空时可以设置为默认值0或其他值
;使用案例
<form class="layui-form model-form" action="">
<div class="layui-inline">
<label class="layui-form-label">上级菜单:</label>
<div class="layui-input-inline">
{common:select param="pid|1|上级菜单|name|id" sql="SELECT id,`name`,pid FROM sys_menu WHERE `status`=1 AND type <=3 AND mark=1 ORDER BY pid ASC,id ASC;" value="isset($info['pid']) ? $info['pid'] : 0"}
</div>
</div>
</form>
2
3
4
5
6
7
8
- 效果展示: