基于SSM的RBAC权限系统(5)-利用ajax,JQuery实现动态搜索
来源：互联网 发布：app软件操作说明书 编辑：程序博客网 时间：2024/05/19 16:28
基于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
阅读全文
0 0
- 基于SSM的RBAC权限系统(5)-利用ajax,JQuery实现动态搜索
- 基于SSM的RBAC权限系统(1)-利用ajax，bootstrap，ztree完成权限树功能
- 基于SSM的RBAC权限系统(2)-Shiro使用注解下AJAX交互临时解决方案
- 基于SSM的RBAC权限系统(3)-Shiro基于非注解的基础使用
- 利用RBAC模型实现一个通用的权限管理系统
- 基于RBAC的权限管理系统的实现
- 基于RBAC的权限管理系统的实现
- 基于RBAC的权限管理系统的实现
- 基于RBAC的权限管理系统的实现--经典
- 基于SSM的RBAC权限系统(4)-巧用Shiro自带加密
- 基于角色管理(RBAC)的权限系统
- 基于角色管理(RBAC)的权限系统
- 基于角色管理(RBAC)的权限系统
- 基于角色管理(RBAC)的权限系统
- 基于RBAC的权限管理系统
- Yii基于RBAC的权限系统
- 基于RBAC的saas权限系统设计
- 混合了RBAC和ACL的权限系统(二) -- 基于RBAC的系统权限
- 二叉排序树浅讲
- 数据库基础知识学习
- Vue Prop使用
- Spring bean的生命周期
- springmvc---web.xml的配置文件
- 基于SSM的RBAC权限系统(5)-利用ajax,JQuery实现动态搜索
- String--引用计数写时拷贝
- java从入门到放弃
- HDU6033 Add More Zero（取对数）
- RN面试要点
- SQL 之 lateral view explode()
- Angular移除不必要的$watch之性能优化
- MFC之CAsyncSocket详解
- HDU-6044 Limited Permutation（计数）
