基于SSM的RBAC权限系统(5)-利用ajax,JQuery实现动态搜索
2017-07-26 14:47
651 查看
基于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
相关文章推荐
- 基于SSM的RBAC权限系统(1)-利用ajax,bootstrap,ztree完成权限树功能
- 基于SSM的RBAC权限系统(2)-Shiro使用注解下AJAX交互临时解决方案
- 基于RBAC模型的权限管理系统的设计和实现
- jQuery中利用keyup事件和判断是否为汉字来实现动态搜索
- 基于RBAC的权限管理系统的实现
- SpringBoot整合mybatis、shiro、redis实现基于数据库的细粒度动态权限管理系统实例
- 基于RBAC的权限管理系统的实现
- 基于RBAC模型的权限管理系统的设计和实现
- 利用RBAC模型实现一个通用的权限管理系统
- spirng-boot中,基于既有的token验证方式,利用spring-security实现权限系统
- [转]Codeigniter中利用钩子系统实现基于URL的权限控制系统
- 利用JQuery方便实现基于Ajax的数据查询、排序和分页功能
- 基于RBAC模型的权限管理系统的设计和实现
- 基于RBAC模型的权限管理系统的设计和实现
- 基于RBAC模型的权限管理系统的设计和实现(转载)
- 基于RBAC模型的权限管理系统的设计和实现
- 基于RBAC的权限管理系统的实现
- 利用JQuery+Ajax实现aspx页面无刷新的动态数据绑定
- 基于RBAC模型的权限管理系统的设计和实现
- 基于RBAC的权限管理系统的实现--经典