17、尚硅谷_SSM高级整合_查询_构建员工列表.avi原创

好。那么上一节课呢？我们将这个员工的分页查询改造成了一个aja方法，让它返回我们这个阶层数据，里边包含分页信息和员工信息。那么呢，我们接下来就来改造我们这个首页。那么我们这个首页就不是一进来发请求，然后跳转到list页面了，而我们应该是首页，哎，一进来以后呢，我们使用GS发一个AJS请求，AJS请求要到分月的员工数据啊，咱们这个JS对象收到咱们这个员工数据，然后呢解析咱们这个结算数据在页面进行显示。那这个index页面我们就来重新改造一下，好，这是之前的，我们就不要了。好，我们来写一个新的in对页面。那么这个页面里边，我们这个分页的这个显示，我们还是把这个页面骨架直接CTRLC全部拿过来CTRLV好。

这块的我们来改一下我们这个分页信息，像这些东西，哎，像这些东西我们呢，接下来都是咱们这个返回的接接省数据都在这里边，包括着，包括我们这个分页条呢，也是我们解析接省而生成的，好放在这。包括我们这个啊，表格的显示我们也不用c for each遍历了，好我把它删掉。删掉，然后呢，我们来看咱们这一块呢，我们来从这个页面来开始发起请求，诶那我们就应该是。页面呢，加载完成以后。我们应该是在咱们这个页面加载。完成以后我们呢，直接去发送一个。咱们这A请求要到封页数据。那么呢，我们来运行这个页面要到分页数据以后怎么办呢？哎，我们在页面展示出来就行了，我们来看。

啊。也就是说呢，我们来发送AJS请求，我们要到分页数据，好，我们在这里边，我来重新运行。好，那么这个首页里边，这个表格里边所有的数据都是我们发送AJS请求拿到并显示的，包括这个信息，包括我们后来的风险条。所以说呢，我们就在这里边来写我们的这个代码。我们来编写这个方法。好到了福。Function。好，当咱们这个页面加载完成以后，我们来发一个请求。这个AJS请求呢，啊，帮我们来获取风险数据请求的URL地址来，我们就是咱们这个当前。项目下plus。下的EPS请求，那么呢，我们请求要带的数据，比如呢，我们要去第几页，我们可以写上PN，哎，我去配置number第一页我们请求的类型啊，比如呢，我们这是get或者post都行，我们就写一个get，好，我们请求成功的咱们这个回调函数。

啊，我这里边儿来这个就是我们服务器响应给浏览器的数据，我们可以在控制台打印一下。这个AJS请求啊，不会编写的同学呢，可以来看咱们这个杰克文档。我来打开，哎，这有个杰克文档。我们这个AJS啊，大家一定要熟练使用咱们这个AJS请求，哎，所有的数据呢，都是可定制的，比如我们要去到URL地址，诶是否同步异步，哎，以及咱们这个往下看啊，还有咱们只要要发送的数据，诶数据格式就是KY6AND KY就这么写就行了，包括呢，我们下边请求错误的回调函数啊，包括我们这个请求成功。

的咱们这个回调函数，以及咱们这个请求的类型get或post行，我们也写咱们这个大写的get。好，我们来测试一下，我来到咱们这个页面。F。我重新运行咱们这个首页，看他发没发请求。走。好，它这里边呢，就发了一个EPSPN等于一好配置number，然后呢会给我们返回处理成功，以及我们分页信息以及历史的数据都在这儿，我们接下来解析这个。数据就行了。我们在这一块，当我们这个请求成功以后，我们要做的事情。啊，两件事，第一个我们请求成功以后呢，会把我们这个分页信息，以及咱们这个员工数据都拿到，所以说第一件我们要做的事情就是在页面解析这个阶层，在页面我们这个表格里边来显示我们这个员工数据。

解析并显示员工数据。第二个我们要做的事情就是解析。解析并显示咱们这个封页信息。啊，我们这一块的员工数据，我们解析出来得填充在这儿，包括分页啊信息以及分页条的内容，所以说呢，我们把这两个解析显示，我们就抽取成两个方法。比如呢，第一个方法就叫build，我们来构建咱们这emps到咱们这个开啊，把咱们这员工的表格构建出来，第二个方法呢，比如哎，我们就叫。咱们这个哎，分页导航信息好，这两个呢，方法我们再放在这儿，把这些结果呢要解析，把我们这个导航条以及咱们这个呃，表格信息都要显示。

行，我们来看。解析我们并显示我们这个表格怎么做呢？也就是说呢，现在我们只有一个表头，那表格题里边的内容我们都是要去解析出来，而表格题里边的内容呢，就在我们返回值extend里边的配置，它有一个属性就是这个list，这个list里边是我们所有的员工数据。好，我们可以，为了方便，期间我们把这个请求啊发给浏览器，我们对照着浏览器给我们显示的接省数据，我们来解析这个返回结果里边extend里边的配置应符，里边的list属性包含了所有的员工数据，好，我们先取出来。我们的EPS就等于。

