Vue.js
html部分: <div region="center" border="false" title="2.选择时间段"> <div class="Chart" id="chartContainer"> <div class="icon"> <span class="gray"></span>未开放<span class="green"></span>已预约<span class="blue"></span>可预约</div> <div class="content"> <div class="date" id="yData"> <dl v-for="ymd in YMDArr"> <dt>{{ ymd.YMD }}</dt> <dd> {{ ymd.WeekName }} </dd> </dl> </div> <div class="echart"> <div class="echart_block" id="xData"> <div class="tu" v-for="ymd in YMDArr"> <ul> <li v-bind:title="sjd.BeginHHmm+'-'+sjd.EndHHmm" v-bind:class="[sjd.State=='0'?'gray':sjd.State=='1'?'blue':'green']" v-bind:style="{'width':Math.ceil((sjd.Interval/$('#xData').width())*100)+'%'}" v-bind:tt="sjd.Begin" v-on:click="yuYue($event);" v-for="sjd in ymd.SJDArr">{{ sjd.BeginHHmm + '-' + sjd.EndHHmm }} </li> </ul> </div> </div> </div> <div class="clear"> </div> </div> </div> </div>
js部分:
$.ajax({ type: "POST", dataType: "json", url: "", data: { ShiYanShiID: shiYanShiNode.id, ZuoWeiID: zuoWeiNode.id, KaiShiRiQi: $("#KaiShiRiQi").val(), JieShuRiQi: $("#JieShuRiQi").val() }, async: false, success: function (json) { var yDataApp = new Vue({ el: '#yData', data: { YMDArr: json.YMDArr } }); var xDataApp = new Vue({ el: '#xData', data: { YMDArr: json.YMDArr, interval: json.Interval, }, methods: { yuYue: function (e) { var obj = e.currentTarget; // 测试 alert($(obj).attr("tt")); } } }); var timeDataApp = new Vue({ el: '#timeData', data: { data: json.XData } }); }, error: function (XMLHttpRequest) { AlertError(XMLHttpRequest); } });
· 大数据高并发核心场景实战,数据持久化之冷热分离
· 运维排查 | SaltStack 远程命令执行中文乱码问题
· Java线程池详解:高效并发编程的核心利器
· 从“看懂世界”到“改造世界”:AI发展的四个阶段你了解了吗?
· 协程本质是函数加状态机——零基础深入浅出 C++20 协程
· 基于.net6的一款开源的低代码、权限、工作流、动态接口平台
· 一个自认为理想主义者的程序员,写了5年公众号、博客的初衷
· Claude Code 初体验 - Windows
· LinqPad:C#代码测试学习一品神器
· .NET 8 gRPC 实现高效100G大文件断点续传工具