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