layui学习笔记（五）关于layui按钮下拉菜单dropdown使用。研究dropdown数据提取、显示过长、样式显示问题。

前言

今天做后台文章列表的时候，添加了一个功能：给文章批量移动分类。
方法有很多，比如：选择多条文章-按钮弹窗-下拉菜单select-选择分类-提交。也可以选择多条文章-直接下拉菜单select-选择分类直接执行提交。

我用的是按钮，不能直接select下来菜单，也不想弹窗。最后选择了layui.dropdown，即用了按钮也用了下拉菜单。挺好！
下面是我一些做法，仅供学习参考。

thinkphp6+layuiadmin pro+apache+mysql+vscode

---

dropdown的使用

<!--HTML部分-->
<div class="layui-btn-group">
    <button class="layui-btn layuiadmin-btn-list layui-btn-normal layui-btn-sm" data-type="add">添加文章</button>
    <button class="layui-btn layui-btn-sm layuiadmin-btn-list" id="moveClass">移动分类</button>
    <button class="layui-btn layui-btn-danger layui-btn-sm layuiadmin-btn-list" data-type="batchdel">批量删除</button>
    <button class="layui-btn layui-btn-warm layui-btn-sm layuiadmin-btn-list" lay-href="article/article_list_recycle">回收站</button>
</div>

 layui的js部分

    //后端获取数据，执行dropdown下拉菜单
    var moveClass = function () {
        admin.req({
            url: "/ccadmins/article/moveClass",//后端接口
            type: 'get',
            success: function (res) {
                ClassList = res.data; //后端获取到的数据数组
                dropdown.render({
                    elem: '#moveClass' //绑定按钮元素ID
                    , data: ClassList  //将后端获取的数组赋值
                    , align: 'center'  //下拉菜单位置居中layui v2.6.8 新增
                    //style和className都是css样式，如果css样式很短就使用style
                    //如果很长的css样式，就在样式表里写好，用className调用。
                    //我这里都写就是展示一下，可以写在一起。
                    //height主要是因为获取的数据比较多，超出长度了。这里要限制高度。
                    //再加上overflow-x:hidden，限制横向滚动条，不限制纵向滚动条。
                    , style: 'height:600px;overflow-x:hidden;'
                    //site-dropdown样式主要是给滚动条加了个样式，要不然太难看了。
                    , className: 'site-dropdown'
                    , click: function (data, othis) {
                        var checkStatus = table.checkStatus('LAY-app-article-list');//获得表格的复选框
                        var checkData = checkStatus.data; //得到复选框选中的数据
                        if (checkData.length === 0) {
                            return layer.msg('请选择数据');
                        } else {
                            var ids = [];
                            for (i = 0; i < checkData.length; i++) {
                                ids.push(checkData[i].id);
                            }//将复选框选中的数据ID变成数组
                            layer.confirm('确定批量移动分类吗？', function (index) {
                                admin.req({
                                    url: "/ccadmins/article/article_moveclass", //后端移动文章分类接口
                                    data: { ids: ids, cat_id: data.id }, //传递ID数组和分类ID
                                    type: 'post',
                                    done: function (res) {
                                        if (res.status == 0) {
                                            layer.msg(res.msg, { icon: 1, time: 1300 }, function () {
                                                table.reload('LAY-app-article-list'); //重载表格
                                            });
                                        } else if (res.status == 1) {
                                            layer.msg(res.msg);
                                            return false;
                                        }
                                    }
                                })
                            });
                        }
                    }
                });
            }
        })
    }
    moveClass();

 /ccadmins/article/moveClass  接口控制器

<?php
namespace app\admins\controller;

use think\facade\Db;
use think\facade\Request;
class Article{
    //分类菜单
    public function moveClass(){
        $ret = Db::name('article_category')
            ->where('delete','0') //软删除1为已删除0为未删除
            ->field('cat_id,cat_name,parent_id')  //获取三个字段
            ->order('sort ASC, cat_id ASC')
            ->select()
            ->toArray();  //转成数组
        //ArticleTreetable函数在common.php中
        //属于公共函数，主要是为了显示文章分类级别
        $cateTree = ArticleTreetable($ret);        
        //获得dropdown想要的参数
        //data参数，请参考layui官方文档dropdown部分
        //https://layui.gitee.io/v2/docs/modules/dropdown.html#data
        //我这里就需要title和id就可以了
        foreach ($cateTree as $key=>$value){
            $d[$key]['title'] =$value['mark'].$value['cat_name'];
            $d[$key]['id'] =$value['cat_id'];
        }
        return json(['code'=>0,'msg'=>'ok','data'=>$d]);
    }
    //批量移动文章分类
    public function article_moveclass(){
        $ids = Request::instance()->param('ids');//获取前台传递的ID数组
        $datas = [
            'cat_id' => Request::instance()->param('cat_id') //获取分类ID
        ];
        if($ids){
            $ret = Db::name('article')->where('id','in',$ids)->update($datas);
            if($ret){
                return json(['code'=>0,'status'=>0,'msg'=>'批量移动分类成功','data'=>'']);
            }
            else{
                return json(['code'=>0,'status'=>1,'msg'=>'没有移动任何数据！','data'=>'']);
            }
        }
        else{
            return json(['code'=>0,'status'=>1,'msg'=>'参数错误','data'=>'']);
        }
    }
}

 common.php   thinkphp的应用公共文件

/**common.php,thinkphp的应用公共文件
 * 文章无限分类
 * @param array $data     分类数据
 * @param int $parent_id  默认获取一级导航
 * @param int $level = 0  无限极分类层次
 * @param $mark           无限极分类标记
 * @return array
 */
function ArticleTreetable($data, $parent_id = 0, $level = 0, $mark = ' ━ '){
    $arr = array();
    foreach($data as $k => $v){
        if($v['parent_id'] == $parent_id) {
            unset($data[$k]); //删除该节点，减少递归的消耗
            $v['mark'] = str_repeat($mark, $level);
            $arr[] = $v;
            $arr = array_merge($arr, ArticleTreetable($data, $v['cat_id'], $level+1));
        }
    }
    return $arr;
}

css部分

/*下拉菜单样式*/
.site-dropdown,
.site-dropdown .layui-menu{background-color: #009688; border: none;}
.site-dropdown .layui-menu li{color: #fff;}
.site-dropdown .layui-menu li:hover{background-color: #333;}
/*滚动条样式*/
.site-dropdown::-webkit-scrollbar{width: 6px; height: 6px;}
.site-dropdown::-webkit-scrollbar-button:vertical{display: none;}
.site-dropdown::-webkit-scrollbar-track,
.site-dropdown::-webkit-scrollbar-corner{background-color: #009688;}
.site-dropdown::-webkit-scrollbar-thumb{border-radius: 0px; background-color: rgba(0,0,0,.3);}
.site-dropdown::-webkit-scrollbar-thumb:vertical:hover{background-color: rgba(0,0,0,.35);}
.site-dropdown::-webkit-scrollbar-thumb:vertical:active{background-color: rgba(0,0,0,.38);}

最终效果：一个是没加样式的，一个是加了样式的。

有想继续研究的可以把分类的树形结构整合在里面。