下拉树组件

概述

下拉树在我们的项目开发中出现的频率非常高，涉及多层级的数据源展示中，多数情况下会使用到下拉树，目前市面上下拉树的组件也非常多，但是那些都是别人开发的第三方组件，引入时也需要进行引用并初始化，同时还得要我们的后端提供数据源给他调用并渲染，显然对于要求快速开发项目时有点费事费力，因此我们决定封装下拉树组件，使得我们想要使用时直接传入参数，框架可以直接给我们提供一个完美的树状结构的数据出来，下面我们来认识下下拉树的原理和使用；

Tree下拉组件

• 组件：<widget:treeSelect name="pid|0|上级菜单|name|id" sql="SELECT id,name,pid FROM sys_menu WHEREstatus=1 AND type <=3 AND mark=1 ORDER BY pid ASC,id ASC;" th:value="${info['pid']}?:0"/>

• 参数：

name="pid|0|上级菜单|name|id"

`pid`：组件名称`pid`,此字段对应实体对象中的字段roleIds(对应到数据表中字段即为`pid`);
`0`：这里的参数有`0和1`的区分，0表示不必填，1表示必填；
`上级菜单`：这个文字会在初始化组件是控件的默认提示语，会动态解析为`请选择上级菜单`
`name`：这个参数表示当我们动态获取数据源时(数据源带有参数`name`),会默认读取动态数据源中参数为`name`的值；
`id`：这个参数表示当我们动态获取数据源时(数据源带有参数`id`),会默认读取动态数据源中参数为`id`的值；

sql="SELECT id,name,pid FROM sys_menu WHERE status=1 AND type <=3 AND mark=1 ORDER BY pid ASC,id ASC;" sql参数值是一个SQL语句，组件会根据SQL语句动态获取数据源并交由组件去分析重组和渲染，最终形成一个完美的树状结构下拉选择数据源；

• 组件使用

那么我们如何在表单中使用单选按钮组件呢，如下：

<form class="layui-form model-form" action="">
    <div class="layui-inline">
        <label class="layui-form-label">上级菜单：</label>
        <div class="layui-input-inline">
            <widget:treeSelect name="pid|0|上级菜单|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;" th:value="${info['pid']}?:0"/>
        </div>
    </div>
</form>

• 效果展示：