目录
1. element-ui tree全部展开和全部折叠
在前端开发中，有时需要将平级的数据结构转换为树形结构，以便更容易地处理或展示层级关系。平级数据通常是一个数组，其中每个元素都包含一个指向其父级或子级的引用（例如，通过
parentId字段）。树形结构则是一个嵌套的对象或数组，每个节点都包含其子节点的引用。以下是一个将平级数据转换为树形结构的JavaScript示例
node-key="id"很重要
<template>
<div class="hello">
<h2>Essential Links</h2>
<el-tree
:data="data"
:props="{ label: 'label' }"
highlight-current
default-expand-all
ref="selectTree"
:expand-on-click-node="false"
node-key="id"
></el-tree>
<el-button @click="collapseAll2(data)">全部折叠</el-button>
<el-button @click="unFoldAll2(data)">全部展开</el-button>
</div>
</template>
<script>
export default {
name: "HelloWorld",
data() {
return {
props: {
label: "name",
children: "zones",
},
data: [
{
id: 1,
label: "一级 1",
children: [
{
id: 4,
label: "二级 1-1",
children: [
{
id: 9,
label: "三级 1-1-1",
},
{
id: 10,
label: "三级 1-1-2",
},
],
},
],
},
{
id: 2,
label: "一级 2",
children: [
{
id: 5,
label: "二级 2-1",
},
{
id: 6,
label: "二级 2-2",
},
],
},
{
id: 3,
label: "一级 3",
children: [
{
id: 7,
label: "二级 3-1",
},
{
id: 8,
label: "二级 3-2",
},
],
},
],
count: 1,
res: [],
};
},
methods: {
handleCheckChange(data, checked, indeterminate) {
console.log(data, checked, indeterminate);
},
handleNodeClick(data) {
console.log(data);
},
// 全部展开
unFoldAll2(data) {
let self = this;
data.forEach((el) => {
self.$refs.selectTree.store.nodesMap[el.id].expanded = true;
el.children && el.children.length > 0
? self.unFoldAll2(el.children)
: ""; // 子级递归
});
},
// 全部折叠
collapseAll2(data) {
let self = this;
data.forEach((el) => {
self.$refs.selectTree.store.nodesMap[el.id].expanded = false;
el.children && el.children.length > 0
? self.collapseAll2(el.children)
: ""; // 子级递归
});
}
}
};
</script>
2. 前端平级数据转成树
2.1.原数据
testData:[
{
id:'1',
name:"aa",
desc:"这是一个描述",
parentId:null,
},{
id:'11',
name:"aa_sub1",
desc:"这是一个描述_sub1",
parentId:'1',
},{
id:'111',
name:"aa_sub1_sub2",
desc:"这是一个描述_sub1_sub2",
parentId:'11',
},
{
id:'2',
name:"bb",
desc:"这是一个描述",
parentId:null,
},
{
id:'22',
name:"bb_sub1",
desc:"这是一个描述_sub1",
parentId:'2',
},{
id:'23',
name:"bb_sub2",
desc:"这是一个描述_sub2",
parentId:'2',
},{
id:'233',
name:"bb_sub2_sub2",
desc:"这是一个描述_sub2_sub2",
parentId:'23',
},{
id:'2333',
name:"bb_sub2_sub2_sub2",
desc:"这是一个描述_sub2_sub2_sub2",
parentId:'233',
},{
id:'23333',
name:"bb_sub2_sub2_sub23",
desc:"这是一个描述_sub2_sub2_sub2",
parentId:'233',
},{
id:'233333',
name:"bb_sub2_sub2_sub233",
desc:"这是一个描述_sub2_sub2_sub2",
parentId:'233',
},{
id:'24',
name:"bb_sub3",
desc:"这是一个描述_sub3",
parentId:'2',
},
]
2.2. 修改后数据
[{
"id": "1",
"name": "aa",
"desc": "这是一个描述",
"parentId": null,
"children": [{
"id": "11",
"name": "aa_sub1",
"desc": "这是一个描述_sub1",
"parentId": "1",
"children": [{
"id": "111",
"name": "aa_sub1_sub2",
"desc": "这是一个描述_sub1_sub2",
"parentId": "11"
}]
}]
}, {
"id": "2",
"name": "bb",
"desc": "这是一个描述",
"parentId": null,
"children": [{
"id": "22",
"name": "bb_sub1",
"desc": "这是一个描述_sub1",
"parentId": "2"
}, {
"id": "23",
"name": "bb_sub2",
"desc": "这是一个描述_sub2",
"parentId": "2",
"children": [{
"id": "233",
"name": "bb_sub2_sub2",
"desc": "这是一个描述_sub2_sub2",
"parentId": "23",
"children": [{
"id": "2333",
"name": "bb_sub2_sub2_sub2",
"desc": "这是一个描述_sub2_sub2_sub2",
"parentId": "233"
}, {
"id": "23333",
"name": "bb_sub2_sub2_sub23",
"desc": "这是一个描述_sub2_sub2_sub2",
"parentId": "233"
}, {
"id": "233333",
"name": "bb_sub2_sub2_sub233",
"desc": "这是一个描述_sub2_sub2_sub2",
"parentId": "233"
}]
}]
}, {
"id": "24",
"name": "bb_sub3",
"desc": "这是一个描述_sub3",
"parentId": "2"
}]
}]2.3. 前端代码
function generateData(data) {
data.forEach((item) => {
delete item.children;
})
let map = {};
data.forEach(function (item) {
map[item.id] = item;
});
let result = [];
data.forEach(function (item) {
let parent = map[item.parentId];
if (parent) {
// 获取全路径
item.allPath=parent.allPath+"-"+item.name;
(parent.children || (parent.children = [])).push(item);
} else {
// 获取全路径
item.allPath=item.name
result.push(item);
}
});
return result
};通过传入父级参数名字构建树
function generateData(data,parentId) {
data.forEach((item) => {
delete item.children;
})
let map = {};
data.forEach(function (item) {
map[item.id] = item;
});
let result = [];
data.forEach(function (item) {
let parent = map[item[parentId]];
if (parent) {
// 获取全路径
item.allPath=parent.allPath+"-"+item.name;
(parent.children || (parent.children = [])).push(item);
} else {
// 获取全路径
item.allPath=item.name
result.push(item);
}
});
return result
};树形还原平级数据
let res = []
function fn(source){
source.forEach(el=>{
res.push(el)
el.children && el.children.length>0 ? fn(el.children) : "" // 子级递归
})
}
fn(data)
console.log(res)3.动态内嵌设置表格 里面的iframe
<style>
iframe{
width: 100%;
}
</style>
<script>
// 动态设置iframe的高度
function setIframeHeight(iframe) {
if (iframe) {
var iframeWin = iframe.contentWindow || iframe.contentDocument.parentWindow;
if (iframeWin.document.body) {
iframe.height = iframeWin.document.documentElement.scrollHeight || iframeWin.document.body.scrollHeight;
}
}
}
// 判断一个url是否可以访问
function IsLoad(url,fun){
$.ajax({
url: url,
type: 'GET',
success: function(response) {
if($.isFunction(fun)){
fun(true);
}
},
error:function () {
if($.isFunction(fun)){
fun(false);
}
}
});
}
$(function () {
$("html").on("click","tr",function() {
if($(this).next().children().length===1){
$(this).next().remove();
}else{
$("tr").each(function(){
if($(this).children().length===1){
$(this).remove();
}
});
var tdnode= $(this).children('td').length;
// 获取当行第一个表格的值
var text=$(this).children('td').get(0);
text=$(text).children(":first").get(0).innerText;
var that=$(this);
IsLoad("http://www.santuy-rf.com/santuy/html/"+text+".html" ,function(res){
if(res){
that.after("<tr><td colspan='"+tdnode+"'><iframe frameborder='0' onload='setIframeHeight(this)' scrolling='no' src='http://www.santuy-rf.com/santuy/html/"+text+".html' onerror='xError(this)'></iframe></td></tr>");
}
});
}
})
})
</script>4. 前端处理内嵌的网页地址是不是404
在JavaScript前端，检测一个URL地址是否返回404（即资源未找到）通常涉及到发送一个网络请求到该地址，并检查响应状态码。这可以通过多种方式实现，最常见的是使用
fetchAPI或XMLHttpRequest对象。
建议用第一种
4.1. link和script可以区分跨域和404的错误
var isRunUrl=function(url){
return new Promise(function (resolve, reject) {
// 测试链接连通性, 主要检测404错误
// 由于AJAX通常无法区分404和跨域问题
// 所以只能用script 或者 link标签
// link比script更容易捕获错误
var dom= document.createElement('link');
dom.href = url;
dom.rel = 'stylesheet';
document.head.appendChild(dom);
dom.onload = function () {
document.head.removeChild(dom);
resolve();
}
dom.onerror = reject;
});
}
isRunUrl("测试地址").then(function(data){
//处理resolve的代码
console.log("Promise被置为resolve", data);;
},function(data){
//处理reject的代码
console .log("程序被置为了reject",data);
})
4.2. 不用跨域，只区分404
// 判断一个url是否可以访问
function IsLoad(url,fun){
$.ajax({
url: url,
type: 'GET',
success: function(response) {
if($.isFunction(fun)){
fun(true);
}
},
error:function () {
if($.isFunction(fun)){
fun(false);
}
}
});
}
IsLoad('同一域下的url地址',function(res){
if(res){
alert('请求的url可以访问');
}
});
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
