采集网站seo,两个 wordpress 合并,网站搭建服务器需要多少钱,怎么用自助网站基于复杂结构的自定义模版相关介绍
我这里的接口给的格式数据
我这里搜索往返时候要显示成这样的
layui.use([table,form], function(){ var table layui.table; var form layui.form;// 渲染表格 table.render({ elem: #test-table-reload,toolbar: #toolbarDemo, …基于复杂结构的自定义模版相关介绍
我这里的接口给的格式数据
我这里搜索往返时候要显示成这样的
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-field0]).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-indexmyself]: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 typetext/html idflightInfoTpltable stylewidth: 100%;{{# layui.each(d.fromSegments, function(index, item){ }}trtd classdashedTd_rtp classaviation_name{{ item.companyName }}/pdiv classflightNo{{ item.flightNumber }}/div/td/tr{{# }); }}{{# layui.each(d.retSegments, function(index, item){ }}trtd classdashedTd_rtp classaviation_name{{ item.companyName }}/pdiv classflightNo{{ item.flightNumber }}/div/td/tr{{# }); }}/table
/script
script typetext/html idflightInfoTpl1table stylewidth: 100%;{{# layui.each(d.fromSegments, function(index, item){ }}trtd classdashedTd_rtp classtakeoff_time{{ item.depTime }}/pspan classdeparture_code{{ item.depAirport }}/spanspan classdeparture_name{{ item.derairportname }}/span/td/tr{{# }); }}{{# layui.each(d.retSegments, function(index, item){ }}trtd classdashedTd_rtp classtakeoff_time{{ item.depTime }}/pspan classdeparture_code{{ item.depAirport }}/spanspan classdeparture_name{{ item.derairportname }}/span/td/tr{{# }); }}/table
/script
script typetext/html idflightInfoTpl2table stylewidth: 100%;{{# layui.each(d.fromSegments, function(index, item){ }}trtd classdashedTd_rtdiv classtype直飞/divimg src../../res/style/imgs/ticket.png alt classUI_list_icon_condiv classtime_use{{ item.timeDif.Hours }}h{{ item.timeDif.Minutes }}m/div/td/tr{{# }); }}{{# layui.each(d.retSegments, function(index, item){ }}trtd classdashedTd_rtdiv classtype直飞/divimg src../../res/style/imgs/ticket.png alt classUI_list_icon_condiv classtime_use{{ item.timeDif.Hours }}h{{ item.timeDif.Minutes }}m/div/td/tr{{# }); }}/table
/script
script typetext/html idflightInfoTpl4table stylewidth: 100%;{{# layui.each(d.fromSegments, function(index, item){ }}trtd classdashedTd_rtp classtakeoff_time{{ item.arrTime }}/pspan classdeparture_code{{ item.arrAirport }}/spanspan classdeparture_name{{ item.arrairportname }}/span/td/tr{{# }); }}{{# layui.each(d.retSegments, function(index, item){ }}trtd classdashedTd_rtp classtakeoff_time{{ item.arrTime }}/pspan classdeparture_code{{ item.arrAirport }}/spanspan classdeparture_name{{ item.arrairportname }}/span/td/tr{{# }); }}/table
/script
script typetext/html idflightInfoTpl3table stylewidth: 100%; classflightInfoTpl3{{# layui.each(d.fromSegments, function(index, item){ }}trtd classpriceL rowspan2CNY {{ d.adultPrice }}/td!-- td rowspan2button classlayui-btn idreserveBtn预定/button/td --/tr{{# }); }}/table
/script
script typetext/html idbuttonTpltable stylewidth: 100%;height: 100%; trtd rowspan2button classlayui-btn idreserveBtn预定/button/td/tr/table
/script渲染和排序主要代码部分以上大概贴出来了
table 部分 注意此处lay-filter“user” table.on(‘sort(user)’, 这里要对应 我 这里犹豫想让一组往返数据显示在一个tr里面所以我在tr里又组装了一个表格 两行的 2 筛选这块 function eachcheckbox(datas) {console.log(eachcheckboxdatas);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-filterswitchSap checkedchecked typecheckbox lay-skinprimary namelabelType value item title item id item ;});result ;document.getElementById(toolbarDemo).innerHTML result;}监听下 操作复选框的事件form.on(checkbox(switchSap), function (data) { var arr []; var tripType $(input[nametype]:checked).val();// 单程 往返 $(input[namelabelType]: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 checkedchecked;result input lay-filterswitchSap chedk typecheckbox lay-skinprimary namelabelType value item title item id item ;} else {result input lay-filterswitchSap typecheckbox lay-skinprimary namelabelType value item title item id item ;}});result ;console.log(result);document.getElementById(toolbarDemo).innerHTML result;}