返回的结果里边我们有一个。拿过来有一个extend，哎，我们用户自己的数据，它里边有一个page INF，哎，我们这个pagef page里边有一个list。这个东西是我们所有的员工数据，那么接下来呢，我们就相当于是要便利，哎，这个员工数据，那这个便利方法呢，我们可以用杰克瑞提供的刀乐福一齿方法。那么这个一式方法传入第一个要变历的元素，每次变历的回调函数就是这个方式，那么回调函数里边呢，我们可以传两个参数，第一个参数代表索引，第二个参数就是当前的咱们这个对象，我可以alert一下，看我们拿到的这些员工，我们就把他的ERP name显示一下就行。每一个item就是我们取出的这个list里边，诶，每一条员工的这个对象，拿到他的这个名字显示一下就行。

我来测试。啊，这个。调用解析并显示员工数据，这是第一步，我们来先把每一个我们员工弹窗，我们来看对不对，刷新好杰瑞啊，还有咱们这个五个员工，诶没问题，那么呢，我们来看这些员工数据，哎，我们肯定不是alert的，我们要显示在咱们这个表格中。那好，我们来找到表格，我们要显示的位置。表格就是咱们这个table这个第一个TR是它的表头，那为了我们这个显示方便时间，把表头呢，我们都放在这个叫TK的。咱们这个标签T里边。接下来呢，我们所有的咱们这个表格的单元格数据我们都放在啊。提包的，那么这个表格题里边好，那么呢，我们相当于便利出的每一个员工，好，这是咱们这个员工，我们呢把每一个员工的这个我们要显示的所有信息，我们构建出一行TR，然后呢把它放进这个表格中，好，我们呢，现在来先来构建我们要显示的员工的这行TR。

我来先创建一个TR元素，好，我们使用杰克创建一个TR元素给TR元素里边我们先endend什么呢？就来先添加我们的这些单元格，哎，因为我们这个单元格挺多的。我们来看第一个，第一个单元格就是我们啊员工的这个ID单元格了，我们就写MPID的TD，那么这个TD呢，我们来创建出来。哎，这个TD我们也是来创建咱们一个TD，这个TD里边的元素啊，给它里边aendend的内容，就是我们取出的员工ID item，第二我们这个员工ID。

咱们这个名字的TD啊，刚才是IDTD，我们再来创建名字TD。好，还是这样，我们来创建一个TT。TD里边的内容呢，哎，就是我们这个员工的名字艾特。P。啊，我们对照着浏览器的这个显示来取就行了，那么还有员工的，咱们这个真的，呃性别。那么这个性别呢，我们来看也咱们这个真的真的咱们这个体积。也一样。到了福。哎，我们来构建出我们这个TD单元格。TD单元格，嗯，给里边aend a upon的内容就是咱们这个员工的性别，而这个性别取出来是MF，我们要显示男女，所以说呢，我们在这一块把性别处理一下。

哎，咱们这个真正的真的应该是咱们这A点，咱们这个真的取出来的值，我们要判断一下，哎，它等于咱们这个M。吗？如果等于M，我们就应该赋值为男。没有，否则呢，我们就赋值为女飞，没有，这是我们要显示的东西，所以说呢，我们的内容是这种，我们可以写一个三元运算好。这个我们这个性别的单元格就构建出来了，包括我们这个还有来看，还有我们这个邮箱原部门的名字。这个email的单元格等于咱们这个。哎，我们来再来构建我们这个TD。

提提点A来，我们把我们员工的邮箱item点我们这个邮箱就叫。每一个里边的这个email的值。好，包括呢，我们要这个员工的，咱们这一咱们这个第PT name部门的名字，哎，我们也构建出来。啊，TD。杠，咱们这个TD。点。好，我们这个就是item，我们这个要取出部门的名字，就是我们item代表每一个咱们这个员工数据，那么就是这一条记录，而这个里边的department对象里边的department name才是我们部门的名字，来就取出来。点department对象的咱们这个department。把它拿过来，我们这些单元格就构建好了，然后给我们的TR里边，把这些单元格我们就判进去。

不断的把咱们这个单元格放进去，把ID的放进去，咱们这个name的放进去，包括我们继续放点end。继续放我们这个蒸袋的。还有点儿A。哎，我们来看，还有咱们这email邮箱的。包括我们这个第。哎，给它里边填内容啊。我们能这么链式操作的这个原因啊，啊，因为是咱们这个end的方法，End的方法啊，执行完成以后。还是返回？原来的元素。所以说呢，我们每次TR给它里边追加元素以后，这个end的方法还会返回这个TR，那我们就继续end，给它里边填内容。

