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

移动开发 2024-01-09 03:51:52 阅读次数: 0

全代码：

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

猜你喜欢

转载自blog.csdn.net/PieroPc/article/details/135092526
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
基本数据类型封装类比较 Java源码解读(一) 8种基本类型对应的封装类型
JS实现无缝滚动上
深入解析HashMap原理（基于JDK1.8）
mysql的连接池
关于.htc
linux下的ubuntu12.04图形界面
【数论】好推不好记的扩展欧几里德
设备树详解
cscope + tags 简单设置
xml学习
每日归档
更多
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022