说明:以下代码是在thinkphp5.2版本下编程.
实现功能:父权限选中同时子权限全部选中,选中子权限时父权限也随之选中
解决方式:
一 . 前端通过给多选框设置onchange事件,通过ajax向后端发起请求(传递id),
二 . 后端通过ID获取子分类----通过pid获取父类 ,通过标识父类和子类传递到前台(json_decode后)
三 . 前端通过对象的下标区别是父类数据 还是子类数据
若为父类 则在勾选的时候处理 否则不处理 这就导致了 (当子类一个没有时,可能父类也会有勾选)
若为子类 则在勾选的时候全部将子类勾选 若是在取消勾选时 将子类全部取消勾选
后台类:
<?php
namespace app\index\controller;
use think\Controller;
class Test extends Controller
{
public function getPris(){
$pri = [
['id'=>1,'name'=>'角色管理','pid'=>0],
['id'=>2,'name'=>'商品管理','pid'=>0],
['id'=>3,'name'=>'权限管理','pid'=>0],
['id'=>4,'name'=>'角色添加','pid'=>1],
['id'=>5,'name'=>'角色修改','pid'=>1],
['id'=>6,'name'=>'角色列表','pid'=>1],
['id'=>7,'name'=>'商品添加','pid'=>2],
['id'=>8,'name'=>'商品修改','pid'=>2],
['id'=>9,'name'=>'商品列表','pid'=>2],
['id'=>10,'name'=>'权限添加','pid'=>3],
['id'=>11,'name'=>'权限修改','pid'=>3],
['id'=>12,'name'=>'权限列表','pid'=>3],
];
$id = input('id');
$pid = input('pid');
//通过ID获取子类
$children =$this->getTree($pri,$id);
$parent = $this->getFather($pri,$pid);
// foreach ($parent as $value) {
// array_push($children,$value);
// }
// return json($children);
$data = [
'father'=>$parent,
'children' =>$children,
];
return json($data);
}
public function day3()
{
//权限认证夫权限选中 子权限全部选中 子权限选中 父权限全部选中
$pri = [
['id'=>1,'name'=>'角色管理','pid'=>0],
['id'=>2,'name'=>'商品管理','pid'=>0],
['id'=>3,'name'=>'权限管理','pid'=>0],
['id'=>4,'name'=>'角色添加','pid'=>1],
['id'=>5,'name'=>'角色修改','pid'=>1],
['id'=>6,'name'=>'角色列表','pid'=>1],
['id'=>7,'name'=>'商品添加','pid'=>2],
['id'=>8,'name'=>'商品修改','pid'=>2],
['id'=>9,'name'=>'商品列表','pid'=>2],
['id'=>10,'name'=>'权限添加','pid'=>3],
['id'=>11,'name'=>'权限修改','pid'=>3],
['id'=>12,'name'=>'权限列表','pid'=>3],
];
$res = $this->getTree($pri);
$this->assign('pris',$res);
// dump($res);
return $this->fetch();
}
public function getFather($arr,$pid,$lev=1)
{
static $tree = [];
foreach ($arr as $key => $value) {
if($value['id']==$pid){
$value['lev'] =$lev;
$tree[] = $value;
$this->getFather($arr,$value['pid'],$lev+1);
}
}
return $tree;
}
public function getTree($arr,$pid=0,$lev=1)
{
static $tree = [];
foreach ($arr as $key => $value) {
if($value['pid']==$pid){
$value['lev'] =$lev;
$tree[] = $value;
$this->getTree($arr,$value['id'],$lev+1);
}
}
return $tree;
}
}
前台代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table>
{volist name="pris" id="vo"}
<tr>
{eq name="vo.pid" value="0"}
<td>
<input type="checkbox" name="pri[]" value="{$vo.id}" data-value="{$vo.pid}">{$vo.name}
</td>
{volist name="pris" id="v2"}
{eq name="v2.pid" value="$vo.id"}
<td>
<input type="checkbox" name="pri[]" value="{$v2.id}" data-value="{$v2.pid}">{$v2.name}
</td>
{/eq}
{/volist}
{/eq}
</tr>
{/volist}
</table>
</body>
<script type="text/javascript" src="__HOME__/js/jquery.js"></script>
<script type="text/javascript">
$('input[name="pri[]"]').on('change',function(){
var id=$(this).val();
var pid=$(this).attr('data-value');
var status = $(this).attr('checked');
//通过该权限id获取其父类 和 其子类
$.ajax({
url:'{:url("getPris")}',
type:'post',
data:{id:id,pid:pid},
success:function(data){
//获取所有的对象(方式一)
// var pris = $('input[name="pri[]"]');
// for(var j in data){
// for(var i in pris){
// if(pris[i].nodeType==1 && $(pris[i]).val()==data[j].id){
// if(status==='checked'){
// $(pris[i]).attr('checked','checked');
// }else{
// $(pris[i]).removeAttr('checked');
// }
// }
// }
// }
//方式二(bug当子类一个没有时,可能父类也会有勾选)
var children = data.children;
var father = data.father;
var pris = $('input[name="pri[]"]');
for(var j in children){
for(var i in pris){
if(pris[i].nodeType==1 && $(pris[i]).val()==children[j].id){
if(status==='checked'){
$(pris[i]).attr('checked','checked');
}else{
$(pris[i]).removeAttr('checked');
}
}
}
}
for(var j in father){
for(var i in pris){
if(pris[i].nodeType==1 && $(pris[i]).val()==father[j].id){
if(status==='checked'){
$(pris[i]).attr('checked','checked');
}
}
}
}
}
})
})
</script>
</html>