//接口返回的数据是像allRes这样的数组:
let allRes = [
{
resourcesId: 4,
resName: "删除角色",
resParentId: 2
},
{
resourcesId: 3,
resName: "编辑角色",
resParentId: 1
},
{
resourcesId: 2,
resName: "设置权限",
resParentId: 1
},
{
resourcesId: 5,
resName: "添加用户",
resParentId: 4
},
{
resourcesId: 6,
resName: "更新用户",
resParentId: 4
},
{
resourcesId: 7,
resName: "删除用户",
resParentId: 6
},
{
resourcesId: 8,
resName: "重置密码",
resParentId: 3
},
{
resourcesId: 9,
resName: "添加地区",
resParentId: 5
},
{
resourcesId: 10,
resName: "编辑地区",
resParentId: 6
}
];
//在项目中我是用iview的树形组件所以需要转换成树形结构,以下是实现代码
let arr = toTreeData(allRes);
function toTreeData(data) {
let resData = data;
let tree = [];
for (let i = 0; i < resData.length; i++) {
if (resData[i].resParentId === 1) {
let obj = {
id: resData[i].resourcesId,
text: resData[i].resName,
children: []
};
tree.push(obj);
resData.splice(i, 1);
i--;
}
}
run(tree);
function run(chiArr) {
if (resData.length !== 0) {
for (let i = 0; i < chiArr.length; i++) {
for (let j = 0; j < resData.length; j++) {
if (chiArr[i].id === resData[j].resParentId) {
let obj = {
id: resData[j].resourcesId,
text: resData[j].resName,
children: []
};
chiArr[i].children.push(obj);
resData.splice(j, 1);
j--;
}
}
// console.log(chiArr[i].children);
run(chiArr[i].children);
}
}
}
return tree;
}
//因为在多个页面中有用到,但是对应的id,和parent id 的属性名称是不一样的,所以封装了一下
function toTreeData (data, attributes) {
let resData = data;
let tree = [];
for (let i = 0; i < resData.length; i++) {
if (resData[i].resParentId === attributes.rootId) {
let obj = {
id: resData[i][attributes.id],
title: resData[i][attributes.name],
children: []
};
tree.push(obj);
resData.splice(i, 1);
i--;
}
}
run(tree);
function run(chiArr) {
if (resData.length !== 0) {
for (let i = 0; i < chiArr.length; i++) {
for (let j = 0; j < resData.length; j++) {
if (chiArr[i].id === resData[j][attributes.parentId]) {
let obj = {
id: resData[j][attributes.id],
title: resData[j][attributes.name],
children: []
};
chiArr[i].children.push(obj);
resData.splice(j, 1);
j--;
}
}
run(chiArr[i].children);
}
}
}
return tree;
}
//调用:
let data = allRes;
// 属性配置信息
let attributes = {
id: 'resourcesId',
parentId: 'resParentId',
name: 'resName',
rootId: 1
};
let treeData = toTreeData(data, attributes);
//格式化后的
[
{
id: 3,
title: "重置密码",
children: []
},
{
id: 2,
title: "设置权限",
children: [
{
id: 4,
title: "删除角色",
children: [
{
id: 5,
title: "添加用户",
children: [
{
id: 9,
title: "添加地区",
children: []
}
]
},
{
id: 6,
title: "更新用户",
children: [
{
id: 7,
title: "删除用户",
children: []
},
{
id: 10,
title: "编辑地区",
children: []
}
]
}
]
}
]
}
]
<include file="Public:header" />
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
<include file="Public:top" />
<include file="Public:left" />
<div class="content-wrapper">
<section class="content-header">
<h3 class="topBreadNav">
<a href="javascrapt:;">后台管理</a>
<span><i class="fa fa-angle-right"></i>{$title}</span>
</h3>
</section>
<section class="content editMenu">
<div class="topNav">
<p>账号:<span>1352162554</span></p>
<h4>菜单功能权限</h4>
<div class="mains">
<div class="checkBox">
<div class="selectBlock nesting">
<input data-pid="0" onclick='javascript:check_parent_node(42,this);check_child_node(42,this);' data-id="42"
value="42" checked="true" type="checkbox" class="menu_checkbox">
<img src="/~caoshanbin/cus/html/Public/Admin/image/cked.png" class="cked">
<span class="clickShows" onclick="clickShow(this)">
<span class="gt">
<i class="fa fa-angle-left gt_i" style="transform: rotate(-90deg);">
</i>
</span>
<img class="closes" src="/~caoshanbin/cus/html/Public/Admin/image/unfold.png">
<span class="textStr">我的订单</span>
</span>
<div class="Block nesting">
<input onclick='javascript:check_parent_node(45,this);check_child_node(45,this);' data-pid="42" value="45"
data-id="45" checked="true" type="checkbox" class="menu_checkbox">
<img src="/~caoshanbin/cus/html/Public/Admin/image/cked.png" class="cked">
<span class="clickShows" onclick="clickShow(this)">
<span class="gt">
<i class="fa fa-angle-left gt_i" style="transform: rotate(-180deg);">
</i>
</span>
<img class="closes" src="/~caoshanbin/cus/html/Public/Admin/image/unfold.png">
<span class="textStr">自营单</span>
</span>
<div class="Block nesting">
<input onclick='javascript:check_parent_node(49,this);check_child_node(49,this);' data-pid="45" value="49"
data-id="49" checked="true" type="checkbox" class="menu_checkbox">
<img src="/~caoshanbin/cus/html/Public/Admin/image/cked.png" class="cked">
<span class="clickShows" onclick="clickShow(this)">
<span class="gt">
<i class="fa fa-angle-left gt_i" style="transform: rotate(-180deg);">
</i>
</span>
<img class="closes" src="/~caoshanbin/cus/html/Public/Admin/image/unfold.png">
<span class="textStr">子自营单</span>
</span>
</div>
<div class="Block nesting">
<input onclick='javascript:check_parent_node(50,this);check_child_node(49,this);' data-pid="45" value="50"
data-id="50" checked="true" type="checkbox" class="menu_checkbox">
<img src="/~caoshanbin/cus/html/Public/Admin/image/cked.png" class="cked">
<span class="clickShows" onclick="clickShow(this)">
<span class="gt">
<i class="fa fa-angle-left gt_i" style="transform: rotate(-180deg);">
</i>
</span>
<img class="closes" src="/~caoshanbin/cus/html/Public/Admin/image/unfold.png">
<span class="textStr">子托管单</span>
</span>
</div>
</div>
<div class="Block nesting">
<input onclick='javascript:check_parent_node(46,this);check_child_node(46,this);' data-pid="42" value="46"
data-id="46" checked="true" type="checkbox" class="menu_checkbox">
<img src="/~caoshanbin/cus/html/Public/Admin/image/cked.png" class="cked">
<span class="clickShows" onclick="clickShow(this)">
<span class="gt">
<i class="fa fa-angle-left gt_i" style="transform: rotate(-180deg);">
</i>
</span>
<img class="closes" src="/~caoshanbin/cus/html/Public/Admin/image/unfold.png">
<span class="textStr">托管单</span>
</span>
</div>
</div>
</div>
<div class="checkBox">
<div class="selectBlock nesting">
<input data-pid="0" onclick='javascript:check_parent_node(43,this);check_child_node(43,this);' data-id="43"
value="43" checked="true" type="checkbox" class="menu_checkbox">
<img src="/~caoshanbin/cus/html/Public/Admin/image/cked.png" class="cked">
<span class="clickShows" onclick="clickShow(this)">
<span class="gt">
<i class="fa fa-angle-left gt_i" style="transform: rotate(-90deg);">
</i>
</span>
<img class="closes" src="/~caoshanbin/cus/html/Public/Admin/image/unfold.png">
<span class="textStr">帐单管理</span>
</span>
<div class="Block nesting">
<input class="menu_checkbox" onclick='javascript:check_parent_node(98,this);check_child_node(98,this);' data-pid="43" value="98"
data-id="98" checked="true" type="checkbox">
<img src="/~caoshanbin/cus/html/Public/Admin/image/cked.png" class="cked">
<span class="clickShows" onclick="clickShow(this)">
<span class="gt">
<i class="fa fa-angle-left gt_i" style="transform: rotate(-180deg);">
</i>
</span>
<img class="closes" src="/~caoshanbin/cus/html/Public/Admin/image/unfold.png">
<span class="textStr">我的账单</span>
</span>
</div>
<div class="Block nesting">
<input class="menu_checkbox" onclick='javascript:check_parent_node(461,this);check_child_node(461,this);' data-pid="43" value="461"
data-id="461" checked="true" type="checkbox">
<img src="/~caoshanbin/cus/html/Public/Admin/image/cked.png" class="cked">
<span class="clickShows" onclick="clickShow(this)">
<span class="gt">
<i class="fa fa-angle-left gt_i" style="transform: rotate(-180deg);">
</i>
</span>
<img class="closes" src="/~caoshanbin/cus/html/Public/Admin/image/unfold.png">
<span class="textStr">子账号账单</span>
</span>
</div>
</div>
</div>
<div class="checkBox">
<div class="selectBlock nesting">
<input data-pid="0" class="menu_checkbox" onclick='javascript:check_parent_node(44,this);check_child_node(44,this);' data-id="44"
value="44" checked="false" type="checkbox">
<img src="/~caoshanbin/cus/html/Public/Admin/image/cked.png" class="cked">
<span class="clickShows" onclick="clickShow(this)">
<span class="gt">
<i class="fa fa-angle-left gt_i" style="transform: rotate(-180deg);">
</i>
</span>
<img class="closes" src="/~caoshanbin/cus/html/Public/Admin/image/unfold.png">
<span class="textStr">我的工作台</span>
</span>
</div>
</div>
</div>
<div class="butBox">
<button type="button" class="btnBlue" onclick="editMenuSubmit()">保存</button>
</div>
</div>
</section>
</div>
<include file="Public:footer" />
</div>
<include file="Public:footer_js" />
</body>
<script type="text/javascript" charset="utf-8" >
var list=[{
"menuPid": 0,
"menuId": 42,
"defaultValue": false,
"canChange": false,
"menuTitle": "我的订单",
"isSelected": true,
"fuid": 1070,
"nextMenu": [{
"menuPid": 42,
"menuId": 45,
"defaultValue": false,
"canChange": false,
"menuTitle": "自营单",
"isSelected": true,
"nextMenus": [{
"menuPid": 45,
"menuId": 981,
"defaultValue": false,
"canChange": false,
"menuTitle": "我的账单",
"isSelected": true,
"fuid": 10701,
"isDefault": false
}, {
"menuPid": 45,
"menuId": 4611,
"defaultValue": false,
"canChange": false,
"menuTitle": "子账号账单",
"isSelected": true,
"fuid": 10702,
"isDefault": false
}],
"fuid": 1070,
"isDefault": false
}, {
"menuPid": 42,
"menuId": 46,
"defaultValue": false,
"canChange": false,
"menuTitle": "托管单",
"isSelected": true,
"fuid": 1070,
"isDefault": false
}],
"isDefault": false
}, {
"menuPid": 0,
"menuId": 43,
"defaultValue": false,
"canChange": false,
"menuTitle": "帐单管理",
"isSelected": true,
"fuid": 1070,
"nextMenu": [{
"menuPid": 43,
"menuId": 98,
"defaultValue": false,
"canChange": false,
"menuTitle": "我的账单",
"isSelected": true,
"fuid": 10701,
"isDefault": false
}, {
"menuPid": 43,
"menuId": 461,
"defaultValue": false,
"canChange": false,
"menuTitle": "子账号账单",
"isSelected": true,
"fuid": 10702,
"isDefault": false
}],
"isDefault": false
}, {
"isSelected": false,
"fuid": 1070,
"menuPid": 0,
"menuId": 44,
"defaultValue": false,
"canChange": false,
"menuTitle": "我的工作台",
"nextMenu": [],
"isDefault": false
}]
$(function () {
// var html=[];
// for(var i=0;i<list.length;i++){
// html.push(`<div class="checkBox">
// <div class="selectBlock nesting">
// <input data-pid="${list[i].menuPid}" onclick="control_menu_display(${list[i].menuId},this)" data-id="${list[i].menuId}" value="" checked="${list[i].isSelected}" type="checkbox" />
// <img src="__PUBLIC__/Admin/image/cked.png" class="cked" >
// <span class="clickShows" onclick="clickShow(this)" >
// <span class="gt" >
// <i class="fa fa-angle-left gt_i" ></i>
// </span>
// <img class="closes" src="__PUBLIC__/Admin/image/unfold.png" > ${list[i].menuTitle}
// </span>`);
// for(var c=0;c<list[i].nextMenu.length;c++){
// html.push(
// `<div class="Block nesting" >
// <input onclick="control_menu_display(${list[i].nextMenu[c].menuId},this)" data-pid="${list[i].nextMenu[c].menuPid}" value="" data-id="${list[i].nextMenu[c].menuId}" checked="${list[i].nextMenu[c].isSelected}" type="checkbox" />
// <img src="__PUBLIC__/Admin/image/cked.png" class="cked" >
// <span class="clickShows" onclick="clickShow(this)" >
// <span class="gt" >
// <i class="fa fa-angle-left gt_i" style="" ></i>
// </span>
// <img class="closes" src="__PUBLIC__/Admin/image/unfold.png" > ${list[i].nextMenu[c].menuTitle}
// </span>
// </div>`);
// }
// html.push(`</div></div>`);
// }
// $(".mains").html(html.join(''));
$(".mains .nesting").each(function(){
var $this=$(this);
if($this.find(".nesting").length<=0){
$this.find(".closes").attr("src","__PUBLIC__/Admin/image/unfold.png");
$this.find(".gt_i").css("transform","rotate(-180deg)");
}else{
$this.find(".closes").attr("src","__PUBLIC__/Admin/image/unfold.png");
$this.find(".gt_i").css("transform","rotate(-90deg)");
}
})
})
function clickShow(t){
var $this=$(t);
if($this.siblings(".nesting").length>0){
if($this.siblings(".nesting").css('display')=="none"){
$this.siblings(".nesting").slideDown(250);
$this.find("img").attr("src","__PUBLIC__/Admin/image/unfold.png");
$this.find(".gt_i").css("transform","rotate(-90deg)");
}else{
$this.siblings(".nesting").slideUp(250);
$this.find("img").attr("src","__PUBLIC__/Admin/image/close.png");
$this.find(".gt_i").css("transform","rotate(-180deg)");
}
}
}
</script>
<script type="text/javascript">
function check_child_node(id, t) {
var cid_obj_arr = $(".menu_checkbox[data-pid='" + id + "']");
var is_check = $(".menu_checkbox[value='" + id + "']").is(':checked');
if (cid_obj_arr.length != 0) {
cid_obj_arr.each(function(i) {
var thiss = $(this);
if (is_check == true) {
thiss.prop("checked", "checked");
thiss.next().hide();
} else {
thiss.prop("checked", false);
}
check_child_node(thiss.val());
});
}
if ($(t).attr("data-pid") == 0 && $(t).prop("checked")) {
$(t).parent(".nesting").find("input").prop("checked", true);
}
}
function check_parent_node(id, t) {
var that = $(t).val();
var pid = $(".menu_checkbox[value='" + id + "']").attr("data-pid");
var cid_obj_arr = $(".menu_checkbox[data-pid='" + pid + "']");
var num = 0;
if (pid != 0) {
cid_obj_arr.each(function(index) {
var $this = $(this);
if ($this.is(":checked")) {
num++;
}
if (index == cid_obj_arr.length - 1) {
var input = $(".menu_checkbox[value='" + id + "']").parent(".nesting").parent(".nesting").find("input");
if (num == 0 && input.is(":checked")) {
input.removeAttr('checked');
input.prop("checked", false);
} else if (num >= 1 && !input.prop("checked")) {
input.prop("checked", true);
$this.parent(".nesting").siblings().find("input").prop("checked", false);
$this.prop("checked", false);
$(".menu_checkbox[value='" + that + "']").prop("checked", true);
}
}
})
}
};
function editMenuSubmit () {
var arrays=new Array();
$(".mains .menu_checkbox").each(function(){
$this=$(this);
if($this.prop("checked")){
// console.log($this.siblings("span").find(".textStr").html());
var jsonStr={
"resParentId":$this.attr("data-pid"),
"resourcesId":$this.attr("data-id"),
"resName":$this.siblings("span").find(".textStr").text()
};
arrays.push(jsonStr);
}
});
// console.log(arrays);
let data = allRes;
// 属性配置信息
let attributes = {
id: 'resourcesId',
parentId: 'resParentId',
name: 'resName',
rootId: 0
};
//
let treeData = toTreeData(arrays, attributes);
console.log(treeData);
}
let allRes = [
{
resourcesId: 4,
resName: "删除角色",
resParentId: 2
},
{
resourcesId: 3,
resName: "编辑角色",
resParentId: 1
},
{
resourcesId: 2,
resName: "设置权限",
resParentId: 1
},
{
resourcesId: 5,
resName: "添加用户",
resParentId: 4
},
{
resourcesId: 6,
resName: "更新用户",
resParentId: 4
},
{
resourcesId: 7,
resName: "删除用户",
resParentId: 6
},
{
resourcesId: 8,
resName: "重置密码",
resParentId: 3
},
{
resourcesId: 9,
resName: "添加地区",
resParentId: 5
},
{
resourcesId: 10,
resName: "编辑地区",
resParentId: 6
}
];
//公共方法
function toTreeData (data, attributes) {
// console.log(data);
let resData = data;
let tree = [];
console.log(resData);
console.log(attributes)
for (let i = 0; i < resData.length; i++) {
console.log(resData[i].resParentId);
console.log(attributes.rootId)
if (resData[i].resParentId == attributes.rootId) {
let obj = {
menuId: resData[i][attributes.id],
menuPid:resData[i][attributes.parentId],
menuTitle: resData[i][attributes.name],
nextMenu: []
};
tree.push(obj);
console.log(tree);
resData.splice(i, 1);
i--;
}
}
run(tree);
function run(chiArr) {
if (resData.length !== 0) {
for (let i = 0; i < chiArr.length; i++) {
for (let j = 0; j < resData.length; j++) {
if (chiArr[i].menuId == resData[j][attributes.parentId]) {
let obj = {
menuId: resData[j][attributes.id],
menuPid:resData[j][attributes.parentId],
menuTitle: resData[j][attributes.name],
nextMenu: []
};
chiArr[i].nextMenu.push(obj);
resData.splice(j, 1);
j--;
}
}
run(chiArr[i].nextMenu);
}
}
}
return tree;
}
</script>