需求是在父页面有个导航栏，点击导航栏，下面的内容区域使用jquery的load加载。
假设主页面为index.html，使用load加载的子页面为main.html。
其中，main.html里需要用到layui的级联选择器。
在layui官网插件市场找到扩展插件cascader，下载示例demo到本地。
运行正常：
接下来将main.html嵌入到index.html中，运行发现cascader插件依赖的laytpl.js资源加载404，如下图：
正确的路径应该是：http://127.0.0.1:5500/layui/lay/modules/laytpl.js
项目目录结构如下：
main.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="keywords" content="hsiangleev,layui扩展">
<title>layui扩展无限级联选择器</title>
<link rel="stylesheet" href="../layui/css/layui.css" media="all">
<link rel="stylesheet" href="cascader.css" media="all">
<link rel="icon" type="image/png" sizes="32x32" href="../favicon.ico">
</head>
<body>
<button class="layui-btn">reload</button>
<div class="layui-form-item">
<label class="layui-form-label">选择框</label>
<div class="layui-input-block">
<input type="text" id="a" class="layui-input" readonly="readonly">
</div>
</div>
<script src="../layui/layui.js"></script>
<script>
layui.config({
base: "../layui/lay/mymodules/"
}).use(["jquery","cascader"], function(){
var $ = layui.jquery;
var cascader = layui.cascader;
var data = [
{
value: 'A',
label: 'a',
children: [
{
value: 'AA1',
label: 'aa1',
},
{
value: 'BB1',
label: 'bb1'
}
]
},
{
value: 'B',
label: 'b',
children: [
{
value: 'AA2',
label: 'aa2',
children: [
{
value: 'AAA3',
label: 'aaa3',
children: [
{
value: 'AAA3',
label: 'aaa3',
children: [
{
value: 'AAA3',
label: 'aaa3',
},
{
value: 'BBB3',
label: 'bbb3'
}
]
}
]
},
{
value: 'BBB3',
label: 'bbb3'
}
]
},
{
value: 'BB2',
label: 'bb2',
children: [
{
value: 'AAA4',
label: 'aaa4',
},
{
value: 'BBB4',
label: 'bbb4'
}
]
}
]
},
{
value: 'C',
label: 'c',
}
]
var cas=cascader({
elem: "#a",
data: data,
// url: "/aa",
// type: "post",
// triggerType: "change",
// showLastLevels: true,
// where: {
// a: "aaa"
// },
value: ["B", "BB2", "BBB4"],
// changeOnSelect: true,
success: function (valData,labelData) {
console.log(valData,labelData);
}
});
var reloadData=[
{
value: 'A',
label: 'a',
children: [
{
value: 'AA1',
label: 'aa1',
},
{
value: 'BB1',
label: 'bb1'
}
]
}
]
$(".layui-btn").on("click",function() {
cas.reload({
data: reloadData,
value:['A','BB1']
})
})
});
</script>
</body>
</html>
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>我是父窗口</h2>
<div id="content"></div>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script>
$("#content").load("main.html");
</script>
</body>
</html>
解决办法：
在main.html---里加入dir配置
image.png
dir指向layui.js 所在目录
网友评论