說明:以下代碼是在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>