Layui 2.9.2 列表商品展示页用模板引擎 laytpl Ajax 读取json 数据筛选数组 filter css 限制文体显示过长用。。。代替-编程知识

全代码：

<!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 //解析数据列表};}