Layui 2.9.2 列表商品展示页 用模板引擎 laytpl Ajax 读取json 数据 筛选数组 filter css 限制文体显示过长用。。。代替
2023-12-22 06:20:00
全代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>软件管理器</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
<link rel="stylesheet" href="./css/admin.css" />
<link rel="stylesheet" href="./css/template.css" />
<style>
.limit-text { /* 限制文件显示长度 */
width: 150px; /* 显示150px文本其余用... */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div class="layui-fluid layadmin-maillist-fluid">
<div id="cont" class="layui-row layui-col-space15">
<script id="demo" type="text/html">
{{# layui.each(d.list, function(index, item){ }}
<div class="layui-col-md4 layui-col-sm6">
<div class="layadmin-contact-box">
<div class="layui-col-md4 layui-col-sm6">
<a href="javascript:;">
<div class="layadmin-text-center">
<img src="{{= item.mpic}}">
<div class="layadmin-maillist-img layadmin-font-blod">{{= item.softname}}</div>
</div>
</a>
</div>
<div class="layui-col-md8 layadmin-padding-left20 layui-col-sm6">
<h3 class="layadmin-title" style="color:#16b777">
<span class="layui-badge layui-bg-blue">{{= item.lb}}</span>
<br>
<i class="layui-icon layui-icon-util"></i>
<strong>{{= item.softname}}</strong>
</h3>
<p class="layadmin-textimg limit-text">
<i class="layui-icon layui-icon-download-circle"></i>
<a href="{{= item.down}}">{{= item.downname}}</a>
</p>
<div class="layadmin-address limit-text">
<strong style="color:#ffb800">版本: </strong>{{= item.ver}}
<br>
<strong>网盘: </strong></strong><a href="{{= item.href}}" target="_blank">{{= item.wbcc}}</a>
<br>
<strong>密码: </strong>{{= item.wbccmm}}
<br>
<strong style="color:#1e9fff">官网: </strong><a href="{{= item.href}}" target="_blank">{{= item.href}}</a>
</div>
</div>
</div>
</div>
{{# }); }}
{{# if(d.list.length === 0){ }}
无数据
{{# } }}
</script>
</div>
</div>
<script src="./layui/layui.js"></script>
<script>
var laytpl = layui.laytpl;
var $ = layui.jquery;
$.ajax({
type:"get",
url:"./softall.json",
data:{},
dataType:"json",
success:function(data){
// console.log(data);
var da = data.list;
// console.log(da);
let hm = da.filter(function(item){
return item.lb == "电脑维护";
});
// console.log(hm);
data.list = hm;
// console.log(data);
var getTpl = demo.innerHTML,
view = document.getElementById('cont');
laytpl(getTpl).render(data, function(html) {
view.innerHTML = html;
});
}
});
</script>
</body>
</html>softall.json
{
"code": 0,
"msg": "",
"count": 1000,
"title": "软件管理器",
"list": [{
"id": 8001,
"softname": "DiskGenius",
"href": "https://get.adobe.com/cn/reader/",
"down": "../../software/电脑维护/DiskGenius.zip",
"downname": "DiskGenius.zip",
"ver": "版本",
"wbcc": "外部库存",
"wbccmm": "外部库存密码",
"mpic": "./img/diskgenius.png",
"cpic": "参数图片",
"sm": "说明",
"lb": "电脑维护"
}, {
"id": 8002,
"softname": "Ghost",
"href": "https://get.adobe.com/cn/reader/",
"down": "../../software/电脑维护/DiskGenius.zip",
"downname": "ghost.exe",
"ver": "版本",
"wbcc": "外部库存",
"wbccmm": "外部库存密码",
"mpic": "./img/ghost.png",
"cpic": "参数图片",
"sm": "说明",
"lb": "电脑维护"
}, {
"id": 8003,
"softname": "Ghost",
"href": "https://get.adobe.com/cn/reader/",
"down": "../../software/电脑维护/DiskGenius.zip",
"downname": "ghost.exe",
"ver": "版本",
"wbcc": "外部库存",
"wbccmm": "外部库存密码",
"mpic": "./img/ghost.png",
"cpic": "参数图片",
"sm": "说明",
"lb": "电脑维护"
}, {
"id": 8004,
"softname": "Ghost",
"href": "https://get.adobe.com/cn/reader/",
"down": "../../software/电脑维护/DiskGenius.zip",
"downname": "ghost.exe",
"ver": "版本",
"wbcc": "外部库存",
"wbccmm": "外部库存密码",
"mpic": "../../software/img/ghost.png",
"cpic": "参数图片",
"sm": "说明",
"lb": "电脑维护"
}, {
"id": 8005,
"softname": "Ghost",
"href": "https://get.adobe.com/cn/reader/",
"down": "../../software/电脑维护/DiskGenius.zip",
"downname": "ghost.exe",
"ver": "版本",
"wbcc": "外部库存",
"wbccmm": "外部库存密码",
"mpic": "../../software/img/ghost.png",
"cpic": "参数图片",
"sm": "说明",
"lb": "电脑维护"
}, {
"id": 8006,
"softname": "Ghost",
"href": "https://get.adobe.com/cn/reader/",
"down": "../../software/电脑维护/DiskGenius.zip",
"downname": "ghost.exe",
"ver": "版本",
"wbcc": "外部库存",
"wbccmm": "外部库存密码",
"mpic": "../../software/img/ghost.png",
"cpic": "参数图片",
"sm": "说明",
"lb": "电脑维护"
}, {
"id": 8013,
"softname": "软件名称",
"href": "连接",
"down": "下载",
"downname": "DiskGenius.zip",
"ver": "版本",
"wbcc": "外部库存",
"wbccmm": "外部库存密码",
"mpic": "主图片",
"cpic": "参数图片",
"sm": "说明",
"lb": "类别"
}, {
"id": 8014,
"softname": "软件名称",
"href": "https://get.adobe.com/cn/reader/",
"down": "下载",
"downname": "DiskGenius.zip",
"ver": "版本",
"wbcc": "外部库存",
"wbccmm": "外部库存密码",
"mpic": "../../software/img/character.jpg",
"cpic": "参数图片",
"sm": "说明",
"lb": "系统辅助"
}, {
"id": 8015,
"softname": "软件名称",
"href": "https://get.adobe.com/cn/reader/",
"down": "下载",
"downname": "DiskGenius.zip",
"ver": "版本",
"wbcc": "外部库存",
"wbccmm": "外部库存密码",
"mpic": "../../software/img/character.jpg",
"cpic": "参数图片",
"sm": "说明",
"lb": "办公软件"
}, {
"id": 8016,
"softname": "软件名称",
"href": "https://get.adobe.com/cn/reader/",
"down": "下载",
"downname": "DiskGenius.zip",
"ver": "版本",
"wbcc": "外部库存",
"wbccmm": "外部库存密码",
"mpic": "../../software/img/character.jpg",
"cpic": "参数图片",
"sm": "说明",
"lb": "办公软件"
}]
}模板引擎 laytpl
<div id="cont" class="layui-row layui-col-space15"></d>
<script id="demo" type="text/html"> // 模板
{{# layui.each(d.list, function(index, item){ }}
<strong>{{= item.modname}}</strong>
<strong>{{= item.alias}}</strong>
<strong>{{= item.site}}</strong>
{{# }); }}
{{# if(d.list.length === 0){ }}
无数据
{{# } }}
</script>
<script>
var laytpl = layui.laytpl;
var data = {
"title": "Layui 常用模块",
"list": [
{
"modname": "弹层",
"alias": "layer",
"site": "layer.domain.com"
},
{
"modname": "表单",
"alias": "form"
},
{
"modname": "表格",
"alias": "table"
},
{
"modname": "日期",
"alias": "laydate"
},
{
"modname": "上传",
"alias": "upload"
}
]
};
var getTpl = demo.innerHTML,
view = document.getElementById('cont');
laytpl(getTpl).render(data, function(html) {
view.innerHTML = html;
});
<script>Ajax 读取json 数据
var $ = layui.jquery; // layui 内含jquery
$.ajax({
type:"get", // post 还get 传
url:"./softall.json",
data:{},
dataType:"json", // 数据类型
success:function(data){ // 成功返回函数
console.log(data);
});
}
});筛选数组 filter
var da = data.list;
// 提取json 数据数组出
let hm = da.filter(function(item){
return item.lb == "电脑维护";
});
//筛选 lb = 电脑维护 的数组
data.list = hm;
// 再将数据放入json 数据里 完成筛选css 限制文体显示过长用。。。代替
<style>
.limit-text { /* 限制文件显示长度 */
width: 150px; /* 显示150px文本其余用... */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>
<p class="layadmin-textimg limit-text">
limit-text模板引擎json数据 转入?表格组件json 使用
{
"title": "Layui 常用模块",
"list": [
{
"modname": "弹层",
"alias": "layer",
"site": "layer.domain.com"
},
{
"modname": "表单",
"alias": "form"
}
]
}
转成 表单的就这样
{
"code": 0, // 加入
"msg": "", // 加入
"count": 1000, // 加入
"title": "Layui 常用模块",
"list": [ // "data" 无法加入，到时在 表格js 加 parseData 处理
{
"modname": "弹层",
"alias": "layer",
"site": "layer.domain.com"
},
{
"modname": "表单",
"alias": "form"
}
]
}js代码处理：
table.render({
elem: '#LAY-index-topSearch'
,url: '../../software/softall.json' //模拟接口
,parseData: function(res){
return {
"code": 0, // 解析接口状态
"msg": "", // 解析提示文本
"count": 15, // 解析数据长度
"data": res.list // 解析数据列表
};
}
,page: true用json数据时 table组件分页失败的处理方法?
// table里加入这些代码
,parseData: function(res) { // 将数据解析成 table 组件所规定的数据，res为从url中get到的数据
var result;
console.log(this);
console.log(JSON.stringify(res));
if (this.page.curr) {
result = res.data.slice(this.limit * (this.page.curr - 1), this.limit * this.page
.curr);
} else {
result = res.data.slice(0, this.limit);
}
return {
"code": 0, //解析接口状态
"msg": res.msg, //解析提示文本
"count": res.count, //解析数据长度
"data": result //解析数据列表
};
}
文章来源:https://blog.csdn.net/PieroPc/article/details/135092526
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！