layui

基于复杂结构的自定义模版相关介绍

我这里的接口给的格式数据
在这里插入图片描述

我这里搜索往返时候要显示成这样的
在这里插入图片描述

layui.use(['table','form'], function(){  var table = layui.table;  var form = layui.form;// 渲染表格  table.render({  elem: '#test-table-reload',toolbar: '#toolbarDemo',  data:jsonData[0].airwheretolists,cols: [  // 定义列的配置  [  {field: 'flightInfo', title: '航司信息', templet: '#flightInfoTpl', align: 'center'},{field: 'fromSegments', title: '出发时间', templet: '#flightInfoTpl1',sort:true, align: 'center'},{field: 'fromSegments.timeDif', title: '用时', templet: '#flightInfoTpl2',sort:true, align: 'center'},{field: 'arrTime', title: '达到时间', templet: '#flightInfoTpl4', align: 'center'},{field: 'adultPrice', title: '价格', templet: '#flightInfoTpl3',sort:true, align: 'center'},{field:'button', title:'操作', templet: '#buttonTpl', align: 'center'}]  ],done: function(res, curr, count){  // 在这里执行渲染完成后的操作  console.log('渲染完成');  // $("td[data-field='0']").css("display", "none");  // $(".layui-table-tool-self").css("display","none");// $(".layui-table-header").css('display',"none");$('tr[data-index]').each(function() {  // 获取 data-index 的值  var index = $(this).data('index');  if(index % 2 == 0){$(this).css('background-color','#f8f8f8');}});$('tr[data-index="myself"]:even').find('td.dashedTd_rt').each(function() {  $(this).css('border-bottom','1px dashed #ccc'); });if(tripType == 'ow'){$(".layui-table-body .layui-table-cell").css('height','108px');}else{$(".layui-table-body .layui-table-cell").css('height','210px');}$(".layui-table-cell table").css('width','100%');// 监听排序事件table.on('sort(user)', function (obj) {var field = obj.field; // 排序字段var data = res.data; // 当前排序的数据console.log(obj);console.log(obj.type);// 获取表格数据var tableData = layui.table.cache['test-table-reload'];// 对 fromMesage 中的 flightNumber 进行排序if (field === 'fromSegments') {tableData.sort(function (a, b) {var dateA = new Date(a.fromSegments[0].depTime).getTime();var dateB = new Date(b.fromSegments[0].depTime).getTime();if (obj.type === 'asc') {return dateA - dateB; // 升序排列} else if (obj.type === 'desc') {return dateB - dateA; // 降序排列} else {return 0; // 默认情况}});}else if(field === 'fromSegments.timeDif'){tableData.sort(function (a, b){if(a.retSegments != null){}var ass = a.fromSegments[0].timeDif.TotalMilliseconds;if (obj.type === 'asc') {return a.fromSegments[0].timeDif.TotalMilliseconds - b.fromSegments[0].timeDif.TotalMilliseconds; // 升序排列} else if (obj.type === 'desc') {return b.fromSegments[0].timeDif.TotalMillisecondss - a.fromSegments[0].timeDif.TotalMilliseconds; // 降序排列} else {return 0; // 默认情况}})}// 渲染表格var jsonDatas = [{'airwheretolists':tableData}];renderTable(jsonDatas,tripType);});  }  });});  
	<script type="text/html" id="flightInfoTpl"><table style="width: 100%;">{{# layui.each(d.fromSegments, function(index, item){ }}<tr><td class="dashedTd_rt"><p class="aviation_name">{{ item.companyName }}</p><div class="flightNo">{{ item.flightNumber }}</div></td></tr>{{# }); }}{{# layui.each(d.retSegments, function(index, item){ }}<tr><td class="dashedTd_rt"><p class="aviation_name">{{ item.companyName }}</p><div class="flightNo">{{ item.flightNumber }}</div></td></tr>{{# }); }}</table>
</script>
<script type="text/html" id="flightInfoTpl1"><table style="width: 100%;">{{# layui.each(d.fromSegments, function(index, item){ }}<tr><td class="dashedTd_rt"><p class='takeoff_time'>{{ item.depTime }}</p><span class='departure_code'>{{ item.depAirport }}</span><span class='departure_name'>{{ item.derairportname }}</span></td></tr>{{# }); }}{{# layui.each(d.retSegments, function(index, item){ }}<tr><td class="dashedTd_rt"><p class='takeoff_time'>{{ item.depTime }}</p><span class='departure_code'>{{ item.depAirport }}</span><span class='departure_name'>{{ item.derairportname }}</span></td></tr>{{# }); }}</table>
</script>
<script type="text/html" id="flightInfoTpl2"><table style="width: 100%;">{{# layui.each(d.fromSegments, function(index, item){ }}<tr><td class="dashedTd_rt"><div class="type">直飞</div><img src="../../res/style/imgs/ticket.png" alt="" class="UI_list_icon_con"><div class="time_use">{{ item.timeDif.Hours }}h{{ item.timeDif.Minutes }}m</div></td></tr>{{# }); }}{{# layui.each(d.retSegments, function(index, item){ }}<tr><td class="dashedTd_rt"><div class="type">直飞</div><img src="../../res/style/imgs/ticket.png" alt="" class="UI_list_icon_con"><div class="time_use">{{ item.timeDif.Hours }}h{{ item.timeDif.Minutes }}m</div></td></tr>{{# }); }}</table>
</script>
<script type="text/html" id="flightInfoTpl4"><table style="width: 100%;">{{# layui.each(d.fromSegments, function(index, item){ }}<tr><td class="dashedTd_rt"><p class='takeoff_time'>{{ item.arrTime }}</p><span class='departure_code'>{{ item.arrAirport }}</span><span class='departure_name'>{{ item.arrairportname }}</span></td></tr>{{# }); }}{{# layui.each(d.retSegments, function(index, item){ }}<tr><td class="dashedTd_rt"><p class='takeoff_time'>{{ item.arrTime }}</p><span class='departure_code'>{{ item.arrAirport }}</span><span class='departure_name'>{{ item.arrairportname }}</span></td></tr>{{# }); }}</table>
</script>
<script type="text/html" id="flightInfoTpl3"><table style="width: 100%;" class="flightInfoTpl3">{{# layui.each(d.fromSegments, function(index, item){ }}<tr><td class="priceL" rowspan="2">CNY {{ d.adultPrice }}</td><!-- <td rowspan="2"><button class="layui-btn" id="reserveBtn">预定</button></td> --></tr>{{# }); }}</table>
</script>
<script type="text/html" id="buttonTpl"><table style="width: 100%;height: 100%;" ><tr><td rowspan="2"><button class="layui-btn" id="reserveBtn">预定</button></td></tr></table>
</script>

渲染和排序主要代码部分以上大概贴出来了

table 部分


注意此处lay-filter=“user” table.on(‘sort(user)’, 这里要对应
我 这里犹豫想让一组往返数据显示在一个tr里面所以我在tr里又组装了一个表格 两行的
在这里插入图片描述
2 筛选这块

function eachcheckbox(datas) {console.log('eachcheckbox'+datas);var div = document.getElementById("toolbarDemo");div.innerHTML = "";var result = "";var dateta = [];var data = datas[0].airwheretolists;for (var i = 0; i < data.length; i++) {if (dateta == null || dateta == [] || dateta.indexOf(data[i].ticketingAirline) == -1) {dateta.push(data[i].ticketingAirline);}}$.each(dateta, function (index, item) {result += '<input lay-filter="switchSap" checked="checked" type="checkbox" lay-skin="primary" name="labelType"  value="' + item + '" title="' + item + '" id="' + item + '">';});result += "";document.getElementById("toolbarDemo").innerHTML = result;}

监听下 操作复选框的事件form.on('checkbox(switchSap)', function (data) { var arr = []; var tripType = $("input[name='type']:checked").val();// 单程 往返 $('input[name=labelType]:checked').each(function () { arr.push($(this).val()); }); operateCheckData(arr, jsonData,tripType); });

//执行筛选数据 以及更新筛选框选中状态function operateCheckData(data, jsonData,tripType) {console.log(data);console.log(jsonData);if (data != null && data != undefined && data.length > 0) {var dataArr = [];for (var i = 0; i < jsonData[0].airwheretolists.length; i++) {if (data.indexOf(jsonData[0].airwheretolists[i].ticketingAirline) != -1) {dataArr.push(jsonData[0].airwheretolists[i]);}}var jsonDatas = [{'airwheretolists':dataArr}];} else {var jsonDatas = [{'airwheretolists':[]}];}eachcheckbox2(data);renderTable(jsonDatas,tripType);}
 function eachcheckbox2(arrid) {var div = document.getElementById("toolbarDemo");var dateta=[];// 获取所有输入元素  $('.layui-table-tool-temp input').each(function () {dateta.push($(this).val());});div.innerHTML = "";var result = "";// for (var i = 0; i < data.length; i++) {//     if (dateta == null || dateta == [] || dateta.indexOf(data[i].carrier) == -1) {//         dateta.push(data[i].carrier);//     }// }console.log(dateta);console.log(arrid);$.each(dateta, function (index, item) {if (arrid.includes(item)) {var chedk = 'checked="checked"';result += '<input lay-filter="switchSap" ' + chedk + ' type="checkbox" lay-skin="primary" name="labelType"  value="' + item + '" title="' + item + '" id="' + item + '">';} else {result += '<input lay-filter="switchSap" type="checkbox" lay-skin="primary" name="labelType"  value="' + item + '" title="' + item + '" id="' + item + '">';}});result += "";console.log(result);document.getElementById("toolbarDemo").innerHTML = result;}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/451869.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

2023年全球软件架构师峰会(ArchSummit上海站):核心内容与学习收获(附大会核心PPT下载)

微服务架构是当今软件架构的主流趋势之一。随着云计算和分布式系统的普及&#xff0c;越来越多的企业开始采用微服务架构来构建他们的应用。微服务架构可以将一个大型的应用拆分成多个小型的服务&#xff0c;每个服务都独立部署、独立运行&#xff0c;并通过轻量级的通信协议进…

如何使用第三方API采集电商数据呢?

电商商家最常唠叨的就是店铺运营难做。每日多平台店铺数据统计汇总繁琐耗时&#xff0c;人工效率偏低&#xff0c;且工作内容有限。 特别是眼下“618&#xff0c;双十一&#xff0c;双十二&#xff0c;年底大促”将至&#xff0c;如何提高运营的效率和质量、保证产品及服务的良…

cesium-水平测距

cesium测量两点间的距离 <template><div id"cesiumContainer" style"height: 100vh;"></div><div id"toolbar" style"position: fixed;top:20px;left:220px;"><el-breadcrumb><el-breadcrumb-item&…

【数位dp】【动态规划】【KMP】1397. 找到所有好字符串

作者推荐 【动态规划】【字符串】【表达式】2019. 解出数学表达式的学生分数 本文涉及知识点 动态规划汇总 LeetCode1397. 找到所有好字符串 给你两个长度为 n 的字符串 s1 和 s2 &#xff0c;以及一个字符串 evil 。请你返回 好字符串 的数目。 好字符串 的定义为&#x…

用通俗易懂的方式讲解:12 个大模型 RAG 痛点及解决方案

受 Barnett 等人的论文《工程检索增强生成系统时的七个失败点》启发&#xff0c;让我们在本文中探讨论文中提到的七个失败点以及开发 RAG 管道时的五个常见痛点。 论文&#xff1a;https://arxiv.org/pdf/2401.05856.pdf 更重要的是&#xff0c;我们将深入探讨这些 RAG 痛点的…

【SpringBoot】模板设计模式应用

一、前言 常见的设计模式有23种&#xff0c;我们不得不提到模板方法设计模式&#xff0c;这是一种在软件开发中广泛使用的行为型设计模式之一。 二、模板方式是什么 全称是模板方法设计模式。 模板模式是一种行为设计模式。它的实现思路是&#xff0c;创建一个 模板方法 me…

转化率翻倍秘诀:打造私域标签体系的终极指南!

如今&#xff0c;私域运营逐渐成为企业标配甚至刚需。 但是大部分企业做私域只是从众&#xff0c;很少能真正想清楚做私域的目标和价值。要么是砸重金搭建团队&#xff0c;但是没有运营重心&#xff0c;最后转化效果很差&#xff1b;要么就是不太重视&#xff0c;人力精力投入…

老师没收学生东西违法吗怎么处理

身为一名老师&#xff0c;面对没收学生东西这个话题&#xff0c;确实让人感到有些尴尬和无奈。毕竟&#xff0c;我们教育的初衷是为了引导学生健康成长&#xff0c;而不是与他们产生矛盾和冲突。 老师在未经允许的情况下没收学生的物品&#xff0c;是违法的。学生的个人财物&a…

用友NC getFileLocal 任意文件下载

【产品介绍】 用友NC以“全球化集团管控、行业化解决方案、全程化电子商务、平台化应用集成”的管理业务理念而设计&#xff0c;采用J2EE架构和先进开放的集团级开发平台UAP&#xff0c;形成了集团管控8大领域15大行业68个细分行业的解决方案。 【漏洞介绍】 用友NC getFile…

品牌软文怎么写?纯干货

企业投放品牌软文到知名的媒体平台上&#xff0c;可以起到潜移默化的效果&#xff0c;提升产品或是品牌的知名度或是曝光度&#xff0c;品牌软文怎么写&#xff0c;有什么实用的技巧&#xff0c;今天伯乐网络传媒就来给大家分享品牌软文塑造攻略&#xff0c;教你轻松打动用户的…

计算机网络_1.6.1 常见的三种计算机网络体系结构

1.6.1 常见的三种计算机网络体系结构 1、OSI&#xff08;七层协议&#xff09;标准失败的原因2、TCP/IP参考模型3、三种网络体系结构对比 笔记来源&#xff1a; B站 《深入浅出计算机网络》课程 1、OSI&#xff08;七层协议&#xff09;标准失败的原因 &#xff08;1&#xf…