实现排序小功能

效果图:
在这里插入图片描述
在文本框中输入值,触发失焦事件,根据正序或是倒序进行排序(dao层中的SQL语句)

首先在数据库的表中新建一列
在这里插入图片描述
HTML界面
在这里插入图片描述
添加文本框
代码如下:

1
<input type="text" size="2" v-model="site.sort" v-on:blur="sort(site.nid,site.sort)">

在文本框输入完值后,鼠标离开,触发失焦事件 v-on:blur (vue之中)

下面是方法代码:

1
2
3
4
5
6
sort:function(nid,sort){
//alert(11);
$.post("/news/sorts",{nid:nid,sort:sort},function(data){
window.location.href="/admin/news";
})
},

控制层代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

//排序
@RequestMapping("sorts")
@ResponseBody
public String sorts(HttpServletRequest request) {

Integer nid=Integer.parseInt(request.getParameter("nid"));
Integer sort=Integer.parseInt(request.getParameter("sort"));

News news=newsService.findById(nid);
news.setNid(nid);
news.setSort(sort);
newsService.save(news);

return "1";
}

dao层:
在这里插入图片描述
根据实际情况在你的SQL语句中加入以上代码
具体根据什么排序根据自己起的字段名