00:00
我们再来细化我们页面的显示效果,之前这个排序呢们已经做好了,按照价格呢也能排序了,但这一块呢,需要我们回显内容,那我们之前的这个没有跳转的时候,假设我们没有跳转,光写的这个纯GS,我们可以给大家演示出这个效果,确实是没问题的,加上各自的样式,比如我们在这儿都有样式切换,当我们现在要做的就是当我们这个一跳转过去以后,现在页面刷新了,那刷新了以后呢,我们就得重新回选,所以我们这一块的改变样式,这都是如果是AJ请求的话,我们才来有用,所以我们这个样式呢,就这一块作为呢显示效果演示我们就放在这儿,大家知道我们最终要改成什么样的效果,那我们在这一块呢,只保留一个功能,就是我们想要升序还是降序,我们是通过切换它的这个class的,好,我们把这个当前的class切掉,那等真正来到我们这个页。我们切换了这个class以后,我们来看一下咱们这个效果,等我们真正来到这儿,我们比如价格的升降序,我们来到这儿以后呢,我们要进行回显,那回显过来以后呢,我们再次点击它就要改变顺序,所以我们这个回显呢,我们来到页面,我们还是看我们这一块该如何回显,其实这一块回显呢,我们以前的GS样式代码怎么写,这一块回显就怎么写,首先我们来看我们的所有回写。
01:23
所有回响呢,其实就是加一个样式,如果我们当前是按照SQ排序的,我们就拥有这个样式,所以呢,我们需要判断我们当前到底有没有这个排序字段,如果有的话,我们就要判断进行样式的添加,所以大家看我先来写一个这个。首先呢,这有一个th class,好,这是一个我们本身的class,我们可以还再来写一个th class th class呢,我们可以给它加上我们的一些属性,那加哪些属性,主要就是加这个de sc,或者我们的asc,也就asc的情况下,什么都不加。
02:03
所以我们在th class我们可以判断的时候,如果我们排序规则里边有它,而且呢是升降序的,那我们就给来给它回显升降序,否则不回显,那么在回显所有class之前,我们先可以给它回显它的样式,那所有的样式呢,我们全部使用at tr来进行设置,我们以前做过这个at tr,那at tr怎么设置,我来使用Dollar符大括号,那想让它的样式死掉,等于我们指定的值,那等于什么值呢?我们以前用这个TR语法的时候,我们可以来看一下set attribute,在这儿我们可以使用TR某一个属性等于值,这个值呢,我们可以动态取逗号,如果有多个属性,我们都可以这么来做。那我们现在呢,就来这么来写style,我们的样式,样式呢我们来判断,如果说我们的这个排序规则,特别是第一个综合排序,如果我们没有排序规则。
03:00
或者呢,排序规则本身就是综合排序。综合排序我们用的是hot score,我们来给大家看一下hot score,如果呢是这个,那说明呢,我们就是按照默认的综合排序来的,好,我们来点一下这个综合排序吧,默认呢是按照它来的,所以呢,我们现在来判断我们要不要加上这个样式,先来给第一个标签判断,如果我们这个请求参数里边带了排序。那我们怎么能获取这个请求参数,参照SIM文档,我们在这个录里边,在我们第一个录我web里边,我们可以使用power来取出我们的请求参数,比如power某一个东西,我就能取出这个请求参数的值,好,所以呢,我们来加样式,那我就是这么来加,如果说P点一个我们来指定的,现在呢,有一个salt字段,如果我们带了这个salt字段,我说我们这个PAL salt我们是空,也要给它加高量,所以呢,我们先来判断它是不是空。
04:02
我们有两种情况要判断空呢,我们可以利用它的这个附录里边的strength工具类,这个工具类呢,可以有一个叫is empty,好井号strength is empty,判断某一个是空,好我就来写上,如果strength.is empty,如果我们指定的这个东西是空的,就是我们的p sot,如果呢,它是空的,那么这个P呢,就是取出请求参数的值,我们再来确定一下,好,我们这个P,好,如果我们P的这个东西是空的,或者诶我们再来一个,或者或者呢,我们P里边有东西,但是呢,它我们这个P点一个sot,它呢取到的值。是hotco的这个排序相当于它以它开始的,所以我们都可以来算,要给它加上样式,所以呢我们就来pmto,我们现在呢是以hotto开始的,我们现在在这来判断以什么开始,我们string这一块呢,也有我们相关的操作API以什么开始。
05:07
这叫包含以什么开始我们就使用这个,我们使用strength这个API,我们来继续来判断,如果说它是空的,或者呢,它是以我们指定的,就是这个属性para.salt是以我们指定的开始,如果是综合排序,我们指定的呢,就是叫hot score。啊,如果是以这个开始的,那说明我们是综合排序,那我们来写一个三元运算,所以呢,我给它加一个小括号,先给我运算好,我们来先给我进行一个运算。这个运算为正吗?如果为正,我们的样式就等于这一串值,否则就等于另外一串值,那么就来加上这两串值,那如果为蒸,说明我们这个要高亮,高亮呢,我们之前加的效果是这样子的,好,我们把这个高亮效果翻译过来,那么整个高亮效果呢,就是这个CSS,好,我们来翻译过来,我们以前还用过这个样式,比如我们的ttr,我们来给大家看一下我们以前用的这个样式,我们在这设置的时候,那我们可以把整个样式呢,全部以一个字符串的方式,就是这个单个字符串的方式返回给我们就行了。所以我们在这来判断,如果我们要加这个当前高亮样式,那高亮样式呢,就应该是这个color是我们指定的值,叫景333,这是我们高亮样式,好,然后呢,还有我们的borderder color。
06:37
它是我们指定的这个叫井CCC,好,我们拿过来这个井CCC,还有我们的background是这个是井FFF,好,我们的样式呢,高亮就是这样,不对,这是非高亮的,我们叫默认,这是默认,好默认呢就是这样,那高亮呢,那就是下边这个,好我把这个呢复制过来,高亮呢就应该是井FF,我们的颜色拿过来,然后呢,Borderder我们拿过来,叫E4,好我们把这个border拿过来,还有我们的background我们也拿过来,这是我们的高亮,所以我们现在如果满足条件,就应该style样式加上我们这个高亮效果。
07:19
我们继续来看我们的这个标签,好,那现在样式如果判断成功,那就返回这一块,这是我们的高亮样式,把这个单引号去掉,如果是失败,我们就返回非高亮样式,好,我们来继续来找我们的非高亮样式,非高亮样式呢,就是我们这个。非高亮把这个复制过来,在下边默认呢,就是这个井FF的好把这个呢复制过来。好,我们一直呢来找到我们这个TR,好,我们判断如果是高亮,我们把这一块呢,然后放下来,整个呢比较好看,如果是高亮那就是这一段,非高亮那就是这一段。
08:01
好,这是我们按照热度评分来做的,那其他的人也都一样,我们可以用TR来做一个判断,如果这个属性满足我们指定的值,我就把这一块呢直接复制过来。复制过来好,我们这一块呢,直接全部CTRLC,我们来一复制。在这一块我们来写上表达式,那如果是其他人,如果我们是按照我们这个字段,我们这个字段来看一下,这是什么,我们按照呢,如果我们现在是按照销量排序的,那如果是销量排序,那就应该是我们排序规则里边呢有销量字段,我们把这个呢先拿下来,先把样式给它加上。怎么判断有销量字段,那就是我们这个呢,必须不为空。首先我们得带排序规则,并且呢,我们的这个排序规则,它是以我们这个销量开始的cell count,那这就行了,那下边的这个呢也一样。
09:03
我把这个复制过来,这是价格字段,我把这个整个TR复制过来。好,我们来CTRLC,因为我们所有的样式要怎么加,我们全部要根据我们的跳转来页面以后,我们之前的这个请求参数还是一样,如果是价格,我们首先呢,排序字段不能为空,为空就应该是综合默认排序,并且呢,它是以我们指定的这个叫SQ price开始的,好这样一改CTRLF9来刷新一下,我来在这来我们来刷新来看页面效果,我们发现呢,这没有展示出来数据,那肯定就是我们这个模板渲染有问题了,那可以来控制台看一下,来看一下我们这个模板渲染的问题,好,我们这个渲染模板解析我们这个表达式的时候可能有问题,那这肯定是我们这个什么spel表达式有问题,主要这个表达式就是解析我们这个什么string。
10:01
Is empty在这来计算的时候,我们来一直往下边看错误的这个原因,下面这有一个错误原因,说access to variable在访问我们这个变量PAR的时候,就说我们要取请求参数的这个值,说是一个forbiden拒绝的,他我们这个我们可以来看一下它的完整原因,说for example,比如我们这个直接访问我们请求参数是拒绝的,在我们这种,诶他这说暂无这种不转译的表达式下,我们来直接处理是有问题的,说我们可以使用test文档模板模式来处理这个,所以这一块呢。处理起来就比较复杂了,我们这个原声表达式不能用,不能用呢,两种办法,他说你用SIM雷的test模式,包括要写它的整个其他文档表达式,这样都太麻烦。我来给大家说上一个,我在它的三个A标签的副标签里边,我来用一个,这个叫TH位,这个位子呢,它的作用就是来声明变量的,我让某一个变量,比如S,我们就叫P吧,等于我们指定的值,值是什么呢?我来取出Dollar符大括号,我来取出p.salt比如说我把真正的请求参数我取出来赋值给一个变量。
11:19
然后呢,接下来我们让它判断这个变量,凡是p sortt,好们来CTRLR,我们来替换一下,我们把它呢,全部替换成我们指定的这个P值,Replace or,好,那这一块呢,就是。第二一个sortt,我现在呢,这么来做了一下,就说我把这个值取出来给它声明成了一个变量,这个叫变量P,然后呢,这个变量P接下来这一块呢,没有替换好的,我们把这些P,我们就来判断这个我们来指定的这个值,它有没有以什么开始等等之类的,好我们把这一块呢都来写上,那现在来看一下我们的整个效果,我来CTRLF9来重新让页面编译一下,我们主要呢,将请求参数声明为一个P变量,以后呢,我们来判断使用P变量,好我们来再来刷新走来我们刷新,现在我们发现这一块的效果呢就好了,我们点价格,那就是按价格,我点销量,那我们这一块呢,就是销量高量,我点这个综合排序,那就是综合排序,那比如我们在这儿销量高亮了以后,我们不要排序条件了,不要调排序条件,默认呢,就是综合排序,诶我们这一块呢,就是亮的,那么这一块颜色有了下,我们再来看效果。
12:34
我们点销量以后呢,默认是de sc,那再来点一下应该变成asc。那么这一块的功能要怎么做,我们这么来考虑,我们这个销量也好,价格也好,他们升序还是降序,我们按照如果以前我们的这个样式来,我们主要呢,是给它加一个class,这个DEC什么的来看下边我们之前写的这个代码,主要是来判断它的,而我们写的这一块GS代码去来tango这个class,当页面一刷新以后,它呢就会变。
13:07
所以呢,我们这一块class到底是什么,我们先来给他回显过来,来右键检查元素来看现在这一块class呢。总是没有值,如果我们这有decc,那么就要把这个值给它加上来,如果没有就不加,所以我们先来回显我们这个class,那回显这个class,我们还是回到我们最上边CTRLF,我们来搜一下我们这个PM sot声明的这个地方,我们来回到这,现在呢,我们这个class,我们现在还要给它来动态添上,那怎么填,我们可以调用一个办法叫TH。有一个叫class,它的这个class属性,它原声呢是这个,我们现在就要看这个P变量是包含什么东西,所以呢,我们继续来写我们这个表达式,判断井号大括号。如果说我们这个P变量不为空,它能真正的取出值,我们来判断一下这个东西不为空,我们才有意义给他做这个事儿,好,如果它不为空,并且呢,我们来做一个并且,并且呢,我们取出的这个P变量,它呢是N的位置,我们肯定呢有一个字符串的判断方法叫N的位置,我们就来用string s来判断p string里边呢,它是N的位置,N的位置什么呢?我们这个目标对象就是我们来判断P,如果呢,它是以我们这个。
14:29
指定的,比如DEC结尾的,那说明我们后边的这个条件呢,会有一个DEC,那我们就给class加上DEC,否则就不加,所以我们完整的class返回值我在这一块就不写了,我们用TH判断那完整的返回值,它们两个判断是成功吗?我们把拿小括号把它们包起来,好,它们两个呢是一个整体判断,如果它们两个判断成功来问号,如果它们两个判断成功们class值就是原来的sortt a加上DEC,相当于我们条件上有decc,否则呢,那就是我们原本的sortt a就是这个只有这个class,那我们把整个class的回线我也复制过来,这是class的回线,那么原来的这个class呢,我们就可以不用了,好,我们把这个class干掉,那们在这来回显我们的class,我们class呢,是按照这样回显的,包括我们这一块也一样,Class来这样回显。
15:30
嗯。CTRLF9,好,我们现在来确认一下我们整个页面效果,我们来在这儿来进行一个刷新,好,我们先来刷新,我们现在来看销量,诶回显了我们这个DEC,当然发现每一个位置都回显了这个DEC,其实呢,它应该只回显自己的,所以呢,所有的前提判断都应该是自己的,来再来加一个判断。如果我们当前是自己的属性,所以呢,我们把这个判断再来加上,这是判断是不是自个属性,它P不等于空,并且呢,我们是自个儿属性,自个儿属性呢,综合排序就是以它开始的,然后呢,每一个人都加上判断是自个儿的属性,比如说呢,以自个儿的这个start with,我们把这个复制过来,每一个判断都来多加一个,这个在生成class的时候。
16:21
还有下边这个start位置,我来复制过来。要不然呢,所有人都加上了哈,我们在这儿来加上。CTRLF9,我们现在来看一下我们页面的效果来进行刷新,们自己呢只加自己的,诶其他人不加没问题,那销量现在变了,然后呢,我再来切一下点,哎我发现呢,变成了asc,我再来切一下点,变成了de sc,那就没问题,原因就是我们在这呢进行了我们回显,那一回显以后,我们接下来点击这个链接要切换的时候,那下边的G就是这么来写的,比如原来是de sc,原来的位置呢是de sc,然后呢,它一切换把de sc删掉了,删掉了它相当于拼了asc的字符串,然后呢,它就下次的这个跳转排序就是asc了,Asc在这一回显又没有了,又没有呢,他再点一下想要跳转调用我们的G方法没有呢,我们又加上,加上呢,我们又相当于条件里边又有它,只要我们在这儿能回旋过来,我们的整个跳转就是OK的,但我们这个跳转虽然是OK的,我们还是给它。
17:31
这个加上上下箭头代表我们到底是升序还是降序,那这一块呢,看起来都挺好,那么升降序呢,就来加上这个箭头,我们来在每一个这个标签上好salt a来找一下每一个这个A标签上,我们这个综合排序,那这一块呢,还要取出上下箭头,这个上下箭头呢,我们也得判断好双中括号,我们行内的写法就是双中括号刀了幅大括号,我们以前呢有一个P值。如果这个P值是降序,我们就要加那个字符串,所以呢,我们还是判断,如果这个P值是N的位置,我们这个降序走。
18:10
来判断,如果这个P值是N的位置降序,它是位置降序吗?如果是位置降序,我们就给它拼一个下减头,好,我们来整一个下,否则呢,我们就来给它整一个上五,我们这个箭头加上当我们要做这个判断的所有前提都是我们肯定得有这个排序,而且是当前自个儿的,所以呢,我们把这个是当前自个儿的要设置的整个完整项我全复制过来,这个小括号的三元判断,CTRLC,每一个人都这么来做,把这个三元判断放在这。如果是自个儿的,那就这么来做,把这个行内的写法我来复制过来,一直复制到这好,这是综合排序,还有销量,还有我们的价格,但是呢,每一个人都要判断自个儿,那我们就把他自个儿的这个判断拿过来,好,我来复制完整的这个小括号判断,一直复制到它后边P2个双括号,这是我们销量的,我们销量的呢,我们就把销量的这一换,我们一直复制到后边去掉,好,我们来加上我们新的这个判断,我们之前这个判断呢,好像少了一个小括号,大家一定要小心注意,我们每一个判断自个都加一个小括号,最终构成一个完整判断,那下边呢也一样,好,我们把这个呢复制过来,每一个自个儿的判断我们拿过来,好,我来把整个它自个儿的判断。
19:38
我们来复制过来。这是一个问号结束,好,我们把这个资格的判断也拿过来,把这个问号删掉来结束,好像之前的先把呢也是错的,我们是前一个括号,后两个括号,好我们就前保留一个,后保留两个。后保留两个,前保留一个CTRLF9来看我们最终的效果来刷新好这块页面呢,我们这个括号可能处理的有问题,我在这看一下那最终的这一块的结果,那么这个双中括号里边。
20:13
我们肯定还是一个表达式,所有东西呢,都得以Dollar符大括号开始,然后呢,以这个结束,好我们在后边,好这有一个大括号确实没问题,那我们这一块呢,也一样,它都缺了一个Dollar符大括号。前缀好我们do幅大括号,前缀好CTRLF9来重新让它编译一下,来测试刷新,好现在呢,我们看到了这个效果,销量我来减,来我们这是下降,再来上这是上升,当我们发现默认我们没选的东西,它都有个上减头,所以呢大家在这判断的时候再来加上,如果是自个了想有这个decc了,那就是下箭头,那要不要是这个上下箭头,还得判断我们到底有没有传这个条件,所以大家把这个细化呢,可以再来做一下,所以如果真的为空了,我们这个条件都不传了,所以上下箭头可能都不平了,所以这一块呢,大家来处理一下就行了,好,那么现在的效果呢就出来了,好,销量这上下都能动,那么下一节课给大家再来加上我们整个价格区间,以及仅显示有货的筛选,那么就整个这一块就做完了。
我来说两句