前言
今天做后台文章列表的时候,添加了一个功能:给文章批量移动分类。
方法有很多,比如:选择多条文章-按钮弹窗-下拉菜单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);}
最终效果:一个是没加样式的,一个是加了样式的。
有想继续研究的可以把分类的树形结构整合在里面。