本节课我们继续研发这个 并发的自研报告模板:
目前:
然后我们今天开发下面的那个模块:详情部分
这部分我准备用bootstarp的表格来展示比较好。
所以先要引入:
而这个dom层的 表格table。我写的可能稍微复杂一些,大家理解不了的可以加v :qingwanjianhua 进群咨询
用的dom层的双重循环。
效果如下:(后续我们会美化)
然后就是步骤的详情了。这个包含请求数据,返回体,断言结果,不可能直接这么展示出来。
所以我们最好做个点击事件-弹层来表示。
效果如下:
然后是这个按钮的点击事件:
注意,点击事件中传入了step.id,这样可以让detail函数清楚自己要展示的是哪个step的数据。
不过这里我们又遇到了一个问题,就是数据从何而来?
我们之前的确在进入页面的时候带上了我们辛苦存放的数据,但是那些是给dom层用的,我们现在要使用的是bom层中。
所以我们还是有俩种方案,一种是带着这个step_id 去后台通过接口拿数据来展示。
另一种是想办法把一开始带过来的数据通过某种方式放在bom层可用。
具体选哪种我们下节课再说....
本节课我们先来把这个弹层做出来...
弹层默认是隐藏的,点击后展示,并且填充数据(当然现在还没写这步骤)
测试下效果:
当然这个页面确实挺难看....
不过我们后续会优化的哦~
本节到此结束,欢迎收看:测试开发干货