基于SSM的RBAC权限系统(5)-利用ajax,JQuery实现动态搜索
先来看看效果图
原来动态时页面的(基于bookstrap)
<div class="row">
<div class="col-md-12 ">
<table id="tbl_user" class="table table-hover table table-striped">
<thead>
<tr>
<th>ID</th>
<th>姓名</th>
<th>手机</th>
<th>年龄</th>
<th>经验</th>
<th>帐号</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</div>
<c:forEach items="${pageInfo.list}" var="user">
<tr class="tr_user">
<th>${user.id}</th>
<th>${user.name}</th>
<th>${user.phone}</th>
<th>${user.age}</th>
<th>${user.experience}</th>
<th>${user.account}</th>
<th>
<button name="${user.id}"
class="roleBtn btn btn-info glyphicon glyphicon-eye-open btn-sm"
data-toggle="modal" data-target="#roleModal"> 分配角色
</button>
<c:choose>
<c:when test="${fn:contains(user.name,'超级管理员')}">
<button class="btn btn-warning glyphicon glyphicon-cog btn-sm disabled">
禁止编辑
</button>
<button class="btn btn-danger glyphicon glyphicon-trash btn-sm disabled">
禁止删除
</button>
</c:when>
<c:otherwise>
<button name="${user.id}"
class="editBtn btn btn-warning glyphicon glyphicon-cog btn-sm"
data-toggle="modal" data-target="#editModal">编辑
</button>
<button name="${user.id}"
class="deleteBtn btn btn-danger glyphicon glyphicon-cog btn-sm"
data-toggle="modal" data-target="#deleteModal">删除
</button>
</c:otherwise>
</c:choose>
</th>
</tr>
</c:forEach>
</table>
<div class="row">
<div id="pageNav"></div>
<div class="col-md-2">
<button class="btn btn-primary glyphicon glyphicon-plus" data-toggle="modal"
data-target="#addModal">增加
</button>
</div>
<div class="col-md-4">
<button type="button" class="btn btn-info">当前页码:${pageInfo.pageNum}</button>
<button type="button" class="btn btn-info">总页码:${pageInfo.pages}</button>
<button type="button" class="btn btn-info">总记录数:${pageInfo.total}</button>
</div>
<div class="col-md-6">
<nav aria-label="Page navigation">
<ul class="pagination">
<li><a href="${ pageContext.request.contextPath }/homePage/userManagement?pn=1">首页</a></li>
<li>
<a href="${ pageContext.request.contextPath }/homePage/userManagement?pn=${pageInfo.pageNum-1}"
aria-label="Previous">
<span aria-hidden="true">«</span>
</a>
</li>
<c:forEach items="${pageInfo.navigatepageNums}" var="index">
<c:if test="${index==pageInfo.pageNum}">
<li class="active"><a
href="${ pageContext.request.contextPath }/homePage/userManagement?pn=${index}">${index}</a>
</li>
</c:if>
<c:if test="${index!=pageInfo.pageNum}">
<li>
<a href="${ pageContext.request.contextPath }/homePage/userManagement?pn=${index}">${index}</a>
</li>
</c:if>
</c:forEach>
<li>
<a href="${ pageContext.request.contextPath }/homePage/userManagement?pn=${pageInfo.pageNum+1}"
aria-label="Next">
<span aria-hidden="true">»</span>
</a>
</li>
<li>
<a href="${ pageContext.request.contextPath }/homePage/userManagement?pn=${pageInfo.pages}">末页</a>
</li>
</ul>
</nav>
</div><%--</row>--%>代码略长，但是没有要动脑的地方(分页数据通过pageHelper获得,这里th其实应该改为td…),实现动态返回结果，无非监听搜索栏的数据，数据一改变，到后台拿到分页后的数据，然后再用JQuery拼装好。后台代码如下：
public Msg getUserByKeyWord(@RequestParam(value = "KeyWord")String KeyWord,
@RequestParam(value = "pn",defaultValue ="1")Integer pn
) throws Exception{
//判断权限
Throwable t = new Throwable();
boolean isHasPermission= PermissionUtil.hasPermission(this.getClass(),t.getStackTrace()[0].getMethodName());
if(isHasPermission){
//这里告诉PageHelper查询第几页，一页多少数据
PageHelper.startPage(pn, 10);
List<User> users = userService.selectByKeyWord(KeyWord);
PageInfo pageInfo=new PageInfo(users);
return Msg.success().add("pageInfo",pageInfo);
}else{
return Msg.fail().add("returnMsg","你没有获得权限[通过关键字返回用户]");
}
}再来看看前台如何拼接语句
搜索栏监听
function goToPage(KeyWord,pn) {
$.ajax({
url: "user/getUserByKeyWord",
data: {"KeyWord":KeyWord,"pn":pn},
type: "GET",
success: function (result) {
function goToPage(KeyWord,pn) {
$.ajax({
$("#tbl_user tbody").empty();
if(result.code==100){
var list=result.extend.pageInfo.list;
$.each(list,function (index,item) {
//拼接每一行的数据
build_user_tal(item);
});
var pageInfo=result.extend.pageInfo;
pagenumber=pageInfo.pageNum;
//拼接分页条以及其他
build_user_nav(pageInfo);
}else{
//权限不足，弹窗警告
show_errorWindows(result.extend.returnMsg);
}
}
});
}
$('#keyword').bind('input oninput', function() {
//拿到关键字
var KeyWord=$('#keyword').val();
KW=KeyWord;
//进行搜索后跳到第一页
goToPage(KeyWord,1);
});如何在一进入就进行一次搜索来显示界面？
window.onload =function() {
KW="";
var pn=${pn};
goToPage(KW,pn);
};拼接语句：略长，可以不看，初学JQuery写得很渣
function build_user_tal(item) {
var tr=$("<tr></tr>").addClass("tr_user");
var id=$("<th></th>").append(item.id);
var name=$("<th></th>").append(item.name);
var phone=$("<th></th>").append(item.phone);
var age=$("<th></th>").append(item.age);
var experience=$("<th></th>").append(item.experience);
var account=$("<th></th>").append(item.account);
var td=$("<th></th>");
tr.append(id)
.append(name)
.append(phone)
.append(age)
.append(experience)
.append(account);
var btn1=$("<button></button>")
.addClass("roleBtn btn btn-info glyphicon glyphicon-eye-open btn-sm ajax_btn")
.attr("data-toggle","modal").attr("data-target","#roleModal").attr("name",item.id)
.append(" 分配角色");
td.append(btn1);
if(item.name=="超级管理员"){
var btn2=$("<button></button>")
.addClass("btn btn-warning glyphicon glyphicon-cog btn-sm disabled ajax_btn")
.append("禁止编辑");
var btn3=$("<button></button>")
.addClass("btn btn-danger glyphicon glyphicon-trash btn-sm disabled ajax_btn")
.append("禁止删除");
td.append(btn2);
td.append(btn3);
tr.append(td);
}else if(item.id==<%=userID %>){
var btn2=$("<button></button>")
.addClass("editBtn btn btn-warning glyphicon glyphicon-cog btn-sm ajax_btn")
.attr("data-toggle","modal").attr("data-target","#editModal").attr("name",item.id)
.append(" 编辑");
var btn3=$("<button></button>")
.addClass("btn btn-danger glyphicon glyphicon-trash btn-sm disabled ajax_btn")
.append("禁止删除");
td.append(btn2);
td.append(btn3);
tr.append(td);
}
else{
var btn2=$("<button></button>")
.addClass("editBtn btn btn-warning glyphicon glyphicon-cog btn-sm ajax_btn")
.attr("data-toggle","modal").attr("data-target","#editModal").attr("name",item.id)
.append(" 编辑");
var btn3=$("<button></button>")
.addClass("deleteBtn btn btn-danger glyphicon glyphicon-cog btn-sm ajax_btn")
.attr("data-toggle","modal").attr("data-target","#deleteModal").attr("name",item.id)
.append(" 删除");
td.append(btn2);
td.append(btn3);
tr.append(td);
}
$("#tbl_user tbody").append(tr);
}
function build_user_nav(pageInfo) {
var pageNav=$("#pageNav");
pageNav.empty();
var div1=$("<div></div>").addClass("col-md-2");
var div1_btn1=$("<button></button>").addClass("btn btn-primary glyphicon glyphicon-plus")
.attr("data-toggle","modal").attr("data-target","#addModal").append("增加");
div1_btn1.appendTo(div1);
div1.appendTo(pageNav);
var div2=$("<div></div>").addClass("col-md-4");
var div2_btn1=$("<button></button>").addClass("btn btn-info").attr("type","button").append("当前页码:"+pageInfo.pageNum);
div2_btn1.appendTo(div2);
var div2_btn2=$("<button></button>").addClass("btn btn-info").attr("type","button").append("总页码:"+pageInfo.pages);
div2_btn2.appendTo(div2);
var div2_btn3=$("<button></button>").addClass("btn btn-info").attr("type","button").append("总记录数:"+pageInfo.total);
div2_btn3.appendTo(div2);
pageNav.append(div2);
var div3=$("<div></div>").addClass("col-md-6");
var nav=$("<div></div>").attr("aria-label","Page navigation");
nav.appendTo(div3);
var ul=$("<ul></ul>").addClass("pagination");
ul.appendTo(nav);
var li1=$("<li></li>");
var li1_a1=$("<a></a>").addClass("btn_page ").attr("href","javascript:;")
.attr("aria-label","Previous").attr("name","1")
.append("首页");
li1_a1.appendTo(li1);
ul.append(li1);
var li2=$("<li></li>");
var li2_a1=$("<a></a>").addClass("btn_page").attr("href","javascript:;")
.attr("aria-label","Previous").attr("name",pageInfo.pageNum-1);
var li2_span1=$("<span></span>");
li2_span1.attr("aria-hidden","true").append("<");
li2_span1.appendTo(li2_a1);
li2_a1.appendTo(li2);
ul.append(li2);
var navigatepageNums=pageInfo.navigatepageNums;
$.each(navigatepageNums,function (index,item) {
if(item==pageInfo.pageNum){
var li=$("<li></li>").addClass("active");
var a=$("<a></a>").addClass("btn_page").attr("href","javascript:;").attr("name",item).append(item);
a.appendTo(li);
li.appendTo(ul);
}else{
var li=$("<li></li>");
var a=$("<a></a>").addClass("btn_page").attr("href","javascript:;").attr("name",item).append(item);
a.appendTo(li);
li.appendTo(ul);
}
});
//继续添加
var li4=$("<li></li>");
var li4_a1=$("<a></a>").addClass("btn_page").attr("href","javascript:;")
.attr("aria-label","Next").attr("name",pageInfo.pageNum+1);
var li4_span1=$("<span></span>").attr("aria-hidden","true").append(">");
li4_span1.appendTo(li4_a1);
li4_a1.appendTo(li4);
li4.appendTo(ul);
var li5=$("<li></li>");
var li5_a1=$("<a></a>").addClass("btn_page").attr("href","javascript:;")
.attr("aria-label","Previous").attr("name",pageInfo.pages)
.append("末页");;
li5_a1.appendTo(li5);
li5.appendTo(ul);
pageNav.append(div3);
}完整项目地址
这是我第一个写的web项目，代码烂得飞起，仅供纪念，不做参考
带Shiro版：https://github.com/EnTaroAdunZ/ssm_rbac_shiro.git
不带Shiro版：https://github.com/EnTaroAdunZ/ssm_rbac.git
848
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
