1.页面数据不要乱用js(ajax)渲染,华哥说如果用js渲染的话,就不能用爬虫爬数据了.然后我就要开始把前人写的ajax代码全部去掉.重新做.
2.这次由于需求,几乎是重写了前端这两个页面的js代码,进一步的熟练js代码和一些jquery函数的使用.了.
如:change,bind,on,
trigger触发绑定的事件.
find和parents查询层级关系的其他元素.
3.页面数据的读取,除了四个下拉列表框用ajax异步获取,其他数据都是用jsp配合EL表达式来渲染数据.
进入页面的时候发起ajax初始化下拉列表里的数据,同时后台也读取那些选择条件的数据以及列表数据返回到前台.
4.学会了如何回显数据,也就是在页面上选择了某些查询条件.然后带到服务器上,查询完成后返回页面的时候还要在页面上重新显示那些查询数据.
他们回显数据思路是这样的:
先在后台专门写一个form,里面封装了有关于这个页面上的所有查询条件.由于页面上的数据是用jsp做渲染的,所以不再异步查询,而是直接用a标签去查询.对于那些不是下拉框的数据,直接全都平铺出来的那种很好处理吗,可以加a标签,但是下拉框不行,所以就还是要在js里面做处理.稍微麻烦点.
回到话题.其实具体可以看页面上的代码.
所属行业：
可以看出来,先设置了一个变量,写好了一个链接,这个链接呢,特点就在于除了不写行业代码参数,其他的都要加上去,然后在下面循环打印的时候,在为每个标签添加上行业查询条件代码.
然后其他的查询条件也是类似这样写.然后每次把查询条件传到后台,进行查询后,还要继续把这些查询条件带回来,这样,就每次再去查询的时候又会带上之前选过的查询条件.真是神来之笔啊,新技能get!
5.两个下拉列表框之间有级联关系时候的js处理.
一个总体的思路是这样的,拿那个设备分类的说.设备一级分类和设备二级分类.这种级联在前台js里面做的.
具体思路:
1.声明一个(或者冗余一下,声明两个)来存放读取到的数据.
2.给这两个下拉列表框绑定两个函数,一个函数(getList)用来获取存放数据的list列表,一个(initOption)是用来初始化下拉框里的选项的函数,.
3.需要有一个函数做异步查询的,并且查询成功后把数据存放到声明的list中.
4.还需要写一个查询数据成功后的处理函数,在查询成功后触发一下initOption事件.
注意:在调用完设备一级分类的initOption后就要激活一下第二个设备分类的getList事件,获取地二个下拉框的数据.就是说根据一级设备选中的值,以这个值为查询条件去拉取第二个下拉框的数据.
具体情况可以看代码.
6.由于页面中的下拉框不是用select,用了li标签,所以要模拟出select的change事件.
刚开始没有思路,后来在网上查了之后,原来自定义事件原理挺简单的,就是去模拟出这样的事件.借助两个函数,一个bing,一个trigger,bind用来绑定我自定义的事件,trigger则是用来激活我绑定的事件的.
也就是说,我把li标签当作option,ol呢就当作select,然后我的li是可以接受click事件的,于是我为li绑定了一个自定义的事件叫change来模拟change.
$("#search-kind1,#search-kind2").bind("change",function(){
//这个函数用来发起请求,进行页面刷新的
assetSupplyList.getPage();
});
然后呢,我在他的click事件里激活这个绑定的事件就达到了目的,也就是当我点击里面的数据,就触发我的change事件.
//绑定设备一级分类下拉框change和click事件响应
$("#search-kind1").find("li").on("click",function(){
var txt = $(this).find("a").text();
var id = $(this).attr("data-id");
$("#shebei1").find("b").attr("data-id",id);
$("#shebei1").find("b").text(txt);
//触发自定义change事件
$("#search-kind1").trigger("change");
})
7.在数据回显的时候,页面进入死循环的问题,是由于不懂页面的执行机制问题.
异步获取下拉框里的数据,注意异步获取的机制,在这个地方异步获取数据并不是说就等他获取完才继续执行下面的,异步异步顾名思义,所以,异步去后台拉取数据的时候,程序接着往下执行,这才会出现之前我对页面运行机制的不了解导致的各种问题,比如出现了死循环的问题,还有一个数据没有拉取出来的问题.
所以我之前写的代码是在getDom()结束后,调用tabInit函数回显各种查询条件,思路是这样的,结果我不知道运行机制的问题,所以就出现了死活回显不了那两个省市下拉框的数据,原因就在于一开始调用getDom先去查询了设备分类的数据,这个时候是成功查出来了,但是在查的过程中呢,程序继续往下执行,很不巧,虽然可能这个时候已经发请求去查询省市数据,但是程序已经执行到了tabInit里面,查询的数据却还没有及时返回过来,所以回显肯定是失败的,因为根本就还没有数据.
所以一种解决思路就是在完全拉取完数据的时候再去做回显的工作,就像我的代码里写的那样.在拉取完数据做下拉框的初始化完的时候,再去做数据回显就肯定没有问题了.
同样的一个问题是那个省市下拉框的点击事件死活没有响应的问题,只有一个已经早就写在页面的"全部"选项点了才有反映,其他从后台读的选项点击了完全没有反映.
我是把那些点击事件的函数直接就写在了init里面去了.所以问题就出现在,同样我的异步函数还没有完全拉取完数据就去执行这些事件函数,结果发现只有一个选项,于是为这个选项绑定事件,其他数据因为还在来的路上,等到来了之后函数早就执行到别的地方了,所以问题的解决同样也是把事件响应写到了拉取数据完成后.具体可以看代码,那些原先事件绑定函数已经被我注释掉了.
8.页面查询数据封装到一个form类里面去了,华哥要求的,这样开发其实也挺好,函数的参数就不用写那么多了.
网友评论