那么整个TR我们就构建完了，那么这个TR构建出来的以后呢，它应该是添加到我们这个表格体中，所以说呢，我们把整个TR构建完成以后，来调用一个方法，点end to，哎，添加到哪里去。那么呢，添加到哪里去呢？我们可以写一个选择器，找到咱们这个表格题，那我们来看一下那添加的内容，诶，就是这个T包底中，好，我可以为了方便给这个表格给一个ID，我们就叫emps table，哎。Table，这就是显示我们这个员工表格，好我们呢就把它添加到井号EMS table里边的中，好我保存保存，我们来刷新这个页面，我们来测试刷新。好，那我们来重启一下服务器。走。

好，这些问题，有时这个服务器用久了经常出问题，重启一下，好，我来刷新。哎，我们来看这个数据就被添进来了，只不过我们这两个按钮呢，我们来还没添加，那我们把这两个按钮也给它构造进来。所以说呢，这一块有一个有两个按钮，一个是我们这个编辑按钮。BTM。一个是我们这个删除按钮。我们就叫deb TN，那我们这两个按钮怎么构建呢？我们先来看第一个编辑按钮，我们把原来的咱们这个list页面，我们来看一下编辑按钮的样式，诶就是这样。Button里边呢，有这个东西，我来复制过来。好，我们就照着这个样式来构建。好，我们就照着这个样式来构建这个button按钮，我们来先创建一个button元素。

Button按钮元素。Button按钮，因为这个八层按钮元素里边呢，它还有一些class值，那我们就可以调用解壳瑞and class方法给它添加class类。而这个方法呢，也会返回咱们原来的这个元素，所以说呢，点。Plus。Class。Class，我们要添加的类都有哪些呢？就是这么多，那我就直接把这个拿过来。拿过来，那我们这个八层按钮就构建了，它里边还要贴内容，因为我们这个按class方法调完以后还返回button寸，那所以说我就继继续。调用它的end方法，给这个button按钮里边呢，来添上我们这个span元素，诶，我们来看啊，这有一个SPA元素。

4万元素。好，这个span元素呢，也有它的class值，那么我们来调用点and class，我这个综合表达式大家看懂啊。比如说呢，因为这个and class还会返回这个SPA元素，所以说呢，我就直接写在的参数里边，给这个SPA元素构建好以后，还给一个咱们这个参数行，这个属性呢，这是我们这个啊辅助的一些属性，我们就没啥用了，不用管好，那么啊，碰到完了以后呢，我们这个八层按钮，呃，碰到了一个SPA以后，它里边还有一个编辑这两个文字。所以说呢，我其实第判。两个文字叫编辑好。那么呢，我们把这个。编辑按钮我们就创建出来了，按照相同的道理，我们把这个delete b TN创建出来。那么基本上都是一模一样的，我把这一块拿过来，只是它里边的文字颜色不一样，好，这个叫编辑，这个叫删除。

删除以后呢，我们来看啊，删除按钮它的这个span里边的class不一样。删除按钮，好，Span里边它的class是这个垃圾箱串式。它的这个删除按钮前面有一个小图标，好，然后呢，还有咱们这个删除按钮，它的这个类也不一样，删除按钮它叫BTNBTN跟这。我们也拿过来。好，这两个按钮创建好以后啊，跟其他的元素也一样，我们都得追加到这个TR中啊，End。给这个TR中呢，我们来添加一个咱们这个button按钮和咱们这个。的。一个咱们这个删除按钮。把这两个按钮我们都贴上以后呢，哎，那再来点儿，把它放在咱们这个表格中，哎，这个点上有了，好，我们重新来刷新。

刷新诶这个删除以及编辑就有了，当然这一块呢，这是两个单元格，这两个单元格我们之前是写在一个单元格中的，好，那我们就来写在一个单元格中啊，这两个按钮我们追加到一个单元格中。哇，咱们这个呢，就叫BTN的TD。好，我来创建一个单元格。CD。第。这个单元格里边呢，有一个。编辑按钮继续来给这个单元格中呢追加一个。咱们这个删除按钮。追加一个咱们这个删除按钮好。然后呢，我们给咱们这个TR中end的是这个TD啊，不是我们这个按钮好end这个TD，要不然这个样式就看起来就变成这样，我们来刷新。

好，没问题了，编辑和删除都有了，那么呢，这两个啊就没什么问题了，只是这两个按钮中间我们还可以给它隔点空。添加再来添加一个，呃，它们两个中间来添加一些空格分隔符。好，就一个空格就够了。多个空格也会被当成一个，好，OK，没问题，那我们这个单元格的显示就没问题了，接下来我们就来构建咱们这个枫叶条的显示。